Elastic Strip

A row of cards you drag sideways. Cards further from your grab trail behind, so the strip stretches and leans, then springs straight.

pnpm dlx shadcn@latest add @latheui/elastic-strip

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Elastic Strip is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

API reference

Also accepts native div attributes. Each child is one card; size the strip's height with className.

Prop	Type	Default	Description
children* (required)	ReactNode	—	The cards.
label* (required)	string	—	Accessible name for the strip.
cardWidth	number	220	Width of a card, in px.
gap	number	16	Space between cards, in px.
elasticity	number	0.7	How much cards far from the grab trail behind, from 0 (rigid) to 1.
bend	number	9	Degrees a trailing card leans. 0 keeps cards upright.
snap	boolean	true	Settle with a card's edge at the start after a fling.

The strip is one focusable group with the carousel role description; arrow keys move it a card at a time.
Sideways trackpad scrolling moves it; vertical scrolling still scrolls the page, including on touch.
With reduced motion the cards move together, without trailing or leaning, and a fling does not coast.

Every card chases the strip at its own rate, slower the further it is from the card you grabbed, so the strip stretches like a chain.
A card leans by how far behind it is, from its bottom edge, and stretches slightly while it catches up.
A fling coasts, slowing by 8% a frame, then settles on the nearest card. Past either end the strip gives a little and pulls back.

<ElasticStrip label="Shots" elasticity={1} bend={18}>{cards}</ElasticStrip>

API reference

Also accepts native div attributes. Each child is one card; size the strip's height with className.

Prop	Type	Default	Description
children* (required)	ReactNode	—	The cards.
label* (required)	string	—	Accessible name for the strip.
cardWidth	number	220	Width of a card, in px.
gap	number	16	Space between cards, in px.
elasticity	number	0.7	How much cards far from the grab trail behind, from 0 (rigid) to 1.
bend	number	9	Degrees a trailing card leans. 0 keeps cards upright.
snap	boolean	true	Settle with a card's edge at the start after a fling.

Accessibility

The strip is one focusable group with the carousel role description; arrow keys move it a card at a time.
Sideways trackpad scrolling moves it; vertical scrolling still scrolls the page, including on touch.
With reduced motion the cards move together, without trailing or leaning, and a fling does not coast.

Motion

Every card chases the strip at its own rate, slower the further it is from the card you grabbed, so the strip stretches like a chain.
A card leans by how far behind it is, from its bottom edge, and stretches slightly while it catches up.
A fling coasts, slowing by 8% a frame, then settles on the nearest card. Past either end the strip gives a little and pulls back.