A frosted glass card with a fine noise texture, a bright inner rim and a specular highlight that tracks the pointer as the card tilts slightly. Best over color.
npx shadcn@latest add https://hyperblur.dev/r/glass-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/glass-card.tsx.
import { GlassCard } from "@/components/hyperblur/glass-card"
<GlassCard className="w-72 p-6">Frosted content</GlassCard>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Card content. | |
| blur | number | 18 | Backdrop blur radius in pixels. |
| tilt | number | 6 | Maximum tilt in degrees while hovering, capped at 6. 0 keeps the card flat. |
| glare | boolean | true | Show the moving specular highlight and the lit rim. |
| radius | number | 20 | Corner radius in pixels. |
| tint | string | "#ffffff" | Color mixed into the glass. |