KQ-1558 · FORMATION/FLIGHT

Formation Flight

A flock of photo cards in CSS 3D holding a named formation — a tipped ring, a two-turn spiral, a globe or a grid — and turning slowly while it waits. Choosing a formation sends every card on its own cubic path through a curve the whole flock shares, departures from the flock's leading edge and arrivals packed tighter, so the flock stretches into a stream and tightens into the new shape; each card's roll comes from its real sideways acceleration on the path, so it banks into the turn and levels out as it lands. Hover a card and it comes forward on the snap spring. The picker is a radiogroup whose arrow keys cycle formations, and the flock is a listbox: arrows move between cards and bring each forward, Enter chooses one.

KQ-1558 · FORMATION/FLIGHT

Season four, field frames

Gaugeworks archive

ring · 24 frames · hover a frame to bring it forward

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/formation-flight

Props

items: { src?, alt, caption? }[]; default twenty-four photographs drawn in code; The cards in the flock.
formation / defaultFormation: "ring" | "spiral" | "globe" | "grid"; default "ring"; The formation the flock holds, controlled or initial.
onFormationChange: (formation: FormationName) => void; default —; Fires from the picker or the keys that asked for a new formation.
formations: FormationName[]; default ["ring", "spiral", "globe", "grid"]; Which formations the picker offers, in order.
cohesion: number; default 0.6; How tightly the flock holds together in flight, 0 (a loose stream) to 1 (one body).
bank: number; default 0.6; How hard cards roll into their turns, 0 (flat) to 1.
spin: number; default 6; Idle turn of the ring, spiral and globe, degrees a second; 0 holds them still.
cardSize: number; default 1; Card size, 0.6 to 1.6.
flightTime: number; default 1400; A flight's length at default cohesion, ms.
showPicker: boolean; default true; Show the formation picker.
onSelect: (index: number) => void; default —; A card was chosen with a click or Enter.
label: string; default "Photo flock"; The flock's accessible name.
paused: boolean; default false; Hold the idle turn; a flight still flies.
disabled: boolean; default false; The picker and the cards take no input.
className: string; default —; Give it a height; the flock scales with the smaller side.

Prop	Type	Default	Description
items	{ src?, alt, caption? }[]	twenty-four photographs drawn in code	The cards in the flock.
formation / defaultFormation	"ring" \| "spiral" \| "globe" \| "grid"	"ring"	The formation the flock holds, controlled or initial.
onFormationChange	(formation: FormationName) => void	—	Fires from the picker or the keys that asked for a new formation.
formations	FormationName[]	["ring", "spiral", "globe", "grid"]	Which formations the picker offers, in order.
cohesion	number	0.6	How tightly the flock holds together in flight, 0 (a loose stream) to 1 (one body).
bank	number	0.6	How hard cards roll into their turns, 0 (flat) to 1.
spin	number	6	Idle turn of the ring, spiral and globe, degrees a second; 0 holds them still.
cardSize	number	1	Card size, 0.6 to 1.6.
flightTime	number	1400	A flight's length at default cohesion, ms.
showPicker	boolean	true	Show the formation picker.
onSelect	(index: number) => void	—	A card was chosen with a click or Enter.
label	string	"Photo flock"	The flock's accessible name.
paused	boolean	false	Hold the idle turn; a flight still flies.
disabled	boolean	false	The picker and the cards take no input.
className	string	—	Give it a height; the flock scales with the smaller side.