Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
elastic-card-list-demo
Fernhollow Knit — Autumn 07
Low Light Wool
Low Light Wool
Open Weave
Open Weave
Window Hours
Window Hours
Salt Air Knits
Salt Air Knits
Ember Red
Ember Red
import { ElasticCardList } from "@/registry/tween/elastic-card-list"
export function ElasticCardListDemo() {
return <ElasticCardList />
}
Installation
Usage
import { ElasticCardList } from "@/components/ui/elastic-card-list"<ElasticCardList
heading="Fernhollow Knit — Autumn 07"
items={[
{
label: "Low Light Wool",
cards: ["/wool-1.jpg", "/wool-2.jpg", "/wool-3.jpg", "/wool-4.jpg"],
},
{
label: "Open Weave",
cards: ["/weave-1.jpg", "/weave-2.jpg", "/weave-3.jpg", "/weave-4.jpg"],
},
]}
/>How it works
- Every row is measured once fonts are ready and locked to the tallest row plus a little headroom.
- Hovering a row grows it by
hoverGrowthpixels. The other rows shrink by a share of that growth weighted by1 / distance, so the list keeps its total height and the nearest neighbours give up the most. - The resting label squashes (
scaleX 0.75,scaleY 1.25) and blurs out while a handwritten copy of the same label pops in with aback.outovershoot. - Four cards sit in the corners of the stage. Entering the list springs them in with
elastic.out; each row hover swaps their images, moves them toward that row with random x, y and rotation jitter, and leaving the list scales them back to zero. - A
ResizeObserverre-measures the rows when the width changes. Withprefers-reduced-motion: reducethe list renders static and the cards stay hidden.
The default fonts fall back to system faces. Load Gasoek One and Nanum Pen Script (or pass displayFont and scriptFont) for the original look.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ElasticCardListItem[] | 5 defaults | Each item is { label, cards } with up to four image URLs. |
heading | ReactNode | "Fernhollow Knit — Autumn 07" | Small line above the list. |
displayFont | string | heavy display stack | Font stack for the resting label. |
scriptFont | string | handwritten stack | Font stack for the hover label. |
hoverGrowth | number | 50 | Extra height in pixels the hovered row gains. |
background | string | "#efe9e1" | Color around the rounded panel. |
panelColor | string | "#1c1714" | Panel background. |
className | string | — | Extra classes on the outer container. |