🌊 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

| Prop | Type | Default | Description | | --------------------- | ------------------------ | ------------- | ------------------------------------------- | | displacementScale | number | 70 | Displacement effect intensity (0-200) | | blurAmount | number | 0.0625 | Background blur amount (0-1) | | saturation | number | 140 | Color saturation percentage (100-300) | | aberrationIntensity | number | 2 | Chromatic aberration intensity (0-20) | | elasticity | number | 0.15 | Mouse interaction elasticity (0-1) | | cornerRadius | number | 999 | Corner roundness (0-100, 999=fully rounded) | | overLight | boolean | false | Dark tint for light backgrounds | | mode | 'standard' \| 'polar' | 'standard' | Displacement pattern mode | | positioning | 'fixed' \| 'relative' | 'relative' | Positioning mode (fixed or relative) | | onClick | () => void | undefined | Click handler (enables button mode) | | globalMousePos | {x: number, y: number} | undefined | External mouse position | | mouseOffset | {x: number, y: number} | undefined | External mouse offset | | mouseContainer | HTMLElement | undefined | Mouse tracking container | | className | string | '' | Additional CSS classes | | padding | string | '24px 32px' | Internal padding | | style | object | {} | Additional style properties |

🎨 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