KQ-1458 · DUST/MOTES

Dust Motes

A background of dust hanging in still air, seen through a lens, with a beam of light crossing the room and the content on top: seeded flakes wander on slow currents, rise a little in the warm light and flash as they turn to it, while a thin-lens depth of field opens near and far motes into soft bokeh discs and keeps those at the focal plane crisp. The pointer leans the camera on springs.drift, so near motes slide further than far ones, and a press racks focus to the mote under the hand, the focal plane travelling to its depth on springs.glide while a thin focus mark closes on it on springs.snap. It is decoration and never takes focus; keyboard focus landing on a control inside racks focus to the mote nearest it.

KQ-1458 · DUST/MOTES

Waylight Archive

Rooms full of afternoon

The reading room is open late on Thursdays

focus 0.45 · 220 motes · drifting

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/dust-motes

Props

children: React.ReactNode; default —; The content on top of the room: a hero line, a heading, a call to action.
count: number; default 220; How many motes hang in a 760 × 208 box, 40 to 600; smaller boxes hold fewer.
focus: number; default 0.45; Where the lens is focused, 0 (nearest motes) to 1 (farthest).
drift: number; default 0.6; How much the air moves, 0 (still) to 2.
aperture: number; default 0.6; How shallow the depth of field is, 0 (everything sharp) to 1 (very soft near and far).
beam: number; default 0.7; How strong the beam of light is, 0 (an evenly lit room) to 1.
beamAngle: number; default 24; The beam's lean from vertical, degrees, −60 to 60.
glint: number; default 0.6; How brightly motes flash as they turn to the light, 0 (never) to 1.
moteSize: number; default 1.6; A mote's size at the focal plane, px.
light: string; default —; The light's colour, any CSS colour. Defaults to a warm pigment from the warn token.
focusMark: boolean; default true; Show a thin focus mark that closes on the mote a press racks to.
interactive: boolean; default true; The pointer and keyboard focus lean the camera, and a press racks focus.
pointerStrength: number; default 0.6; How far the hand leans the camera, 0 to 1.
paused: boolean; default false; Hold the air still; the hand still leans and racks.
seed: number; default 1; Seeds the motes, so two rooms never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onFocusPull: (depth: number | null) => void; default —; Fires when a press or keyboard focus racks focus, with the new depth from 0 (near) to 1 (far), and with null when the lens lets go and drifts back to `focus`.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) leaning the camera.
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 room: a hero line, a heading, a call to action.
count	number	220	How many motes hang in a 760 × 208 box, 40 to 600; smaller boxes hold fewer.
focus	number	0.45	Where the lens is focused, 0 (nearest motes) to 1 (farthest).
drift	number	0.6	How much the air moves, 0 (still) to 2.
aperture	number	0.6	How shallow the depth of field is, 0 (everything sharp) to 1 (very soft near and far).
beam	number	0.7	How strong the beam of light is, 0 (an evenly lit room) to 1.
beamAngle	number	24	The beam's lean from vertical, degrees, −60 to 60.
glint	number	0.6	How brightly motes flash as they turn to the light, 0 (never) to 1.
moteSize	number	1.6	A mote's size at the focal plane, px.
light	string	—	The light's colour, any CSS colour. Defaults to a warm pigment from the warn token.
focusMark	boolean	true	Show a thin focus mark that closes on the mote a press racks to.
interactive	boolean	true	The pointer and keyboard focus lean the camera, and a press racks focus.
pointerStrength	number	0.6	How far the hand leans the camera, 0 to 1.
paused	boolean	false	Hold the air still; the hand still leans and racks.
seed	number	1	Seeds the motes, so two rooms never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onFocusPull	(depth: number \| null) => void	—	Fires when a press or keyboard focus racks focus, with the new depth from 0 (near) to 1 (far), and with null when the lens lets go and drifts back to `focus`.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) leaning the camera.
className	string	"h-full w-full"	Sizes and shapes the box.