v0.3.0

Liquid Glass

An Apple-style chromatic aberration and displacement effect for Vue.

GLASS

EFFECT

Balance

$12,450.00

Try dragging the card to see the refraction

Installation

npx shadcn-vue@latest add https://raya-ui.com/registry/liquid-glass.json

Or manually:

Copy the component code into your project.

Copy the component code manually.

Usage

<template>
  <LiquidGlass :radius="30" :scale="-180" :blur="10">
    <div class="p-6">
      <h2 class="text-white text-lg font-bold">Glass Card</h2>
      <p class="text-zinc-700 dark:text-zinc-300">Content inside the glass.</p>
    </div>
  </LiquidGlass>
</template>

Props

Prop	Default	Description
radius	16	Border radius of the glass container.
scale	-180	Intensity of the displacement/refraction.
blur	11	Blur amount for the internal displacement map.
alpha	0.93	Opacity of the internal shape mask.