Static Edge

Written for the variant you picked above: Blue

Build a dark pill button with electricity crawling round its edge. Props: children, charge (one of three colours, each a glow, a hot core, a face and a label colour), onClick, type and motion. Geometry (pure functions): the pill outline walked by distance (point, tangent, outward normal), the outline distance nearest to a point, and the shortest way round between two distances. Bolts: midpoint displacement between two points — each pass splits every segment and pushes the midpoint sideways by a random amount up to the current roughness, which shrinks to 55% each pass. A crawling arc samples the outline every 4px over its length, pushed out a few px and jittered across the edge, both scaled by a sine taper so it starts and ends on the edge. A fork leaves the outline outwards along the normal (with a little sideways lean) as a short bolt. A canvas overlay extends 28px round the button with pointer-events none. While hovered there are four streamers; each has a place on the outline, a length of 26–86px and a short life of 0.12–0.42s. Their places drift towards the outline point nearest the pointer, with a little random wander, and each is reborn near it when it dies. Every 45ms each streamer is reshaped (that re-jitter is the flicker) and has a 22% chance of a fork 7–18px long. If the pointer is within 18px of the edge, a bolt jumps from the nearest edge point to the pointer. Draw everything additively: a 3.2px glow stroke at half opacity with a 12px shadow in the glow colour, then a 1.1px core stroke; new streamers fade in. A charge level eases to 1 on hover and back to 0 on leave and drives a CSS variable: the face warms from below with the glow colour, the hairline rim brightens, an inner and an outer glow grow, the label picks up a faint glow and the bolt icon glows. Pressing discharges: one bolt all the way round plus seven sparks thrown off it, which fade over about 300ms with a flash in the glow. The loop stops when everything has faded. Keyboard focus charges it from the top; touch gets a 1.8s charge and the discharge. Reduced motion shows only the steady glow, with no arcs. Selected variant — Blue (blue): Blue electricity: glow #3fa2ff, core #eef8ff, face #0a111f, label #e9f4ff, on a near-black ground. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Point at the button to charge it; arcs gather where your pointer is and jump to it near the rim. Press to discharge. Keyboard focus charges it too. Motion: Arcs re-jitter every 45ms and live 0.12–0.42s each; the glow eases in over about 100ms and out over 200ms; the discharge fades over 300ms. Reduced motion shows a steady glow. Accessibility: A real button with its text label; the canvas is decorative and hidden. The label keeps strong contrast on the dark face at every charge level. Responsive behavior: Leave about 28px of room round the button for the arcs. Touch: A press charges it briefly and discharges. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Point at the button to charge it; arcs gather where your pointer is and jump to it near the rim. Press to discharge. Keyboard focus charges it too.

Motion

Arcs re-jitter every 45ms and live 0.12–0.42s each; the glow eases in over about 100ms and out over 200ms; the discharge fades over 300ms. Reduced motion shows a steady glow.

Accessibility

A real button with its text label; the canvas is decorative and hidden. The label keeps strong contrast on the dark face at every charge level.

Responsive

Leave about 28px of room round the button for the arcs.

On touch

A press charges it briefly and discharges.