🌊 Liquid Glass Vue

Apple's Liquid Glass effect implementation for Vue 3 + Nuxt 3. A liquid glass component with real-time displacement mapping, chromatic aberration, and glassmorphism effects.

🌐 Demo

🚀 Live Demo

🚀 Installation

npm install @aslanonur/liquid-glass-vue
# or
yarn add @aslanonur/liquid-glass-vue
# or
pnpm add @aslanonur/liquid-glass-vue

🔗 Links

• GitHub Repository: https://github.com/aslanon/liquid-glass-vue
• NPM Package: https://www.npmjs.com/package/@aslanonur/liquid-glass-vue
• Issues: https://github.com/aslanon/liquid-glass-vue/issues

📖 Usage

Basic Usage

<template>
    <LiquidGlass>
        <div class="p-6">
            <h2>Your Content</h2>
            <p>This content will have liquid glass effect</p>
        </div>
    </LiquidGlass>
</template>

<script setup>
import { LiquidGlass } from "@aslanonur/liquid-glass-vue";
</script>

Button Mode

<template>
    <!-- Clickable Button -->
    <LiquidGlass :on-click="handleClick" :elasticity="0.8" padding="16px 24px">
        <div class="flex items-center gap-2">
            <Icon name="arrow-right" />
            <span>Click Me</span>
        </div>
    </LiquidGlass>

    <!-- Inline Buttons -->
    <div class="flex gap-3">
        <LiquidGlass
            :on-click="() => save()"
            :corner-radius="20"
            padding="12px 20px"
        >
            <span>Save</span>
        </LiquidGlass>

        <LiquidGlass
            :on-click="() => cancel()"
            :corner-radius="20"
            padding="12px 20px"
        >
            <span>Cancel</span>
        </LiquidGlass>
    </div>
</template>

<script setup>
import { LiquidGlass } from "@aslanonur/liquid-glass-vue";

const handleClick = () => {
    console.log("Button clicked!");
};

const save = () => {
    // Save logic
};

const cancel = () => {
    // Cancel logic
};
</script>

With Custom Props

<template>
    <LiquidGlass
        :displacement-scale="100"
        :blur-amount="0.5"
        :saturation="150"
        :aberration-intensity="3"
        :elasticity="0.2"
        :corner-radius="20"
        :over-light="false"
        mode="standard"
    >
        <YourContent />
    </LiquidGlass>
</template>

<script setup>
import { LiquidGlass } from "@aslanonur/liquid-glass-vue";
</script>

Global Mouse Tracking

<template>
    <div @mousemove="updateMousePos">
        <LiquidGlass :global-mouse-pos="globalMouse"> Content 1 </LiquidGlass>

        <LiquidGlass :global-mouse-pos="globalMouse"> Content 2 </LiquidGlass>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { LiquidGlass } from "@aslanonur/liquid-glass-vue";

const globalMouse = ref({ x: 0, y: 0 });

const updateMousePos = (e) => {
    globalMouse.value = { x: e.clientX, y: e.clientY };
};
</script>

⚙️ Props

🎨 Usage Scenarios

Dark Background (Normal Glass)

<LiquidGlass :over-light="false">
  <!-- Transparent glass effect for dark backgrounds -->
</LiquidGlass>

Light Background (Dark Tint)

<LiquidGlass :over-light="true">
  <!-- Dark glass effect for light backgrounds -->
</LiquidGlass>

Button Mode Features

When you provide an onClick prop, the component automatically enables button mode with:

• Hover Effects: Subtle glow and highlight effects on hover
• Active States: Visual feedback when pressed
• Cursor Pointer: Automatic cursor change to indicate clickability
• Enhanced Elasticity: More responsive mouse interactions
• Multiple Border Layers: Advanced visual depth with screen and overlay blend modes

<template>
    <!-- Button with enhanced effects -->
    <LiquidGlass :on-click="handleClick" :elasticity="0.8" :over-light="false">
        <span>Interactive Button</span>
    </LiquidGlass>

    <!-- Over light button -->
    <LiquidGlass :on-click="handleClick" :over-light="true">
        <span>Over Light Button</span>
    </LiquidGlass>
</template>

Relative Positioning (Inline Elements)

<template>
    <div class="flex gap-4">
        <LiquidGlass positioning="relative" class="inline-block">
            <button>Save</button>
        </LiquidGlass>

        <LiquidGlass positioning="relative" class="inline-block">
            <button>Cancel</button>
        </LiquidGlass>
    </div>
</template>

Fixed Positioning (Overlay Elements)

<LiquidGlass
    positioning="fixed"
    :style="{ top: '50%', left: '50%', zIndex: 50 }"
>
  <!-- Centered overlay content -->
</LiquidGlass>

🛠️ TypeScript Support

This package includes full TypeScript support with type definitions.

import type {
    LiquidGlassProps,
    MousePosition,
} from "@aslanonur/liquid-glass-vue";

📄 License

MIT License - see LICENSE file for details.

🔗 Links

• GitHub Repository: https://github.com/aslanon/liquid-glass-vue
• NPM Package: https://www.npmjs.com/package/@aslanonur/liquid-glass-vue
• Issues: https://github.com/aslanon/liquid-glass-vue/issues