KQ-1385 · LIVE/WIRE/MARK

Live Wire Mark

An electric outline for any SVG mark: the path is rendered as a faint wire and sampled into canvas points, and arcs of current crawl it both ways as jagged, tapering polylines re-kinked about thirty times a second, throwing forks that flicker and die over a glow that breathes underneath. Hover or keyboard focus charges it on springs.drift — more arcs, hotter, and sparks crackling off the corners past 0.6 — and a press discharges it in one flash on an exit tween, after which the charge climbs back on springs.drift from the point nearest the press. Enter or Space discharges it from the keyboard.

KQ-1385 · LIVE/WIRE/MARK

Gaugeworks

Field instruments · est. 1962

live · hover to charge, press to discharge

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/live-wire-mark

Props

path: string; default built-in hexagon-and-G mark; The mark as SVG path data in viewBox units; any number of subpaths, with corners and open ends found for you.
viewBox: string; default "0 0 100 100"; The viewBox the path is drawn in.
voltage: number; default 0.5; How hot the current runs, 0 to 1: the arcs' reach, speed and brightness.
arcs: number; default 3; How many arcs crawl the outline at rest; hover and focus add more.
glow: number; default 0.5; The glow breathing under the outline, 0 to 1.
color: string; default "var(--accent-bright)"; The current's colour; its hot core is mixed toward the foreground, so it is white-hot on dark and ink on light.
hoverBoost: number; default 0.5; How much hover or keyboard focus raises the voltage, as a share of what is left to full.
speed: number; default 1; How fast the arcs crawl, as a multiple of the house pace (0.25 to 3).
forks: number; default 0.5; How often an arc throws a fork off its side, 0 to 1.
sparks: boolean; default true; Corners crackle with sparks once the voltage passes 0.6, and burst on a discharge.
conductor: boolean; default true; Draw the outline itself as a faint wire.
thickness: number; default 1.5; The wire's stroke width, in CSS pixels.
label: string; default "Electric mark"; The mark's accessible name.
interactive: boolean; default true; A press discharges the mark and hover and focus charge it; off, it is an image.
paused: boolean; default false; Hold the current still.
seed: number; default 3; Seed for where the arcs start and how they kink.
dpr: number; default 2; The highest device pixel ratio the canvas draws at (never above 2).
sound: boolean; default false; Play a buzz when the visitor discharges the mark.
onDischarge: () => void; default —; Fires when the visitor discharges the mark.
className: string; default —; Classes for the box; size it here (default size-40).

Prop	Type	Default	Description
path	string	built-in hexagon-and-G mark	The mark as SVG path data in viewBox units; any number of subpaths, with corners and open ends found for you.
viewBox	string	"0 0 100 100"	The viewBox the path is drawn in.
voltage	number	0.5	How hot the current runs, 0 to 1: the arcs' reach, speed and brightness.
arcs	number	3	How many arcs crawl the outline at rest; hover and focus add more.
glow	number	0.5	The glow breathing under the outline, 0 to 1.
color	string	"var(--accent-bright)"	The current's colour; its hot core is mixed toward the foreground, so it is white-hot on dark and ink on light.
hoverBoost	number	0.5	How much hover or keyboard focus raises the voltage, as a share of what is left to full.
speed	number	1	How fast the arcs crawl, as a multiple of the house pace (0.25 to 3).
forks	number	0.5	How often an arc throws a fork off its side, 0 to 1.
sparks	boolean	true	Corners crackle with sparks once the voltage passes 0.6, and burst on a discharge.
conductor	boolean	true	Draw the outline itself as a faint wire.
thickness	number	1.5	The wire's stroke width, in CSS pixels.
label	string	"Electric mark"	The mark's accessible name.
interactive	boolean	true	A press discharges the mark and hover and focus charge it; off, it is an image.
paused	boolean	false	Hold the current still.
seed	number	3	Seed for where the arcs start and how they kink.
dpr	number	2	The highest device pixel ratio the canvas draws at (never above 2).
sound	boolean	false	Play a buzz when the visitor discharges the mark.
onDischarge	() => void	—	Fires when the visitor discharges the mark.
className	string	—	Classes for the box; size it here (default size-40).