KQ-1848 · HEADWIND/CARDS

Headwind Cards

A row of standing cards that lean into the drag like walkers into wind: the row follows the hand 1:1 and rubber-bands past its ends, and each card skews about its foot in proportion to the row's speed, the cards at the leading end furthest, each on its own spring so a change of direction runs down the row as a wave. A throw is projected to the card it would rest on and the row springs there on springs.glide with the release velocity, while every card stands back up on a spring of the given stiffness at the recoil damping ratio, rocking just past upright before it settles. Arrow keys step one card on springs.snap with half the lean, Home and End travel to the ends on springs.glide, and a click on another card brings it in.

KQ-1848 · HEADWIND/CARDS

Fieldline Walks

Routes for this weekend

Ridge Loop

11 km · 3 h 40

Saltmarsh Path

7 km · 2 h

Beech Hollow

5 km · 1 h 30

Cliff Steps

9 km · 3 h

Old Rail Line

14 km · 3 h 30

Tarn Circuit

12 km · 4 h

Dune Track

6 km · 1 h 50

Orchard Lanes

8 km · 2 h 20

Ridge Loop · 1 of 8 · 11 km · 3 h 40 · drag the row

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/headwind-cards

Props

items: HeadwindCard[]; default defaultHeadwindCards; The cards: { src?, alt, caption?, detail?, art? }.
value / defaultValue: number; default 0; The current card; controlled or initial.
onValueChange: (index: number) => void; default —; Fires from the throw, click or key that chose a card, with the card the row will settle on.
skew: number; default 1; How hard the cards lean into the motion, 0 (upright) to 2.
stiffness: number; default 380; Stiffness of the spring that stands the cards back up, 120 (loose, rocking) to 900 (quick).
gap: number; default 16; Space between cards, px.
cardWidth: number; default 168; A card's width, px; held to 72% of the row on narrow screens.
aspect: number; default 1.18; A card's height as a share of its width.
maxLean: number; default 14; The most a card may lean, degrees.
spread: number; default 0.6; How much more the leading cards lean than the trailing ones, 0 (all alike) to 1.
friction: number; default 0.5; How quickly a throw dies away, 0 (coasts far) to 1 (stops short).
align: "start" | "center"; default "start"; Where the current card rests: at the start of the row or in its middle.
streaks: boolean; default true; Faint wind lines drifting through the gaps while the row moves fast.
label: string; default "Cards"; The row's accessible name.
disabled: boolean; default false; No drags, clicks or keys; the row dims.
className: string; default —; Classes for the root region.

Prop	Type	Default	Description
items	HeadwindCard[]	defaultHeadwindCards	The cards: { src?, alt, caption?, detail?, art? }.
value / defaultValue	number	0	The current card; controlled or initial.
onValueChange	(index: number) => void	—	Fires from the throw, click or key that chose a card, with the card the row will settle on.
skew	number	1	How hard the cards lean into the motion, 0 (upright) to 2.
stiffness	number	380	Stiffness of the spring that stands the cards back up, 120 (loose, rocking) to 900 (quick).
gap	number	16	Space between cards, px.
cardWidth	number	168	A card's width, px; held to 72% of the row on narrow screens.
aspect	number	1.18	A card's height as a share of its width.
maxLean	number	14	The most a card may lean, degrees.
spread	number	0.6	How much more the leading cards lean than the trailing ones, 0 (all alike) to 1.
friction	number	0.5	How quickly a throw dies away, 0 (coasts far) to 1 (stops short).
align	"start" \| "center"	"start"	Where the current card rests: at the start of the row or in its middle.
streaks	boolean	true	Faint wind lines drifting through the gaps while the row moves fast.
label	string	"Cards"	The row's accessible name.
disabled	boolean	false	No drags, clicks or keys; the row dims.
className	string	—	Classes for the root region.