KQ-1831 · VANTAGE/CUBE

Vantage Cube

A wireframe cube of loose letters floating at different depths that turns to follow the pointer on a spring set by `lag`: from most angles it is a scatter, but at each word's vantage its letters line up in perspective, one size on one baseline. Near a vantage the cube is drawn toward it and inside `snap` degrees it locks on springs.snap — the word brightens, a rule draws under it and a glint sweeps across it — and leaving the box drifts it home on springs.drift to lock again. It is a slider over the words: arrow keys turn the cube to the next or previous word on springs.glide, Home and End jump.

KQ-1831 · VANTAGE/CUBE

Fieldline

Field notes, from the right angle

locked · field · word 1 of 4 · 0 locks

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/vantage-cube

Props

words: VantageCubeWord[]; default FIELD, LINE, DRIFT, NORTH; The words hidden in the cube, each with the yaw and pitch (degrees) it reads from.
value / defaultValue: number; default 0; The word the cube shows, by index (controlled / initial).
onValueChange: (index: number) => void; default —; Fires when a different word locks, from the pointer, a drag or a key.
density: number; default 0.5; How many loose letters fill the cube besides the words, 0 to 1.
depth: number; default 0.6; How far the letters are spread in depth, 0 (nearly flat) to 1 (the whole cube).
lag: number; default 0.45; How lazily the cube follows the pointer, 0 (at once) to 1 (slow and heavy).
snap: number; default 7; How close to a vantage, in degrees, the cube snaps to it and locks.
range: number; default 50; How far the cube turns toward the pointer at the box's edge, in degrees.
perspective: number; default 3.2; Viewing distance in cube widths; lower is a stronger wide-angle look.
glint: boolean; default true; Sweep a glint across a word when it locks.
edges: boolean; default true; Draw the cube's edges.
seed: number; default 3; Seeds where the letters float.
onLock: (index: number) => void; default —; Fires each time a word locks, including a return to the same word.
label: string; default "Word cube"; The cube's accessible name.
disabled: boolean; default false; No following, dragging or keys.
className: string; default —; Sizes the cube's box; give it a height. Defaults to h-52 w-full.

Prop	Type	Default	Description
words	VantageCubeWord[]	FIELD, LINE, DRIFT, NORTH	The words hidden in the cube, each with the yaw and pitch (degrees) it reads from.
value / defaultValue	number	0	The word the cube shows, by index (controlled / initial).
onValueChange	(index: number) => void	—	Fires when a different word locks, from the pointer, a drag or a key.
density	number	0.5	How many loose letters fill the cube besides the words, 0 to 1.
depth	number	0.6	How far the letters are spread in depth, 0 (nearly flat) to 1 (the whole cube).
lag	number	0.45	How lazily the cube follows the pointer, 0 (at once) to 1 (slow and heavy).
snap	number	7	How close to a vantage, in degrees, the cube snaps to it and locks.
range	number	50	How far the cube turns toward the pointer at the box's edge, in degrees.
perspective	number	3.2	Viewing distance in cube widths; lower is a stronger wide-angle look.
glint	boolean	true	Sweep a glint across a word when it locks.
edges	boolean	true	Draw the cube's edges.
seed	number	3	Seeds where the letters float.
onLock	(index: number) => void	—	Fires each time a word locks, including a return to the same word.
label	string	"Word cube"	The cube's accessible name.
disabled	boolean	false	No following, dragging or keys.
className	string	—	Sizes the cube's box; give it a height. Defaults to h-52 w-full.