KQ-1405 · LASER/SHEET

Laser Sheet

A volumetric laser sheet in a hazy room, drawn per pixel in one WebGL2 pass behind your content: an emitter near the top fans a thin sheet of light down through drifting haze, the haze glows in proportion to the path each view ray travels inside the sheet (faint and textured while it faces you, a bright blade as it turns edge-on), dust glints only as it crosses the plane, and the sheet meets the floor in a crisp bright line with a spill of light around it. It sweeps back and forth on its own; the pointer steers it instead, the angle trailing on a damped spring blended between springs.glide and springs.drift by `lag`, and a press fires a pulse down the sheet that flares the line where it lands. Keyboard focus aims the sheet at the focused control and Enter or Space on it fires.

KQ-1405 · LASER/SHEET

Basinworks Survey

Every contour, measured by light.

One sheet of light, swept across the basin floor each night.

sweeping · the sheet swings across the floor

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

Props

haze: number; default 0.55; How thick the air is, 0 to 1: from clear air where only the floor line shows to a dense, glowing fan.
sweep: number; default 0.35; How fast the sheet sweeps on its own, from holding still at 0 to a pass every couple of seconds at 1.
color: "cobalt" | "signal" | "ember" | "rose" | string; default "cobalt"; The beam's colour: a named tone or any CSS colour, resolved on the element so it follows the theme.
spread: number; default 32; Half the fan's opening, in degrees.
range: number; default 50; How far the sheet swings either way, in degrees.
lag: number; default 0.5; How far the beam trails the pointer, from springs.glide at 0 to springs.drift at 1.
dust: number; default 0.5; How much dust glints in the sheet, 0 to 1.
glow: number; default 0.7; How bright the floor line and its spill are, 0 to 1.
grid: boolean; default true; Draw a faint perspective grid on the floor.
source: [number, number]; default [0.5, 0.08]; Where the emitter hangs, as x and y fractions of the box (y up to 0.5).
interactive: boolean; default true; Steer with the pointer and keyboard focus; a press fires a pulse down the sheet.
paused: boolean; default false; Freeze the beam where it is.
seed: number; default 3; Seed for the haze and the dust.
dpr: number; default 2; The highest device pixel ratio the canvas draws at (never above 2).
onFire: () => void; default —; Fires when a press or a keyboard activation fires a pulse.
className: string; default —; Classes for the box; size it and give it its background here.
children: React.ReactNode; default —; Content laid over the scene; it keeps every click, focus and key.

Prop	Type	Default	Description
haze	number	0.55	How thick the air is, 0 to 1: from clear air where only the floor line shows to a dense, glowing fan.
sweep	number	0.35	How fast the sheet sweeps on its own, from holding still at 0 to a pass every couple of seconds at 1.
color	"cobalt" \| "signal" \| "ember" \| "rose" \| string	"cobalt"	The beam's colour: a named tone or any CSS colour, resolved on the element so it follows the theme.
spread	number	32	Half the fan's opening, in degrees.
range	number	50	How far the sheet swings either way, in degrees.
lag	number	0.5	How far the beam trails the pointer, from springs.glide at 0 to springs.drift at 1.
dust	number	0.5	How much dust glints in the sheet, 0 to 1.
glow	number	0.7	How bright the floor line and its spill are, 0 to 1.
grid	boolean	true	Draw a faint perspective grid on the floor.
source	[number, number]	[0.5, 0.08]	Where the emitter hangs, as x and y fractions of the box (y up to 0.5).
interactive	boolean	true	Steer with the pointer and keyboard focus; a press fires a pulse down the sheet.
paused	boolean	false	Freeze the beam where it is.
seed	number	3	Seed for the haze and the dust.
dpr	number	2	The highest device pixel ratio the canvas draws at (never above 2).
onFire	() => void	—	Fires when a press or a keyboard activation fires a pulse.
className	string	—	Classes for the box; size it and give it its background here.
children	React.ReactNode	—	Content laid over the scene; it keeps every click, focus and key.