KQ-1522 · FACET/LASER

Facet Laser

A single laser enters a cut crystal in a smoky room and leaves as a crown of hairline beams, each a seeded direction traced to the wall it strikes in a room seen in one-point perspective with the frame as its front opening. Turning the crystal sweeps every beam at once and each hit point engraves a line on the walls that cools from white-hot through the laser's colour to ember and fades, so a turn leaves a drawing behind; a sideways drag turns it 1:1, a throw coasts on its velocity and settles on the nearest facet on springs.snap, and untouched it drifts round slowly. It is a slider: arrow keys turn it one facet at a time on the snap spring, Page Up and Page Down three facets, Home brings it back.

KQ-1522 · FACET/LASER

facet 1 of 8 · 0° · 9 beams

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/facet-laser

Props

beamCount: number; default 9; How many hairline beams leave the crystal, 3 to 24.
haze: number; default 0.5; How smoky the room is, 0 (clear: only the hits show) to 1 (the beams hang in the air).
cooling: number; default 0.5; How fast an engraving cools from white through the laser's colour to ember and fades, 0 (slow) to 1 (fast).
color: string; default "var(--danger)"; The laser's colour, any CSS colour; taken at a fixed lightness per theme.
facets: number; default 8; The crystal's facets: how many detents a turn has, 5 to 12.
angle / defaultAngle: number; default 0; The crystal's angle in degrees: controlled, or where it starts when uncontrolled.
onAngleChange: (angle: number) => void; default —; Fires with the facet angle (0–359) a key, a drag or a throw settles on.
onTurningChange: (turning: boolean) => void; default —; Fires when a hand or a key starts turning the crystal (true) and when it has settled on a facet (false).
drift: number; default 6; How fast the crystal turns by itself while untouched, degrees a second, 0 to 30.
momentum: number; default 0.6; How long a thrown turn coasts before it settles on a facet, 0 to 1.
spread: number; default 0.6; How wide the crown of beams opens toward the walls, 0 (a tight cone) to 1 (wide).
interactive: boolean; default true; Dragging and the keys turn the crystal.
paused: boolean; default false; Hold the drift and the smoke still; the hand still turns it.
seed: number; default 1; Seeds the beams' directions, so two crystals cut differently.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Crystal"; The crystal's accessible name.
disabled: boolean; default false; The room is drawn and holds still; drag and keys are ignored.
className: string; default "h-full w-full"; Sizes the box.
children: React.ReactNode; default —; Content over the room, bottom left: a caption, a label.

Prop	Type	Default	Description
beamCount	number	9	How many hairline beams leave the crystal, 3 to 24.
haze	number	0.5	How smoky the room is, 0 (clear: only the hits show) to 1 (the beams hang in the air).
cooling	number	0.5	How fast an engraving cools from white through the laser's colour to ember and fades, 0 (slow) to 1 (fast).
color	string	"var(--danger)"	The laser's colour, any CSS colour; taken at a fixed lightness per theme.
facets	number	8	The crystal's facets: how many detents a turn has, 5 to 12.
angle / defaultAngle	number	0	The crystal's angle in degrees: controlled, or where it starts when uncontrolled.
onAngleChange	(angle: number) => void	—	Fires with the facet angle (0–359) a key, a drag or a throw settles on.
onTurningChange	(turning: boolean) => void	—	Fires when a hand or a key starts turning the crystal (true) and when it has settled on a facet (false).
drift	number	6	How fast the crystal turns by itself while untouched, degrees a second, 0 to 30.
momentum	number	0.6	How long a thrown turn coasts before it settles on a facet, 0 to 1.
spread	number	0.6	How wide the crown of beams opens toward the walls, 0 (a tight cone) to 1 (wide).
interactive	boolean	true	Dragging and the keys turn the crystal.
paused	boolean	false	Hold the drift and the smoke still; the hand still turns it.
seed	number	1	Seeds the beams' directions, so two crystals cut differently.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Crystal"	The crystal's accessible name.
disabled	boolean	false	The room is drawn and holds still; drag and keys are ignored.
className	string	"h-full w-full"	Sizes the box.
children	React.ReactNode	—	Content over the room, bottom left: a caption, a label.