KQ-1855 · MARSH/LIGHT

Marsh Light

A pale light over a night marsh, keeping just out of reach: a small orb drifts above dark water wrapped in slow curls of smoke that are wound round it, lit by it and left trailing when it moves, while the water carries its long broken reflection under reeds and a low mist. Reach toward it and it slips away to the side with more room on a critically damped spring, harder the closer you come; stop, and it waits at a polite distance. Corner it against the frame and it goes out and blooms back in elsewhere, its halo swelling once on the snap spring; keyboard focus on anything in your content calls it over, and with the scene focused the arrow keys move a hand it shies from.

KQ-1855 · MARSH/LIGHT

Waylight · Night walks

Lantern walks on Fen Lane

wandering · reach for it

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/marsh-light

Props

children: React.ReactNode; default —; Content above the marsh; it stays fully interactive, wears the dark tokens, and keyboard focus inside it calls the light over.
shyness: number; default 0.5; Its polite distance and how briskly it slips away, 0 (70 px, unhurried) to 1 (200 px, quick).
smoke: number; default 0.6; How thick the smoke curls around it are, 0 (clear air) to 1.
hue: number; default 150; The light's hue in degrees: 150 a pale marsh green, 200 cold blue, 60 a candle's gold.
size: number; default 7; The bright core's radius, px.
glow: number; default 0.7; Halo size and brightness, 0 to 1.
drift: number; default 0.4; How far and how fast it wanders when left alone, 0 to 1.
waterLine: number; default 0.68; Where the water begins, as a fraction of the height.
reeds: boolean; default true; Reeds and bulrushes along the water's edge.
summonOnFocus: boolean; default true; Keyboard focus inside the content calls the light to the focused element.
interactive: boolean; default true; The pointer, and the arrow keys when the scene has focus, move it; off, it only wanders.
onVanish: () => void; default —; Fires when it is cornered and reappears somewhere else.
onStateChange: (state: "wandering" | "shy" | "waiting" | "gone" | "summoned") => void; default —; Fires when what it is doing changes.
paused: boolean; default false; Hold the scene still.
seed: number; default 5; Seeds its wandering and the reeds.
label: string; default "Marsh light"; Accessible name.
dpr: number; default 2; Cap on the canvas's pixel ratio, at most 2 (the soft scene never draws above 1.25).
className: string; default "h-52 w-full"; Sizes the scene.

Prop	Type	Default	Description
children	React.ReactNode	—	Content above the marsh; it stays fully interactive, wears the dark tokens, and keyboard focus inside it calls the light over.
shyness	number	0.5	Its polite distance and how briskly it slips away, 0 (70 px, unhurried) to 1 (200 px, quick).
smoke	number	0.6	How thick the smoke curls around it are, 0 (clear air) to 1.
hue	number	150	The light's hue in degrees: 150 a pale marsh green, 200 cold blue, 60 a candle's gold.
size	number	7	The bright core's radius, px.
glow	number	0.7	Halo size and brightness, 0 to 1.
drift	number	0.4	How far and how fast it wanders when left alone, 0 to 1.
waterLine	number	0.68	Where the water begins, as a fraction of the height.
reeds	boolean	true	Reeds and bulrushes along the water's edge.
summonOnFocus	boolean	true	Keyboard focus inside the content calls the light to the focused element.
interactive	boolean	true	The pointer, and the arrow keys when the scene has focus, move it; off, it only wanders.
onVanish	() => void	—	Fires when it is cornered and reappears somewhere else.
onStateChange	(state: "wandering" \| "shy" \| "waiting" \| "gone" \| "summoned") => void	—	Fires when what it is doing changes.
paused	boolean	false	Hold the scene still.
seed	number	5	Seeds its wandering and the reeds.
label	string	"Marsh light"	Accessible name.
dpr	number	2	Cap on the canvas's pixel ratio, at most 2 (the soft scene never draws above 1.25).
className	string	"h-52 w-full"	Sizes the scene.