Liquid Glass

An advanced, Apple-style chromatic aberration and displacement effect using complex SVG filters for stunning refractions.

Installation

npx raya-ui@latest add liquid-glass

File Structure

your-project

components

liquid-glass

LiquidGlass.vue

API Reference

Props

radius

number

16

Border radius of the glass container in pixels.

scale

number

-180

Intensity of the SVG displacement map (refraction strength).

blur

number

11

Blur amount for the internal displacement filter map.

alpha

number

0.93

Opacity of the internal feColorMatrix shape mask.

lightness

number

30

Controls the specular lighting brightness on the edges.

GLASS

EFFECT

Balance

$12,450.00

Drag the card to see the refraction

Settings

Refraction Scale-40

Displacement Blur15px

Specular Lightness30

Mask Alpha0.93

Border Radius24px

Green Shift

Blue Shift

source-code.vue

<script setup lang="ts">
import { LiquidGlass } from '@/components/ui/liquid-glass'
</script>

<template>
  <LiquidGlass class="w-72 h-48"
    :radius="24"
    :scale="-40"
    :blur="15">
    <div class="h-full w-full flex items-center justify-center p-6 bg-white/5">
      <p class="text-white font-medium">Refracted Content</p>
    </div>
  </LiquidGlass>
</template>