KQ-1852 · NODE/LEAP

Node Leap

A background of long soft filaments drifting through the dark on a slow current, each threaded with small beads, drawn in Canvas 2D with the content above. Signals do not flow: a signal rests on a bead, then jumps to the next in a quick streak of light, and the bead it lands on flares and cools; where two filaments drift close a faint glimmer passes between their beads, and a signal may jump across, arcing over the gap and carrying on along the other filament. The pointer is a gentle current that pushes the filaments aside, each point drifting back on a spring with the springs.drift constants, and a press sends a new signal from the nearest bead; the field is decoration and never takes focus, so the keyboard goes straight to the content above it.

KQ-1852 · NODE/LEAP

Waylight Relay

Messages that find their own way

Every node passes it on; a gap is just another route.

7 strands · 3 hops a second · 0 crossings

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/node-leap

Props

children: React.ReactNode; default —; The content above the field: a hero line, a heading, a call to action.
strands: number; default 7; How many filaments drift through the field, 2 to 16.
hopRate: number; default 3; How often a signal hops to its next bead, per second, 0.5 to 8.
glow: number; default 0.6; How far a lit bead's light spreads, 0 (bare beads) to 1 (blooming).
beads: number; default 14; Beads threaded on each filament, 6 to 24.
signals: number; default 2; Signals travelling on each filament, 1 to 4.
current: number; default 1; The pace of the slow current the filaments drift on, 0 (still) to 2.
cross: number; default 0.5; The chance a signal jumps across where two filaments drift close, 0 to 1.
colors: readonly string[]; default ["var(--accent-bright)", "var(--signal)", "oklch(from var(--warn) 0.8 0.14 h)"]; Signal colours, as CSS colours (up to four); each signal takes one.
interactive: boolean; default true; The pointer is a gentle current, and a press sends a new signal.
pointerStrength: number; default 0.6; How strongly the pointer's current moves the filaments, 0 to 1.
paused: boolean; default false; Hold everything still.
seed: number; default 1; Seeds the filaments, their beads and the signals' walks.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onCrossing: () => void; default —; Fires each time a signal jumps across from one filament to another.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content above the field: a hero line, a heading, a call to action.
strands	number	7	How many filaments drift through the field, 2 to 16.
hopRate	number	3	How often a signal hops to its next bead, per second, 0.5 to 8.
glow	number	0.6	How far a lit bead's light spreads, 0 (bare beads) to 1 (blooming).
beads	number	14	Beads threaded on each filament, 6 to 24.
signals	number	2	Signals travelling on each filament, 1 to 4.
current	number	1	The pace of the slow current the filaments drift on, 0 (still) to 2.
cross	number	0.5	The chance a signal jumps across where two filaments drift close, 0 to 1.
colors	readonly string[]	["var(--accent-bright)", "var(--signal)", "oklch(from var(--warn) 0.8 0.14 h)"]	Signal colours, as CSS colours (up to four); each signal takes one.
interactive	boolean	true	The pointer is a gentle current, and a press sends a new signal.
pointerStrength	number	0.6	How strongly the pointer's current moves the filaments, 0 to 1.
paused	boolean	false	Hold everything still.
seed	number	1	Seeds the filaments, their beads and the signals' walks.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onCrossing	() => void	—	Fires each time a signal jumps across from one filament to another.
className	string	"h-full w-full"	Sizes and shapes the box.