Browse components
Parallax Cards
A draggable, snapping row of photo cards whose images drift inside their frames as the row scrolls and tilt toward the pointer.
Installation
npx shadcn@latest add @glint-ui/parallax-cardsFirst 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/parallax-cards.json
Usage
import { ParallaxCards } from "@/components/ui/parallax-cards";
<ParallaxCards
items={[
{ image: "/kyoto.jpg", title: "Kyoto", subtitle: "Japan", tag: "Culture" },
{ image: "/lofoten.jpg", title: "Lofoten", subtitle: "Norway", tag: "Nature" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { image, title, subtitle?, tag? }. |
| cardWidth | number | 280 | Card width in px. |
| cardHeight | number | 380 | Card height in px. |
| gap | number | 20 | Px between cards. |
| intensity | number | 0.2 | How far photos drift while scrolling, as a fraction of card width. |
| tilt | number | 6 | Max pointer tilt in degrees. |
| fadeEdges | boolean | true | Fade the row out at both edges. |
| className | string | — | Extra classes for the root element. |