KQ-1528 · TRACE/CURRENT

Trace Current

A grid of dim dots wired like a circuit board on one Canvas 2D layer, with content above: seeded walkers lay right-angled traces, and currents of light run along them dot to dot, lighting each dot and trace as they pass. Bring the pointer in and a walk along the traces makes every connected dot downhill toward it, so the currents reroute the way water finds the quickest way down and gather at the hand, falling back to their circuits when it leaves; a click sends one pulse out along every trace at once, the front walking each trace from its nearest point to the click. Nothing springs here — currents run at a steady rate and light fades exponentially — and the keyboard has a probe: arrows move it dot to dot, Enter or Space pulses from it, Escape lifts it.

KQ-1528 · TRACE/CURRENT

Gaugeworks Relay

Every request takes the shortest path

on circuit · move over the board or click

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/trace-current

Props

children: React.ReactNode; default —; The content above the board: a hero line, a heading, a call to action.
density: number; default 0.5; How fine the board is, 0 (a sparse board of long traces) to 1 (dense and fine).
flowRate: number; default 6; How fast the currents run, in dots a second.
hue: number; default 260; The light's hue, in degrees, at the theme's accent lightness.
currents: number; default 22; How many currents run at once, 4 to 80.
trail: number; default 0.5; How long a lit dot and trace keep glowing after a current passes, 0 to 1.
pull: number; default 0.85; How many of the currents answer the pointer, 0 (none) to 1 (all).
pulseSpeed: number; default 520; How fast a pulse's front runs along the traces, in px a second.
interactive: boolean; default true; The pointer reroutes the currents and a click sends a pulse.
paused: boolean; default false; Hold the currents where they are.
label: string; default "Circuit board"; Names the board for assistive technology.
seed: number; default 9; Seeds the traces' layout, so two boards never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onPulse: (origin: { x: number; y: number }) => void; default —; Fires when a click or a key sends a pulse, with its origin in px from the board's top-left.
onRerouteChange: (rerouting: boolean) => void; default —; Fires when the currents start (true) or stop (false) rerouting toward the pointer or the probe.
disabled: boolean; default false; Shows the board but takes no input.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content above the board: a hero line, a heading, a call to action.
density	number	0.5	How fine the board is, 0 (a sparse board of long traces) to 1 (dense and fine).
flowRate	number	6	How fast the currents run, in dots a second.
hue	number	260	The light's hue, in degrees, at the theme's accent lightness.
currents	number	22	How many currents run at once, 4 to 80.
trail	number	0.5	How long a lit dot and trace keep glowing after a current passes, 0 to 1.
pull	number	0.85	How many of the currents answer the pointer, 0 (none) to 1 (all).
pulseSpeed	number	520	How fast a pulse's front runs along the traces, in px a second.
interactive	boolean	true	The pointer reroutes the currents and a click sends a pulse.
paused	boolean	false	Hold the currents where they are.
label	string	"Circuit board"	Names the board for assistive technology.
seed	number	9	Seeds the traces' layout, so two boards never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onPulse	(origin: { x: number; y: number }) => void	—	Fires when a click or a key sends a pulse, with its origin in px from the board's top-left.
onRerouteChange	(rerouting: boolean) => void	—	Fires when the currents start (true) or stop (false) rerouting toward the pointer or the probe.
disabled	boolean	false	Shows the board but takes no input.
className	string	"h-full w-full"	Sizes and shapes the box.