ns-ui / loud
An electric border for a CTA — the outline crackles like a live wire via feTurbulence displacement, micro-arcs spark off the corners, and near the cursor the stroke opens a gap that tracks the pointer with an arc jumping across it. Pressing discharges the wire: a bright flash, then two seconds spent and calm.
Use when a single CTA whose outline should read as live current, crackling on turbulence and opening a gap that tracks the cursor before discharging on press into two seconds of calm; pick border-chrome-ring instead when the border should be a heavy metal collar rather than a wire, or button-glass when the CTA should be the ordinary default rather than a showpiece.
Install
npx shadcn add https://design.helpmarq.comns-ui / border-electric-arc
A live-wire border: bring the cursor close and the stroke opens a gap that tracks you, with an arc jumping across it. Press for the full discharge — the wire flashes, then runs spent for two seconds.
| Prop | Type | Default | Description |
|---|---|---|---|
| label? | string | — | Accessible label / visible text of the CTA button. |
| onClick? | () => void | — | — |
| className? | string | — | — |