KQ-1424 · COMET/BORDER

Comet Border

A frame for any children with a comet travelling its border: a bright head and a tail that tapers in width and light, drawn on a Canvas 2D layer along the border's own centreline — read from the computed border width and all four corner radii and sampled by arc length, so the pace stays even through the corners. The border brightens just ahead of the head and keeps a fading afterglow behind it. Hovering, or keyboard focus inside, speeds the comet up on the springs.glide constants and lets it coast back on springs.drift, and lights a twin that ignites opposite and runs the other way; where the two heads cross the border flares. The children keep their own focus order, clicks and rings.

KQ-1424 · COMET/BORDER

Gaugeworks Pro

New

Live telemetry for every rig.

£29 / month

Live telemetry from every rig
Alerts within a second

circling · 0 laps so far

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/comet-border

Props

children: React.ReactNode; default —; What the frame holds. It keeps every click, focus and key.
speed: number; default 140; The comet's pace along the border, in px per second.
tail: number; default 160; The tail's length, in px (never more than 45% of the frame).
color: "cobalt" | "mint" | "amber" | "ink" | string; default "cobalt"; Its colour: a named token, or any CSS colour.
width: number; default 2; The head's thickness, in px.
glow: number; default 0.6; How far its halo spreads and how bright, 0 to 1.
afterglow: number; default 1400; How long the border stays lit after the comet passes, in ms; 0 leaves no trace.
hoverSpeed: number; default 2.4; How much faster it runs while the frame is hovered or holds keyboard focus, 1 to 5.
twin: boolean | "hover"; default "hover"; A second comet running the other way: always, never, or lit by hover and focus.
direction: "clockwise" | "counterclockwise"; default "clockwise"; Which way round the frame it travels.
start: number; default 0.12; Where it sets off (and rests under reduced motion), 0 to 1 round the frame from the top-left corner.
paused: boolean; default false; Hold the comet where it is and stop the frame loop.
dpr: number; default 2; The highest device pixel ratio the canvas draws at (never above 2).
onLap: (laps: number) => void; default —; Fires each time the comet completes a lap, with the count so far.
onCross: () => void; default —; Fires when the twin and the comet cross and the border flares.
className: string; default —; Classes for the frame. It draws its own rounded hairline; any rounded-* and border-* class sets the path.

Prop	Type	Default	Description
children	React.ReactNode	—	What the frame holds. It keeps every click, focus and key.
speed	number	140	The comet's pace along the border, in px per second.
tail	number	160	The tail's length, in px (never more than 45% of the frame).
color	"cobalt" \| "mint" \| "amber" \| "ink" \| string	"cobalt"	Its colour: a named token, or any CSS colour.
width	number	2	The head's thickness, in px.
glow	number	0.6	How far its halo spreads and how bright, 0 to 1.
afterglow	number	1400	How long the border stays lit after the comet passes, in ms; 0 leaves no trace.
hoverSpeed	number	2.4	How much faster it runs while the frame is hovered or holds keyboard focus, 1 to 5.
twin	boolean \| "hover"	"hover"	A second comet running the other way: always, never, or lit by hover and focus.
direction	"clockwise" \| "counterclockwise"	"clockwise"	Which way round the frame it travels.
start	number	0.12	Where it sets off (and rests under reduced motion), 0 to 1 round the frame from the top-left corner.
paused	boolean	false	Hold the comet where it is and stop the frame loop.
dpr	number	2	The highest device pixel ratio the canvas draws at (never above 2).
onLap	(laps: number) => void	—	Fires each time the comet completes a lap, with the count so far.
onCross	() => void	—	Fires when the twin and the comet cross and the border flares.
className	string	—	Classes for the frame. It draws its own rounded hairline; any rounded-* and border-* class sets the path.