KQ-1414 · CUBE/FIELD

Cube Field

A floor of cubes in true isometric fills the box behind its children, each cube shaded per face from tokens so it reads lit from the upper left in either theme. Every cube is a spring with the springs.snap, springs.glide or springs.drift constants toward a height that peaks under the pointer and falls away over a raised-cosine bell on the floor plane, so a hill follows the hand and settles back when it leaves; a click knocks the floor and a real lattice wave — each cube coupled to its four neighbours, short wavelengths damped — carries a glowing ring outward until a sponge at the edges drinks it. Rendered as CSS 3D cubes, or as canvas polygons past 260 cubes; keyboard focus inside raises the floor under the focused control.

KQ-1414 · CUBE/FIELD

Gaugeworks · site survey

Build on solid ground.

floor at rest · move across it, click to send a wave

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

Props

children: ReactNode; default —; Content laid over the floor. It stays fully interactive; the cubes never take a click.
grid: number; default 48; A cube's edge on the floor, in px — the grid's pitch.
rise: number; default 36; How high the cubes under the pointer climb, in px.
falloff: number; default 3.5; How far the rise reaches, in cubes, fading to nothing along a raised-cosine bell.
base: number; default 6; Every cube's resting height, in px.
spring: "snap" | "glide" | "drift"; default "snap"; The calibrated spring the cubes rise and settle on.
wave: number; default 1; Strength of the wave a click sends through the floor, 0 to 2; 0 turns it off.
waveSpeed: number; default 1; How fast the wave travels, as a multiple of 14 cubes a second (0.5 to 2).
topColor: string; default "var(--card)"; The cubes' tops, any CSS colour.
sideColor: string; default "var(--card)"; The colour the sides are shaded from, toward black in oklab.
glowColor: string; default "var(--accent-bright)"; The colour a risen top glows toward.
glow: number; default 0.55; How strongly a fully risen top glows, 0 to 1.
shade: number; default 0.5; How dark the sides are, 0 to 1: the left face takes half of it, the right face all of it.
renderer: "auto" | "css" | "canvas"; default "auto"; CSS 3D cubes, canvas polygons, or CSS until the floor needs more than 260 cubes.
intro: boolean; default true; One gentle wave from the centre the first time it comes into view.
followFocus: boolean; default true; Keyboard focus inside raises the floor under the focused control.
interactive: boolean; default true; The pointer raises the floor (mouse and pen); a click or a tap sends a wave.
paused: boolean; default false; Holds every cube where it is.
dpr: number; default 2; The highest device pixel ratio the canvas renderer draws at (never above 2).
onWave: () => void; default —; Fires when a visitor sends a wave with a click or a tap.
className: string; default —; Classes for the box. Give it a height; children are laid out inside it.

Prop	Type	Default	Description
children	ReactNode	—	Content laid over the floor. It stays fully interactive; the cubes never take a click.
grid	number	48	A cube's edge on the floor, in px — the grid's pitch.
rise	number	36	How high the cubes under the pointer climb, in px.
falloff	number	3.5	How far the rise reaches, in cubes, fading to nothing along a raised-cosine bell.
base	number	6	Every cube's resting height, in px.
spring	"snap" \| "glide" \| "drift"	"snap"	The calibrated spring the cubes rise and settle on.
wave	number	1	Strength of the wave a click sends through the floor, 0 to 2; 0 turns it off.
waveSpeed	number	1	How fast the wave travels, as a multiple of 14 cubes a second (0.5 to 2).
topColor	string	"var(--card)"	The cubes' tops, any CSS colour.
sideColor	string	"var(--card)"	The colour the sides are shaded from, toward black in oklab.
glowColor	string	"var(--accent-bright)"	The colour a risen top glows toward.
glow	number	0.55	How strongly a fully risen top glows, 0 to 1.
shade	number	0.5	How dark the sides are, 0 to 1: the left face takes half of it, the right face all of it.
renderer	"auto" \| "css" \| "canvas"	"auto"	CSS 3D cubes, canvas polygons, or CSS until the floor needs more than 260 cubes.
intro	boolean	true	One gentle wave from the centre the first time it comes into view.
followFocus	boolean	true	Keyboard focus inside raises the floor under the focused control.
interactive	boolean	true	The pointer raises the floor (mouse and pen); a click or a tap sends a wave.
paused	boolean	false	Holds every cube where it is.
dpr	number	2	The highest device pixel ratio the canvas renderer draws at (never above 2).
onWave	() => void	—	Fires when a visitor sends a wave with a click or a tap.
className	string	—	Classes for the box. Give it a height; children are laid out inside it.