KQ-1487 · TURNOVER/CARD

Turnover Card

A two-sided card you turn over by hand: dragged, it rotates about its axis 1:1 with the finger in perspective, lifting toward you while its shadow spreads, the half turning away darkening and a band of light sweeping across. On release the throw is projected — past halfway it completes the flip, otherwise it springs back — on a spring of the given stiffness that takes the release velocity and lands with a wobble, and a hard flick can carry it all the way round. It is a toggle button: Space or Enter flips it and the arrow keys flip it in their direction.

KQ-1487 · TURNOVER/CARD

Fernworks

Member

Mara Ellis

Grove tier · since 2021

front · drag, or press space, to flip

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/turnover-card

Props

front: ReactNode; default —; The face that shows first. Keep it free of controls: the card itself is the button.
back: ReactNode; default —; The face on the other side.
label: string; default "Flip card"; The card's accessible name; the visible face describes it.
flipped / defaultFlipped: boolean; default — / false; Whether the back is showing. A host change turns the card the short way round.
onFlippedChange: (flipped: boolean) => void; default —; Fires from the drag, press or key that turned it over, with the side now showing.
axis: "y" | "x"; default "y"; Turn about the vertical axis (drag sideways) or the horizontal one (drag up and down); touch-action follows.
stiffness: number; default 360; The flip spring's stiffness: a lazy turn to a snap.
depth: number; default 0.5; How deep the perspective is (2400px to 900px), and how far the card lifts and its shadow spreads mid-turn, 0 to 1.
wobble: number; default 0.5; How much the card wobbles about its face when a flip lands, 0 to 1 (damping ratio 0.9 to 0.55).
threshold: number; default 0.5; Share of a half turn past which a release commits the flip; the throw is projected first.
shading: number; default 0.5; How strongly the turning face darkens on its receding half and catches the sweeping light, 0 to 1.
tilt: boolean; default true; A mouse over the card tilts it a few degrees toward the pointer on springs.glide.
radius: number; default 16; Corner radius of the card, px.
size: "sm" | "md" | "lg"; default "md"; The box's max width (260, 300 or 340px); the card is 86% of it at 8:5, the rest is room for the lift.
sound: boolean; default false; Play a swish on every committed turn, pitched by the flip's speed and panned by where the card is.
disabled: boolean; default false; Holds the card still and takes it out of the tab order.
className: string; default —; Classes for the root box.

Prop	Type	Default	Description
front	ReactNode	—	The face that shows first. Keep it free of controls: the card itself is the button.
back	ReactNode	—	The face on the other side.
label	string	"Flip card"	The card's accessible name; the visible face describes it.
flipped / defaultFlipped	boolean	— / false	Whether the back is showing. A host change turns the card the short way round.
onFlippedChange	(flipped: boolean) => void	—	Fires from the drag, press or key that turned it over, with the side now showing.
axis	"y" \| "x"	"y"	Turn about the vertical axis (drag sideways) or the horizontal one (drag up and down); touch-action follows.
stiffness	number	360	The flip spring's stiffness: a lazy turn to a snap.
depth	number	0.5	How deep the perspective is (2400px to 900px), and how far the card lifts and its shadow spreads mid-turn, 0 to 1.
wobble	number	0.5	How much the card wobbles about its face when a flip lands, 0 to 1 (damping ratio 0.9 to 0.55).
threshold	number	0.5	Share of a half turn past which a release commits the flip; the throw is projected first.
shading	number	0.5	How strongly the turning face darkens on its receding half and catches the sweeping light, 0 to 1.
tilt	boolean	true	A mouse over the card tilts it a few degrees toward the pointer on springs.glide.
radius	number	16	Corner radius of the card, px.
size	"sm" \| "md" \| "lg"	"md"	The box's max width (260, 300 or 340px); the card is 86% of it at 8:5, the rest is room for the lift.
sound	boolean	false	Play a swish on every committed turn, pitched by the flip's speed and panned by where the card is.
disabled	boolean	false	Holds the card still and takes it out of the tab order.
className	string	—	Classes for the root box.