Where the fog meets the ridge
A three-day traverse along the northern coast, shot on medium format.
Read story
Browse components
Drift Card
A card whose photo, text and chips drift at different parallax depths as the pointer moves, with a soft tilt and glare.
Installation
npx shadcn@latest add @glint-ui/drift-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/drift-card.json
Usage
import { DriftCard } from "@/components/ui/drift-card";
<DriftCard image="/ridge.jpg" eyebrow="Field notes" title="Where the fog meets the ridge" description="A three-day traverse." />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| image | string | — | Background image URL. |
| title | string | "Where the fog meets the ridge" | Card title. |
| description | string | "A three-day traverse along the northern coast, shot on medium format." | Supporting text. |
| eyebrow | string | "Field notes · 04" | Floating chip label. |
| children | ReactNode | — | Extra foreground content, e.g. a button. |
| depth | number | 24 | Max drift of the nearest layer in px. |
| tilt | number | 8 | Max tilt in degrees. |
| width | number | 320 | Card width in px. |
| height | number | 420 | Card height in px. |
| className | string | — | Extra classes for the root element. |