KQ-1837 · CATENARY/GLOW

Catenary Glow

Power lines strung between wooden poles across a dusk sky, hanging in true catenary sags and glowing faintly, while every few seconds a warm current runs along each wire in turn, top line first: a short bright pulse with a long fading tail whose halo widens as it passes. Every span is a string held at both insulators and integrated as a damped wave at 120 Hz, so a pointer brushing across a wire strikes the node it crossed with the stroke's own speed and a gentle travelling wave runs out both ways, reflects at the poles and dies away, the wire brightening while it moves. Arrow keys choose a wire and a point along it, Enter or Space plucks it, and a tap or click near a wire plucks it there.

KQ-1837 · CATENARY/GLOW

Fieldline Grid · evening load

The town comes on at dusk

Fieldline Grid · north feeder4.2 GW

4 lines · brush or tap a wire

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/catenary-glow

Props

children: React.ReactNode; default —; Content over the sky, in its own layer: a headline, a reading, a call to action.
wires: number; default 4; How many lines are strung between the poles, 2 to 6.
sag: number; default 0.5; How deep the catenaries hang, 0 (taut) to 1 (slack); the lowest line always clears the hills.
warmth: number; default 0.65; The colour of the current and the glow: 0 a cool white, 1 deep amber.
span: number; default fitted; Distance between poles in px; by default fitted so two to four poles show.
interval: number; default 5200; Time between currents, in ms.
speed: number; default 460; How fast a current runs along a wire, in px per second.
sway: number; default 0.6; How readily a brush or pluck sets the wires swinging, 0 to 1.
stars: boolean; default true; A few faint early stars.
interactive: boolean; default true; The pointer and keys can set the wires swaying.
paused: boolean; default false; Hold the currents; the wires still sway when brushed.
onPluck: (wire: number) => void; default —; Fires when a tap, click or key plucks a wire, with its index from the top.
label: string; default "Power lines at dusk"; The scene's accessible name, for the keyboard's way in.
disabled: boolean; default false; Shows the scene but takes no input.
className: string; default "h-full w-full"; Sizes the scene; it fills its parent by default.

Prop	Type	Default	Description
children	React.ReactNode	—	Content over the sky, in its own layer: a headline, a reading, a call to action.
wires	number	4	How many lines are strung between the poles, 2 to 6.
sag	number	0.5	How deep the catenaries hang, 0 (taut) to 1 (slack); the lowest line always clears the hills.
warmth	number	0.65	The colour of the current and the glow: 0 a cool white, 1 deep amber.
span	number	fitted	Distance between poles in px; by default fitted so two to four poles show.
interval	number	5200	Time between currents, in ms.
speed	number	460	How fast a current runs along a wire, in px per second.
sway	number	0.6	How readily a brush or pluck sets the wires swinging, 0 to 1.
stars	boolean	true	A few faint early stars.
interactive	boolean	true	The pointer and keys can set the wires swaying.
paused	boolean	false	Hold the currents; the wires still sway when brushed.
onPluck	(wire: number) => void	—	Fires when a tap, click or key plucks a wire, with its index from the top.
label	string	"Power lines at dusk"	The scene's accessible name, for the keyboard's way in.
disabled	boolean	false	Shows the scene but takes no input.
className	string	"h-full w-full"	Sizes the scene; it fills its parent by default.