KQ-1438 · SCAN/BED

Scan Bed

A background that is a scanner bed seen at a low angle: a dark surface ruled with a perspective grid and an object lying on it — a pebble, wind ridges or a crater — sampled as a point cloud you cannot see until it is read. A sheet of light sweeps across the bed line by line; every point it meets flares white-hot, cools and fades over the afterglow, so the read line bows up over every rise and the relief hangs behind it for a moment. The pointer tilts the bed on the springs.glide constants and a press restarts the pass from that row with a flare on the springs.flick constants; keyboard focus on a control inside does the same from that control.

KQ-1438 · SCAN/BED

Gaugeworks Scan

Measured to a tenth of a millimetre

reading · stone · beam 1×

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/scan-bed

Props

children: React.ReactNode; default —; The content on top of the bed: a hero line, a heading, a call to action.
speed: number; default 1; How fast the beam reads, 0.1 to 3: a pass takes 3.6 s at 1.
density: number; default 0.6; How closely the surface is sampled, 0 to 1: about 700 to 3,200 points.
glow: number; default 0.6; How brightly the beam blooms and the read points burn, 0 to 1.
subject: "stone" | "dunes" | "crater"; default "stone"; What lies on the bed: a faceted pebble, wind ridges, or a ring-walled crater.
afterglow: number; default 1400; How long a read point lingers after the beam has passed, ms.
tilt: number; default 14; How far the pointer tilts the bed, in degrees.
grid: boolean; default true; Draw the bed's perspective grid.
beamColor: string; default an accent-bright pigment; The beam's colour.
pointColor: string; default a softer accent pigment; The colour read points cool to.
bedColor: string; default the page mixed toward black with a breath of accent; The bed itself, kept dark in either theme.
interactive: boolean; default true; The pointer and keyboard focus tilt the bed, and a press restarts the pass from there.
paused: boolean; default false; Hold the beam and the afterglow where they are; the tilt still answers.
seed: number; default 1; Seeds the subject's shape and the sampling jitter.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onPass: (passes: number) => void; default —; Fires with the number of completed passes: 0 when the beam starts, then after every pass.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) tilting the bed.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content on top of the bed: a hero line, a heading, a call to action.
speed	number	1	How fast the beam reads, 0.1 to 3: a pass takes 3.6 s at 1.
density	number	0.6	How closely the surface is sampled, 0 to 1: about 700 to 3,200 points.
glow	number	0.6	How brightly the beam blooms and the read points burn, 0 to 1.
subject	"stone" \| "dunes" \| "crater"	"stone"	What lies on the bed: a faceted pebble, wind ridges, or a ring-walled crater.
afterglow	number	1400	How long a read point lingers after the beam has passed, ms.
tilt	number	14	How far the pointer tilts the bed, in degrees.
grid	boolean	true	Draw the bed's perspective grid.
beamColor	string	an accent-bright pigment	The beam's colour.
pointColor	string	a softer accent pigment	The colour read points cool to.
bedColor	string	the page mixed toward black with a breath of accent	The bed itself, kept dark in either theme.
interactive	boolean	true	The pointer and keyboard focus tilt the bed, and a press restarts the pass from there.
paused	boolean	false	Hold the beam and the afterglow where they are; the tilt still answers.
seed	number	1	Seeds the subject's shape and the sampling jitter.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onPass	(passes: number) => void	—	Fires with the number of completed passes: 0 when the beam starts, then after every pass.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) tilting the bed.
className	string	"h-full w-full"	Sizes and shapes the box.