Browse components
Bounce Cards
A fanned stack of photo cards that bounce into place when scrolled into view and spread apart on hover.
Installation
npx shadcn@latest add @glint-ui/bounce-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/bounce-cards.json
Usage
import { BounceCards } from "@/components/ui/bounce-cards";
<BounceCards images={["/1.jpg", "/2.jpg", "/3.jpg", "/4.jpg", "/5.jpg"]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| images | ReactNode | — | Array of image URLs. |
| cardSize | number | 170 | Card width in px (height is 1.25x). |
| overlap | number | 110 | Px between card centers. |
| rotation | number | 7 | Fan rotation per card in degrees. |
| spread | number | 70 | Px neighbours are pushed on hover. |
| stagger | number | 0.08 | Seconds between card entrances. |
| bounciness | number | 9 | Entrance spring damping (lower = bouncier). |
| className | string | — | Extra classes for the root element. |