Build Beautiful Glass Interfaces
A native-ish design system for the web — Apple Liquid Glass refraction, animated conic-gradient borders, and Catppuccin colors. Built on Next.js 16, Tailwind v4, and shadcn.
Get Started Today
Tell us about your project.
Glass Design
System
Apple Liquid Glass refraction · Animated borders · Glass morphism · Catppuccin colors
Refraction Through Light
Glass panels distort the scene behind them — click to squeeze
Liquid Glass
SVG feDisplacementMap creates real optical distortion, not just a backdrop blur.
Chromatic Aberration
RGB channels displaced separately for that rainbow fringe at the edges.
Frosted
Heavier blur with subtle displacement — the frosted glass look.
Maximum Refraction
Colorful bokeh backgrounds make the displacement effect pop
Max Chromatic
Medium Chromatic
Subtle
Extreme
Animated Borders + Glass
Conic-gradient rotation with glow over data
48px
Border Radius
360°
Rotation
3s
Loop
Glass Card Components
Feature cards with refraction, animated borders, and glass morphism
Liquid Glass
SVG displacement filter creates real refraction with chromatic aberration — not a blur hack.
Animated Borders
Conic-gradient rotation via @property with mask compositing for transparent fills.
Catppuccin Colors
Mocha dark & Latte light palettes with real dark: classes — no filter hacks, ever.
Design System Components
Built on shadcn/ui with Catppuccin Mocha & Latte
Catppuccin Palette
Works Everywhere
Inline glass panels over any image — cards, heroes, banners