KQ-1481 · SHAPE/LATTICE

Shape Lattice

A background lattice of small plates — squares, crosses or arrows — that turn in 3D to face the hand, with your content on top: plates under the hand look straight up at full size and those further off tip toward it, foreshortened down to slivers, so the lattice draws rings around whatever it is looking at. The turning travels — each plate faces where the hand was distance / waveSpeed seconds ago and arrives on its own spring with glide's stiffness softened by distance — while the hand's place follows on springs.glide and its presence on springs.drift. A press sends a ring of plates tumbling over in a full flip; with no hand near, a slow light wanders the lattice and the plates track it, and keyboard focus on a control inside brings the hand there with a softer ring.

KQ-1481 · SHAPE/LATTICE

Gaugeworks

Instruments that turn toward you

Field kit · 12 sensors

following the light · move in

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/shape-lattice

Props

children: React.ReactNode; default —; The content on top of the lattice: a hero line, a heading, a call to action.
shape: "square" | "cross" | "arrow"; default "square"; The plate every cell holds.
spacing: number; default 26; Distance between plate centres, px (12 to 64).
color: "ink" | "accent" | "signal" | "ember" | string; default "ink"; The plates' colour: a named token colour or any CSS colour.
size: number; default 0.56; A plate's size as a share of the spacing (0.2 to 0.95).
reach: number; default 150; How high the hand hovers over the lattice, px: lower turns far plates further onto their edges.
waveSpeed: number; default 420; How fast the turning travels out from the hand, px/s.
damping: number; default 0.5; How the plates arrive, 0 (wobbly) to 1 (no overshoot).
light: number; default 0.6; How much the plates catch the light as they turn, 0 (flat) to 1.
wander: boolean; default true; With no hand near, a slow light wanders the lattice and the plates track it.
flip: boolean; default true; A press on the lattice (or keyboard focus arriving inside) sends a ring of plates tumbling over.
interactive: boolean; default true; The pointer and keyboard focus are what the plates turn to face.
paused: boolean; default false; Hold the wandering light still; the hand still turns the plates.
seed: number; default 1; Seeds the wandering light's path.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) turning the plates.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content on top of the lattice: a hero line, a heading, a call to action.
shape	"square" \| "cross" \| "arrow"	"square"	The plate every cell holds.
spacing	number	26	Distance between plate centres, px (12 to 64).
color	"ink" \| "accent" \| "signal" \| "ember" \| string	"ink"	The plates' colour: a named token colour or any CSS colour.
size	number	0.56	A plate's size as a share of the spacing (0.2 to 0.95).
reach	number	150	How high the hand hovers over the lattice, px: lower turns far plates further onto their edges.
waveSpeed	number	420	How fast the turning travels out from the hand, px/s.
damping	number	0.5	How the plates arrive, 0 (wobbly) to 1 (no overshoot).
light	number	0.6	How much the plates catch the light as they turn, 0 (flat) to 1.
wander	boolean	true	With no hand near, a slow light wanders the lattice and the plates track it.
flip	boolean	true	A press on the lattice (or keyboard focus arriving inside) sends a ring of plates tumbling over.
interactive	boolean	true	The pointer and keyboard focus are what the plates turn to face.
paused	boolean	false	Hold the wandering light still; the hand still turns the plates.
seed	number	1	Seeds the wandering light's path.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) turning the plates.
className	string	"h-full w-full"	Sizes and shapes the box.