Liquid Glass Vue

A high-performance, physically-based liquid distortion effect for Vue 3. Renders a glass-like container that interactively warps its background based on mouse movement, using SVG filters and CSS transforms.

这是一个高性能的 Vue 3 液体玻璃特效组件。利用 SVG Filter 和 CSS Transform 技术，渲染出一个能够跟随鼠标移动产生物理扭曲效果的磨砂玻璃容器。

Credits: This is a Vue 3 port of the amazing React library liquid-glass-react.
致谢： 本项目是 React 库 liquid-glass-react 的 Vue 3 移植版本。

✨ Features / 特性

• ⚡ Vue 3 Native: Built with <script setup> and Composition API.
  • 原生 Vue 3 开发，使用组合式 API。
• 🎨 Zero Dependencies: No Tailwind CSS required. Styles are fully encapsulated.
  • 零依赖，移除原版的 Tailwind 依赖，样式完全隔离。
• 🚀 High Performance: Uses SVG Filters & Hardware Acceleration.
  • 高性能，基于 SVG 滤镜与硬件加速。
• 🦾 TypeScript: Full TypeScript support with strictly typed props.
  • 提供完整的 TypeScript 类型定义。
• 🌗 Dark/Light Mode: Supports over-light mode for dark backgrounds.
  • 支持 over-light 模式，适配深色背景。

🔨 Usage / 使用

Import and use it in your Vue component. 在您的 Vue 组件中引入并使用。

<script setup lang="ts">
import { LiquidGlass } from '@yisrime/liquid-glass-vue'
import '@yisrime/liquid-glass-vue/dist/style.css' // If style injection is not automatic
</script>

<template>
  <div class="container">
    <!-- Basic Usage / 基础用法 -->
    <LiquidGlass>
      <h1>Hello Liquid</h1>
    </LiquidGlass>

    <!-- Advanced Usage / 高级用法 -->
    <LiquidGlass 
      :displacement-scale="100"
      :aberration-intensity="4"
      :elasticity="0.2"
      over-light
      class="my-glass-card"
      @click="handleClick"
    >
      <div class="content">
        <h2>Interactive Card</h2>
        <p>Hover me!</p>
      </div>
    </LiquidGlass>
  </div>
</template>

<style>
.container {
  background: #111; /* Effect looks best on dark/textured backgrounds */
  min-height: 100vh;
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
</style>

⚙️ Props / 参数配置

| Prop Name | Type | Default | Description / 描述 | | :--- | :--- | :--- | :--- | | displacementScale | number | 70 | Scale of the liquid distortion. Higher = more warped.液体扭曲的程度。数值越大，变形越明显。 | | blurAmount | number | 0.0625 | Amount of backdrop blur.背景模糊的强度。 | | saturation | number | 140 | Backdrop saturation percentage.背景饱和度百分比（增强玻璃通透感）。 | | aberrationIntensity | number | 2 | Chromatic aberration (RGB split) intensity at edges.边缘的色差（RGB 分离）强度。 | | elasticity | number | 0.15 | Physics elasticity for the mouse-follow effect.鼠标跟随效果的物理弹性系数。 | | cornerRadius | number | 999 | Border radius in pixels.容器圆角大小 (px)。 | | padding | string | '24px 32px' | CSS padding string.容器内边距。 | | overLight | boolean | false | Enable this if placing on a dark background for glowing effect.开启发光模式，适用于深色背景上的高亮效果。 | | mode | string | 'standard' | Displacement pattern: 'standard', 'polar', 'prominent', 'shader'.扭曲纹理模式。 | | globalMousePos | object | undefined | {x, y} Override mouse position (for synced effects).覆盖全局鼠标位置（用于多组件同步）。 |

Events / 事件

The component supports Attributes Fallthrough. You can directly listen to native DOM events on the component. 组件支持 透传 Attributes。你可以直接在组件标签上监听原生 DOM 事件。

• @click
• @mouseenter
• @mouseleave
• ...and others.

📄 License / 许可

Distributed under the MIT License. See LICENSE for more information. 基于 MIT 协议发布。详情请参阅 LICENSE 文件。

Based on liquid-glass-react by rdev.