Liquid Glass Vue

https://github.com/wxperia/liquid-glass-vue
Admin
A Vue 3 component library that implements Apple's Liquid Glass effect with configurable refraction,...
Tokens:6,053
Snippets:36
Trust Score:7.5
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install Liquid Glass Vue

Source: https://github.com/wxperia/liquid-glass-vue/blob/main/README.md

Installs the Liquid Glass Vue library using npm. This is the first step to integrating the liquid glass effect into your Vue 3 application.

```bash
npm install @wxperia/liquid-glass-vue
```

--------------------------------

### Global Usage Example

Source: https://github.com/wxperia/liquid-glass-vue/blob/main/README.md

Shows how to use the LiquidGlass component after global registration. Any content placed inside the LiquidGlass component will receive the liquid glass effect.

```vue
<script setup lang="ts"></script>

<template>
  <LiquidGlass>
    <div class="p-6">
      <h2>Global Use</h2>
      <p>This will have the liquid glass effect</p>
    </div>
  </LiquidGlass>
</template>
```

--------------------------------

### Advanced Elastic Interaction with LiquidGlass Vue Component

Source: https://context7.com/wxperia/liquid-glass-vue/llms.txt

Demonstrates creating highly responsive elements with emphasized elastic deformation using the LiquidGlass Vue component. This example showcases dynamic control over elasticity and visual properties for multiple interactive items. It relies on the `LiquidGlass` component from '@wxperia/liquid-glass-vue'.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { LiquidGlass } from '@wxperia/liquid-glass-vue'

const items = ref([
  { id: 1, title: 'High Elasticity', elasticity: 0.5, color: '#ff6b6b' },
  { id: 2, title: 'Medium Elasticity', elasticity: 0.3, color: '#4ecdc4' },
  { id: 3, title: 'Low Elasticity', elasticity: 0.1, color: '#45b7d1' }
])

const handleItemClick = (title: string) => {
  console.log(`Clicked: ${title}`)
}
</script>

<template>
  <div style="padding: 80px; background: #1a1a1a; display: flex; gap: 40px; justify-content: center;">
    <LiquidGlass
      v-for="item in items"
      :key="item.id"
      :elasticity="item.elasticity"
      :displacement-scale="70"
      :blur-amount="0.15"
      :corner-radius="16"
      padding="28px 36px"
      @click="() => handleItemClick(item.title)"
    >
      <div style="min-width: 150px; text-align: center;">
        <div
          :style="{
            width: '48px',
            height: '48px',
            background: item.color,
            borderRadius: '12px',
            margin: '0 auto 12px'
          }"
        />
        <h4 style="margin: 0; color: white; font-size: 16px;">{{ item.title }}</h4>
        <p style="margin: 8px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 14px;">
          elasticity={{ item.elasticity }}
        </p>
      </div>
    </LiquidGlass>
  </div>
</template>

```

--------------------------------

### Manual Mouse Position Control for LiquidGlass Vue Component

Source: https://context7.com/wxperia/liquid-glass-vue/llms.txt

Enables programmatic control over the Liquid Glass effect by manually setting the mouse position, bypassing native mouse events. This example simulates circular motion to update the `globalMousePos` and `mouseOffset` props, allowing for custom animations. It requires importing `ref`, `onMounted`, `onUnmounted` from 'vue' and `LiquidGlass` from '@wxperia/liquid-glass-vue'.

```vue
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { LiquidGlass } from '@wxperia/liquid-glass-vue'

const globalMousePos = ref({ x: 0, y: 0 })
const mouseOffset = ref({ x: 0, y: 0 })

let animationFrame: number

const updatePosition = () => {
  // Simulate circular motion
  const time = Date.now() / 1000
  const radius = 100
  globalMousePos.value = {
    x: window.innerWidth / 2 + Math.cos(time) * radius,
    y: window.innerHeight / 2 + Math.sin(time) * radius
  }

  // Calculate offset based on glass center
  const glassCenterX = window.innerWidth / 2
  const glassCenterY = window.innerHeight / 2
  const glassWidth = 300
  const glassHeight = 200

  mouseOffset.value = {
    x: ((globalMousePos.value.x - glassCenterX) / glassWidth) * 100,
    y: ((globalMousePos.value.y - glassCenterY) / glassHeight) * 100
  }

  animationFrame = requestAnimationFrame(updatePosition)
}

onMounted(() => {
  updatePosition()
})

onUnmounted(() => {
  cancelAnimationFrame(animationFrame)
})
</script>

<template>
  <div style="width: 100%; height: 100vh; background: #0f172a; display: flex; align-items: center; justify-content: center;">
    <LiquidGlass
      :global-mouse-pos="globalMousePos"
      :mouse-offset="mouseOffset"
      :elasticity="0.35"
      :displacement-scale="80"
      padding="40px 60px"
    >
      <div style="color: white; text-align: center;">
        <h2 style="margin: 0 0 12px;">Programmatic Control</h2>
        <p style="margin: 0; opacity: 0.9;">The glass effect follows an automated circular motion</p>
      </div>
    </LiquidGlass>
  </div>
</template>

```

--------------------------------

### Basic Liquid Glass Component Usage

Source: https://github.com/wxperia/liquid-glass-vue/blob/main/README.md

Illustrates the basic import and usage of the LiquidGlass component in a Vue 3 setup. Content within this component will be styled with the liquid glass effect.

```vue
<script setup lang="ts">
  import { LiquidGlass } from 'liquid-glass-vue'
</script>

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

--------------------------------

### Advanced Shader Mode Liquid Glass Card

Source: https://context7.com/wxperia/liquid-glass-vue/llms.txt

Demonstrates using the LiquidGlass component in 'shader' mode with a 'mosaicGlass' effect for advanced visual realism. This example configures shader-specific properties like displacement scale, blur, saturation, aberration, elasticity, and corner radius, along with a click handler.

```vue
<script setup lang="ts">
import { LiquidGlass } from '@wxperia/liquid-glass-vue'

const handleCardClick = () => {
  console.log('Card selected')
}
</script>

<template>
  <div style="padding: 100px; background: url('your-background.jpg') center/cover;">
    <LiquidGlass
      mode="shader"
      effect="mosaicGlass"
      :displacement-scale="80"
      :blur-amount="0.15"
      :saturation="150"
      :aberration-intensity="3"
      :elasticity="0.25"
      :corner-radius="16"
      padding="32px"
      @click="handleCardClick"
    >
      <div>
        <h3 style="margin: 0 0 12px; color: white; font-size: 24px;">Premium Card</h3>
        <p style="margin: 0; color: rgba(255, 255, 255, 0.85); line-height: 1.5;">
          This card uses shader-based mosaic glass effect for enhanced realism.
          The displacement scale and aberration create depth.
        </p>
      </div>
    </LiquidGlass>
  </div>
</template>
```

--------------------------------

### Interactive Clickable Liquid Glass Button

Source: https://context7.com/wxperia/liquid-glass-vue/llms.txt

Shows how to create an interactive LiquidGlass button with custom properties like displacement scale, blur, saturation, aberration, elasticity, and corner radius. It also includes an event handler for click events.

```vue
<script setup lang="ts">
import { LiquidGlass } from '@wxperia/liquid-glass-vue'

const handleButtonClick = () => {
  console.log('Liquid glass button clicked!')
  // Add your click logic here
}
</script>

<template>
  <div style="padding: 50px; background: #1a1a1a; display: flex; justify-content: center; align-items: center; min-height: 100vh;">
    <LiquidGlass
      :displacement-scale="64"
      :blur-amount="0.1"
      :saturation="130"
      :aberration-intensity="2"
      :elasticity="0.35"
      :corner-radius="100"
      padding="12px 24px"
      @click="handleButtonClick"
    >
      <span style="color: white; font-weight: 500; font-size: 16px;">Click Me</span>
    </LiquidGlass>
  </div>
</template>
```

--------------------------------

### Mouse Container for Liquid Glass Interaction

Source: https://context7.com/wxperia/liquid-glass-vue/llms.txt

Configures LiquidGlass to track mouse movements over a larger container element rather than just the glass component itself. This is achieved by passing a `ref` to the `mouse-container` prop. It enhances the responsiveness of the glass effect over a broader area.

```vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { LiquidGlass } from '@wxperia/liquid-glass-vue'

const containerRef = ref<HTMLDivElement>()
</script>

<template>
  <div
    ref="containerRef"
    style="width: 100%; height: 100vh; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); position: relative;"
  >
    <LiquidGlass
      :mouse-container="containerRef"
      :elasticity="0.4"
      :displacement-scale="90"
      :blur-amount="0.2"
      :corner-radius="20"
      padding="40px"
      :style="{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }"
    >
      <div style="text-align: center;">
        <h2 style="color: white; margin: 0 0 16px;">Responsive Glass</h2>
        <p style="color: rgba(255, 255, 255, 0.9); margin: 0;">
          Move your mouse anywhere on the screen to see the glass respond with elastic deformation
        </p>
      </div>
    </LiquidGlass>
  </div>
</template>
```

--------------------------------

### Global Registration of LiquidGlass Component

Source: https://github.com/wxperia/liquid-glass-vue/blob/main/README.md

Demonstrates how to register the LiquidGlass component globally within a Vue 3 application. This allows the component to be used in any template without explicit import.

```typescript
import LiquidGlass from 'liquid-glass-vue'
import { createApp } from 'vue'

const app = createApp()

app.use(LiquidGlass)
```

--------------------------------

### Liquid Glass: Configure for Light Backgrounds

Source: https://context7.com/wxperia/liquid-glass-vue/llms.txt

Configures the LiquidGlass component for optimal display over light-colored backgrounds using the 'over-light' prop. It adjusts shadows, opacity, and blur for better visibility. The component takes props like 'displacement-scale', 'blur-amount', 'saturation', and 'corner-radius' to fine-tune the effect.

```vue
<script setup lang="ts">
import { LiquidGlass } from '@wxperia/liquid-glass-vue'
</script>

<template>
  <div style="padding: 100px; background: #f7fafc;">
    <LiquidGlass
      :over-light="true"
      :displacement-scale="50"
      :blur-amount="0.08"
      :saturation="120"
      :corner-radius="12"
      padding="32px"
    >
      <div>
        <h3 style="margin: 0 0 12px; color: #1a202c; font-size: 20px;">Light Background Card</h3>
        <p style="margin: 0; color: #4a5568; line-height: 1.6;">
          The overLight prop adjusts shadows, opacity, and blur levels to ensure
          the glass effect remains visible and aesthetically pleasing on light backgrounds.
        </p>
      </div>
    </LiquidGlass>
  </div>
</template>

```

--------------------------------

### Liquid Glass: Explore Custom Shader Effects

Source: https://context7.com/wxperia/liquid-glass-vue/llms.txt

Demonstrates various custom shader effects available in the LiquidGlass component. It iterates through a predefined list of 'FragmentShaderType' and applies them using the 'effect' prop. Key props used for customization include 'displacement-scale', 'blur-amount', 'saturation', 'aberration-intensity', and 'elasticity'.

```vue
<script setup lang="ts">
import { LiquidGlass } from '@wxperia/liquid-glass-vue'
import type { FragmentShaderType } from '@wxperia/liquid-glass-vue'

const effects: FragmentShaderType[] = [
  'liquidGlass',
  'flowingLiquid',
  'transparentIce',
  'unevenGlass',
  'mosaicGlass'
]
</script>

<template>
  <div style="padding: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;">
      <LiquidGlass
        v-for="effect in effects"
        :key="effect"
        mode="shader"
        :effect="effect"
        :displacement-scale="75"
        :blur-amount="0.12"
        :saturation="140"
        :aberration-intensity="2.5"
        :elasticity="0.3"
        padding="24px"
      >
        <div style="color: white;">
          <h4 style="margin: 0 0 8px; text-transform: capitalize;">{{ effect.replace(/([A-Z])/g, ' $1').trim() }}</h4>
          <p style="margin: 0; opacity: 0.85; font-size: 14px;">Shader-based glass effect</p>
        </div>
      </LiquidGlass>
    </div>
  </div>
</template>

```

--------------------------------

### Liquid Glass: Demonstrate Refraction Modes

Source: https://context7.com/wxperia/liquid-glass-vue/llms.txt

Compares different refraction modes (standard, polar, prominent, shader) of the LiquidGlass component. It takes no specific input parameters but renders distinct visual outputs based on the 'mode' prop. Dependencies include the LiquidGlass component and its GlassMode enum.

```vue
<script setup lang="ts">
import { LiquidGlass, GlassMode } from '@wxperia/liquid-glass-vue'
</script>

<template>
  <div style="padding: 50px; background: #2d3748; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;">
    <!-- Standard Mode -->
    <LiquidGlass
      :mode="GlassMode.standard"
      :displacement-scale="70"
      padding="24px"
    >
      <div style="color: white;">
        <h4 style="margin: 0 0 8px;">Standard Mode</h4>
        <p style="margin: 0; opacity: 0.9;">Classic refraction pattern</p>
      </div>
    </LiquidGlass>

    <!-- Polar Mode -->
    <LiquidGlass
      :mode="GlassMode.polar"
      :displacement-scale="70"
      padding="24px"
    >
      <div style="color: white;">
        <h4 style="margin: 0 0 8px;">Polar Mode</h4>
        <p style="margin: 0; opacity: 0.9;">Circular displacement pattern</p>
      </div>
    </LiquidGlass>

    <!-- Prominent Mode -->
    <LiquidGlass
      :mode="GlassMode.prominent"
      :displacement-scale="70"
      padding="24px"
    >
      <div style="color: white;">
        <h4 style="margin: 0 0 8px;">Prominent Mode</h4>
        <p style="margin: 0; opacity: 0.9;">Enhanced edge definition</p>
      </div>
    </LiquidGlass>

    <!-- Shader Mode -->
    <LiquidGlass
      :mode="GlassMode.shader"
      effect="liquidGlass"
      :displacement-scale="70"
      padding="24px"
    >
      <div style="color: white;">
        <h4 style="margin: 0 0 8px;">Shader Mode</h4>
        <p style="margin: 0; opacity: 0.9;">Dynamic shader-based effect</p>
      </div>
    </LiquidGlass>
  </div>
</template>

```

--------------------------------

### Configurable Button with Liquid Glass Effect

Source: https://github.com/wxperia/liquid-glass-vue/blob/main/README.md

Applies the LiquidGlass effect to a button element, demonstrating various configuration props like displacementScale, blurAmount, saturation, aberrationIntensity, elasticity, and cornerRadius. Includes a click handler.

```vue
<script setup lang="ts">
  import { LiquidGlass } from '@wxperia/liquid-glass-vue'

  const handleClick = () => {
    console.log('Button clicked!')
  }
</script>

<template>
  <LiquidGlass
    :displacement-scale="64"
    :blur-amount="0.1"
    :saturation="130"
    :aberration-intensity="2"
    :elasticity="0.35"
    :corner-radius="100"
    padding="8px 16px"
    @click="handleClick"
    :effect="mosaicGlass"
    :mode="'shader'"
  >
    <span class="text-white font-medium">Click Me</span>
  </LiquidGlass>
</template>
```

--------------------------------

### Mouse Container Interaction with Liquid Glass

Source: https://github.com/wxperia/liquid-glass-vue/blob/main/README.md

Configures the LiquidGlass component to respond to mouse movements within a specified parent container using the `mouseContainer` prop. This allows the effect to be influenced by mouse position over a larger area.

```vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { LiquidGlass } from 'liquid-glass-vue'

  const containerRef = ref<HTMLDivElement>()
</script>

<template>
  <div
    ref="containerRef"
    class="w-full h-screen bg-image"
  >
    <LiquidGlass
      :mouse-container="containerRef"
      :elasticity="0.3"
      :style="{ position: 'fixed', top: '50%', left: '50%' }"
    >
      <div class="p-6">
        <h2>Glass responds to mouse anywhere in the container</h2>
      </div>
    </LiquidGlass>
  </div>
</template>
```
Tokens:
Raw