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.jsonUsage
<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-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. |