A card whose image follows the pointer on a spring and swings with its speed, while a large title and an outlined echo trail behind it.
Container cranes, rain and 4 a.m. light
npx shadcn@latest add https://hyperblur.dev/r/card-decay.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-decay.tsx.
import { CardDecay } from "@/components/hyperblur/card-decay"
<CardDecay title="Neon Harbor" kicker="Night shift 03" caption="Cranes and rain" />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Neon Harbor" | Large heading that lags behind the image. |
| kicker | string | "Night shift 03" | Small uppercase label at the top left. Hidden when empty. |
| caption | string | "Container cranes, rain and 4 a.m. light" | Line of text under the title. |
| src | string | Image URL. A built-in gradient skyline is drawn when missing. | |
| accent | string | "#2f7bff" | Color of the built-in scene. |
| strength | number | 22 | Largest displacement of the image in pixels. The title and echo travel further. |
| ratio | number | 1.7 | Width divided by height of the card. |
| idle | boolean | true | Move the pointer target along a slow path until a real pointer arrives. |