127 Components
Liquid Glass Card
CardsUltra-premium translucent frosted glass card featuring dynamic specular highlight cursor tracking, 3D perspective tilt, chromatic edge refraction, double-layer backdrop blur, and tactile click feedback.
Liquid Glass
Real-time specular refraction with double-layer backdrop blur and gyroscope angle response.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/liquid-glass-card.json"
Props
TypeScript props supported by <LiquidGlassCard />.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Apple Card Titanium" | Default headline or card title. |
| subtitle | string | "Mastercard • 7492 • World Elite" | Secondary descriptive text or card subtext. |
| blurStrength | number | 24 | Backdrop blur radius in pixels. |
| tiltFactor | number | 1.0 | Multiplier determining sensitivity of 3D tilt response. |
| chromaticEdge | boolean | true | Whether to render chromatic rainbow refraction along card borders. |
| children | React.ReactNode | — | Custom content rendered inside the frosted glass card container. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- Continuous 3D perspective tilt reacting to cursor coordinates with spring smoothing.
- Dynamic radial specular glare tracking cursor light source across card surface.
- Chromatic prismatic refraction along card perimeter borders.
- Double-layer backdrop blur creating rich depth over ambient saturated backdrops.
- Tactile spring click compression and customizable frost density and tilt sensitivity.
Keyboard & Accessibility
- Retains high contrast content legibility across bright and dark backgrounds.
- Suppresses aggressive 3D perspective tilts when `prefers-reduced-motion` is active.
- Accessible focus outlines when keyboard navigated.