A poster card that tilts slightly toward the pointer while a specular band and a lit edge slide across its surface.
Tromso to Narvik, 6h 40m
npx shadcn@latest add https://hyperblur.dev/r/card-glare.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-glare.tsx.
import { CardGlare } from "@/components/hyperblur/card-glare"
<CardGlare title="Aurora Night Train" subtitle="Tromso to Narvik" badge="Departs 21:15" />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Aurora Night Train" | Heading shown at the bottom of the card. |
| subtitle | string | "Tromso to Narvik, 6h 40m" | Line of supporting text under the title. |
| badge | string | "Departs 21:15" | Small pill at the top left. Hidden when empty. |
| src | string | Background image URL. A built-in gradient landscape is drawn when missing. | |
| accent | string | "#2f7bff" | Color of the built-in scene. |
| tilt | number | 8 | Largest tilt angle in degrees. |
| glare | number | 0.55 | Strength of the specular band, from 0 to 1. |
| ratio | number | 1.45 | Width divided by height of the card. |
| idle | boolean | true | Sweep the glare along a slow path until the pointer arrives. |
| children | ReactNode | Extra content rendered under the subtitle. |