KQ-825 · VARIATION/GRID

Variation Grid

Four generated takes that reveal together and let you keep one. The veils lift on one slow tween because the takes are one delivery; picking lifts the chosen tile on snap with the raised shadow while the other three fold away on the exit ease and the hero glides to span the grid on glide, and Pick another unfolds them back. The tiles are a radiogroup with a roving tabindex: arrows step and jump rows, Home and End reach the corners, Space or Enter picks, Escape unfolds.

KQ-825 · VARIATION/GRID

Cover takes from Fernworks Model 3

Not rendered

Idle · press generate

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/variation-grid

Props

variations: [Variation, Variation, Variation, Variation]; default —; Exactly four takes: an id, a seed for the procedural picture and a short label.
revealed: boolean; default false; The four pictures are ready and lift their veils together.
generating: boolean; default false; The render is in flight: the shimmer sweeps and aria-busy is set.
value / defaultValue: string | null; default null; Controlled or initial pick by variation id; null while nothing is chosen.
onValueChange: (id: string | null) => void; default —; Fires from the click or key that picked, or from Pick another and Escape.
label: string; default —; Names the grid and its radiogroup for assistive technology.
pickAnotherLabel: string; default "Pick another"; Copy on the unfold control.

Prop	Type	Default	Description
variations	[Variation, Variation, Variation, Variation]	—	Exactly four takes: an id, a seed for the procedural picture and a short label.
revealed	boolean	false	The four pictures are ready and lift their veils together.
generating	boolean	false	The render is in flight: the shimmer sweeps and aria-busy is set.
value / defaultValue	string \| null	null	Controlled or initial pick by variation id; null while nothing is chosen.
onValueChange	(id: string \| null) => void	—	Fires from the click or key that picked, or from Pick another and Escape.
label	string	—	Names the grid and its radiogroup for assistive technology.
pickAnotherLabel	string	"Pick another"	Copy on the unfold control.