Browse components
Decay Card
An image card that leans toward the cursor and melts into noisy SVG displacement the faster you move.
Installation
npx shadcn@latest add @glint-ui/decay-cardFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/decay-card.json
Usage
import { DecayCard } from "@/components/ui/decay-card";
<DecayCard image="/portrait.jpg" alt="Portrait">
<p className="text-4xl font-semibold">Decay</p>
</DecayCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| image | string | "" | Image URL. |
| width | number | 300 | Card width in px. |
| height | number | 400 | Card height in px. |
| intensity | number | 1 | Displacement strength. |
| frequency | number | 0.012 | Noise frequency (lower = bigger blobs). |
| drift | number | 18 | Px the card drifts toward the cursor. |
| alt | string | "" | Image alt text. |
| children | ReactNode | — | Overlay content, e.g. a caption. |
| className | string | — | Extra classes for the root element. |