KQ-1869 · PICKET/ARC

Picket Arc

A night sky as a background, drawn in one WebGL2 pass behind its content: deep blue-black over a low ridge with faint airglow and sparse twinkling stars, crossed by a single narrow arc of violet light with a row of short green streaks hanging beneath it like a picket fence, each flickering on its own and drifting along the arc as the arc sweeps slowly across. The pointer bends the part of the arc nearest it toward itself on springs.glide's constants, and a horizontal drag carries the arc 1:1 and lets a throw coast on before the slow sweep resumes. The sky is aria-hidden and never takes a click from the content; the keyboard's way in is a transparent button behind it, where Left and Right sweep the arc and Up and Down bend it.

KQ-1869 · PICKET/ARC

Fieldline · night sky survey

Seen something in the sky?

A violet arc with a green fence beneath it. Tell us where and when.

arc sweeping · drag the sky to move 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/picket-arc

Props

children: React.ReactNode; default —; Content shown above the sky, in its own layer; its links and buttons keep their clicks.
sweep: number; default 0.6; How fast the arc sweeps across the sky, 0 (still) to 2.
pickets: number; default 28; How many green pickets hang beneath the arc, 8 to 64; a narrow sky shows proportionally fewer.
hue: number; default 305; The arc's hue, degrees on the OKLCH wheel.
fenceHue: number; default 150; The fence's hue, degrees.
arcWidth: number; default 1; How thick the arc and its halo are, 0.5 to 2.
flicker: number; default 0.6; How much the pickets flicker, 0 to 1.
stars: number; default 0.5; How many stars, 0 to 1.
bend: number; default 0.6; How far the pointer bends the arc toward itself, 0 to 1.
interactive: boolean; default true; The pointer bends the arc, a drag sweeps it, and the keyboard control is present.
paused: boolean; default false; Hold the sky still.
seed: number; default 11; Places the stars and shapes the ridge.
dpr: number; default 2; Device-pixel-ratio cap for the canvas, at most 2.
label: string; default "Night sky with a violet arc"; The keyboard control's accessible name.
className: string; default —; Size the sky; it fills its box, so give it a height.

Prop	Type	Default	Description
children	React.ReactNode	—	Content shown above the sky, in its own layer; its links and buttons keep their clicks.
sweep	number	0.6	How fast the arc sweeps across the sky, 0 (still) to 2.
pickets	number	28	How many green pickets hang beneath the arc, 8 to 64; a narrow sky shows proportionally fewer.
hue	number	305	The arc's hue, degrees on the OKLCH wheel.
fenceHue	number	150	The fence's hue, degrees.
arcWidth	number	1	How thick the arc and its halo are, 0.5 to 2.
flicker	number	0.6	How much the pickets flicker, 0 to 1.
stars	number	0.5	How many stars, 0 to 1.
bend	number	0.6	How far the pointer bends the arc toward itself, 0 to 1.
interactive	boolean	true	The pointer bends the arc, a drag sweeps it, and the keyboard control is present.
paused	boolean	false	Hold the sky still.
seed	number	11	Places the stars and shapes the ridge.
dpr	number	2	Device-pixel-ratio cap for the canvas, at most 2.
label	string	"Night sky with a violet arc"	The keyboard control's accessible name.
className	string	—	Size the sky; it fills its box, so give it a height.