KQ-1397 · ARC/BORDER

Arc Border

An electric frame around any children: a canvas draws a jagged current that hugs the content's rounded rectangle and re-strikes into a new shape several times a second, each strike a faint ghost strand, a glow pass, the coloured arc with a shadow halo and a hot core, while on a seeded schedule a bright bolt jumps across a corner and dies in 180 ms. Hover or focus inside charges it on springs.snap — the jag deepens, the glow swells, it strikes faster and jumps more — and the charge lets go on springs.drift so the hum lingers. The children stay fully interactive in their own tab order; the canvas never takes a pointer.

KQ-1397 · ARC/BORDER

Waylight · Pro

$24 / month

Unlimited routes
Offline maps
Live weather

idle hum · cobalt · jitter 0.50 · 1.5 px

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

Props

children: ReactNode; default —; What the frame goes around. Fully interactive; the current never takes a click.
color: "cobalt" | "signal" | "ember" | "rose" | string; default "cobalt"; The current's colour: a preset, or any CSS colour (tokens resolve on the element, so they follow the theme).
coreColor: string; default —; The hot core down the middle of the arc. Defaults to the colour mixed toward white.
jitter: number; default 0.5; How far the edge jags, 0 (a nearly smooth live wire) to 1 (a ragged storm).
thickness: number; default 1.5; Width of the arc, px; the core is 40% of it.
glow: number; default 0.6; How far the soft glow spreads, 0 to 1.
radius: number; default 16; Corner radius of the frame and the content box, px.
rate: number; default 10; How many times a second the arc re-strikes into a new shape at rest.
jumps: number; default 0.5; How often a bright jump leaps across a corner, 0 (never) to 1 (often).
surge: number; default 0.7; How far hover and focus inside lift the current, 0 to 1.
charged: boolean; default false; Hold the frame charged, as if hovered.
live: "always" | "hover"; default "always"; "always" crackles whenever it is on screen; "hover" rests as one still strike until a visitor arrives.
paused: boolean; default false; Hold the current still.
seed: number; default 3; Seed for the arc's shapes, so two frames on a page differ.
dpr: number; default 2; Highest device pixel ratio the canvas renders at (capped at 2).
onChargeChange: (charged: boolean) => void; default —; The frame charged or settled, from the hover or focus that caused it.
className: string; default —; Classes for the outer box (the frame's gutter is its padding).
contentClassName: string; default —; Classes for the content box inside the frame — its surface and padding.

Prop	Type	Default	Description
children	ReactNode	—	What the frame goes around. Fully interactive; the current never takes a click.
color	"cobalt" \| "signal" \| "ember" \| "rose" \| string	"cobalt"	The current's colour: a preset, or any CSS colour (tokens resolve on the element, so they follow the theme).
coreColor	string	—	The hot core down the middle of the arc. Defaults to the colour mixed toward white.
jitter	number	0.5	How far the edge jags, 0 (a nearly smooth live wire) to 1 (a ragged storm).
thickness	number	1.5	Width of the arc, px; the core is 40% of it.
glow	number	0.6	How far the soft glow spreads, 0 to 1.
radius	number	16	Corner radius of the frame and the content box, px.
rate	number	10	How many times a second the arc re-strikes into a new shape at rest.
jumps	number	0.5	How often a bright jump leaps across a corner, 0 (never) to 1 (often).
surge	number	0.7	How far hover and focus inside lift the current, 0 to 1.
charged	boolean	false	Hold the frame charged, as if hovered.
live	"always" \| "hover"	"always"	"always" crackles whenever it is on screen; "hover" rests as one still strike until a visitor arrives.
paused	boolean	false	Hold the current still.
seed	number	3	Seed for the arc's shapes, so two frames on a page differ.
dpr	number	2	Highest device pixel ratio the canvas renders at (capped at 2).
onChargeChange	(charged: boolean) => void	—	The frame charged or settled, from the hover or focus that caused it.
className	string	—	Classes for the outer box (the frame's gutter is its padding).
contentClassName	string	—	Classes for the content box inside the frame — its surface and padding.