KQ-1609 · TURNSTILE/CARDS

Turnstile Cards

Cards mounted on the glass wings of a turnstile seen from slightly above, in real CSS perspective: the wing facing you is square to the eye while the others recede behind the post and swing round in front, each shaded by its angle, a sheen sliding across its glass and its shadow turning on the floor. A push follows the hand along the arc it grabbed, and on release a fixed-step integrator carries it — inertia, friction and a soft cam detent at every wing with a damper that bites only when slow — so a gentle push settles on the next wing and a hard one spins through several before one is caught square; the landing is predicted at release and reported from the gesture. Arrow keys turn one wing on springs.snap, a click on another wing brings it round on springs.glide, and Home and End go to the first and last card.

KQ-1609 · TURNSTILE/CARDS

Fieldline Stays

Pick a room for the weekend

North Quay

Harbour room · sleeps 2

North Quay · 1 of 6 · push the wings round

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/turnstile-cards

Props

items: TurnstileCard[]; default defaultTurnstileCards; The cards: { src?, alt, caption?, detail?, art? }; any number ride on any number of wings.
value / defaultValue: number; default 0; The card facing you; controlled or initial.
onValueChange: (index: number) => void; default —; Fires from the push, click or key that chose the next card, with the card it will settle on.
wings: number; default 4; How many glass wings the turnstile has, 3 to 6.
friction: number; default 0.45; How quickly a push dies away, 0 (coasts long) to 1 (stops short).
glass: number; default 0.55; How clear the glass is, 0 (frosted) to 1 (clear: the wings behind show through).
detent: number; default 0.5; How firmly each wing is pulled square at its detent, 0 to 1.
tilt: number; default 12; How far above the eye looks down, 0 to 24 degrees.
perspective: number; default 1800; Distance of the eye from the turnstile, px.
height: number; default 440; Height of the stage, px.
floor: boolean; default true; The floor plate, its turning ring of ticks and the wings' base shadows.
sheen: boolean; default true; A reflection that slides across the glass as each wing turns.
label: string; default "Cards"; The turnstile's accessible name.
disabled: boolean; default false; No pushes, clicks or keys; the turnstile dims.
className: string; default —; Classes for the root region.

Prop	Type	Default	Description
items	TurnstileCard[]	defaultTurnstileCards	The cards: { src?, alt, caption?, detail?, art? }; any number ride on any number of wings.
value / defaultValue	number	0	The card facing you; controlled or initial.
onValueChange	(index: number) => void	—	Fires from the push, click or key that chose the next card, with the card it will settle on.
wings	number	4	How many glass wings the turnstile has, 3 to 6.
friction	number	0.45	How quickly a push dies away, 0 (coasts long) to 1 (stops short).
glass	number	0.55	How clear the glass is, 0 (frosted) to 1 (clear: the wings behind show through).
detent	number	0.5	How firmly each wing is pulled square at its detent, 0 to 1.
tilt	number	12	How far above the eye looks down, 0 to 24 degrees.
perspective	number	1800	Distance of the eye from the turnstile, px.
height	number	440	Height of the stage, px.
floor	boolean	true	The floor plate, its turning ring of ticks and the wings' base shadows.
sheen	boolean	true	A reflection that slides across the glass as each wing turns.
label	string	"Cards"	The turnstile's accessible name.
disabled	boolean	false	No pushes, clicks or keys; the turnstile dims.
className	string	—	Classes for the root region.