KQ-1523 · HEX/COFFERS

Hex Coffers

A vault of recessed hexagonal coffers seen from below in true perspective — each a convex well of ridge, six bevelled walls and a floor with a small boss, every pixel's view ray intersected with its well exactly — lit by a lamp you carry, with a soft inverse square and exact shadows: a point is lit only if its ray to the lamp leaves the well through its opening, so every lit wall and every shadow swings together as the lamp moves, like the sun crossing a dome. The lamp follows the pointer on the glide constants and drifts on a slow figure of eight when no one carries it; a press lowers it into the vault on springs.glide so the nearest cells flare and the far ones fall dark. The keyboard's way in is a transparent button behind your content: arrow keys carry the lamp and Space or Enter held lowers it.

KQ-1523 · HEX/COFFERS

Coldbrook Library

Read under the dome

lamp drifting · a slow figure of eight

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/hex-coffers

Props

children: React.ReactNode; default —; The content under the vault: a hero line, a heading, a call to action.
cellSize: number; default 56; The width of one coffer, px, 24 to 96.
depth: number; default 0.5; How deep the coffers are recessed, 0 (shallow) to 1 (deep wells).
lampWarmth: number; default 0.6; The lamp's light, 0 (cool white) to 1 (warm amber).
lampHeight: number; default 0.5; How far the lamp hangs below the vault at rest, 0 (close) to 1 (far).
press: number; default 0.7; How far a press lowers the lamp into the vault, 0 (not at all) to 1 (almost touching).
bevel: number; default 0.45; The width of each coffer's sloped inner walls, 0 (steep) to 1 (wide bevels).
rim: number; default 0.14; The width of the flat ridge between coffers, 0 to 1.
boss: boolean; default true; A small round boss at the centre of each coffer.
intensity: number; default 1; How bright the lamp burns, 0 to 1.5.
drift: number; default 0.5; How fast the lamp drifts on its figure of eight when no one carries it, 0 (still) to 1.
interactive: boolean; default true; The pointer carries the lamp and a press lowers it; the keys do the same.
pointerStrength: number; default 1; How closely the lamp follows the hand, 0 (it stays on its drift) to 1 (under the pointer).
paused: boolean; default false; Hold the figure of eight still; the hand still carries the lamp.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Coffered ceiling"; The vault's accessible name, for the keyboard's way in.
onPressChange: (pressed: boolean) => void; default —; The lamp was lowered (true) or lifted (false), by the pointer or the keys that did it.
onCarryChange: (carried: boolean) => void; default —; A hand took the lamp (true: the pointer over the vault, or the keys) or gave it back to its drift (false).
disabled: boolean; default false; The vault is lit and still; the hand is ignored.
className: string; default "h-full w-full"; Sizes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content under the vault: a hero line, a heading, a call to action.
cellSize	number	56	The width of one coffer, px, 24 to 96.
depth	number	0.5	How deep the coffers are recessed, 0 (shallow) to 1 (deep wells).
lampWarmth	number	0.6	The lamp's light, 0 (cool white) to 1 (warm amber).
lampHeight	number	0.5	How far the lamp hangs below the vault at rest, 0 (close) to 1 (far).
press	number	0.7	How far a press lowers the lamp into the vault, 0 (not at all) to 1 (almost touching).
bevel	number	0.45	The width of each coffer's sloped inner walls, 0 (steep) to 1 (wide bevels).
rim	number	0.14	The width of the flat ridge between coffers, 0 to 1.
boss	boolean	true	A small round boss at the centre of each coffer.
intensity	number	1	How bright the lamp burns, 0 to 1.5.
drift	number	0.5	How fast the lamp drifts on its figure of eight when no one carries it, 0 (still) to 1.
interactive	boolean	true	The pointer carries the lamp and a press lowers it; the keys do the same.
pointerStrength	number	1	How closely the lamp follows the hand, 0 (it stays on its drift) to 1 (under the pointer).
paused	boolean	false	Hold the figure of eight still; the hand still carries the lamp.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Coffered ceiling"	The vault's accessible name, for the keyboard's way in.
onPressChange	(pressed: boolean) => void	—	The lamp was lowered (true) or lifted (false), by the pointer or the keys that did it.
onCarryChange	(carried: boolean) => void	—	A hand took the lamp (true: the pointer over the vault, or the keys) or gave it back to its drift (false).
disabled	boolean	false	The vault is lit and still; the hand is ignored.
className	string	"h-full w-full"	Sizes the box.