Electric Border
A jittering electric-current border that glows, distorting its stroke with SVG noise displacement so the energy bleeds outward from the outline.
feTurbulence generates noise that scrolls frame by frame and is then distorted by feDisplacementMap, making the border jitter like a high-voltage current while two glow layers radiate outward. Wrap it around any content.
Loading preview…
npx shadcn@latest add https://webberui.com/r/electric-border.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
1
1
2
16
<ElectricBorder />
Installation
npx shadcn@latest add https://webberui.com/r/electric-border.jsonOr, once registries are configured in components.json, install it as @webberui/electric-border.
Usage
import { ElectricBorder } from "@/components/ui/electric-border";
<ElectricBorder color="#5b8cff" speed={1} chaos={1} borderRadius={18}>
<div className="rounded-[16px] bg-neutral-950 p-6 text-neutral-100">
Power Surge
</div>
</ElectricBorder>Give the content a solid background and a radius slightly smaller than borderRadius, so the jittering stroke shows outside the content's edge.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | "#5b8cff" | Color of the electric border and its glow |
speed | number | 1 | Animation speed multiplier; 0 holds it still |
chaos | number | 1 | Turbulence of the current (displacement multiplier) |
thickness | number | 2 | Border thickness (px) |
borderRadius | number | 16 | Corner radius (px) |
padding | number | 2 | Padding between the content and the border (px) |
children | ReactNode | — | Content inside the border |
contentClassName | string | — | className of the content container |
Accessibility
- When the user has "reduce motion" enabled at the system level, the current stops jittering and a static glowing border remains
- The stroke and the glow are both
aria-hiddenandpointer-events-none, so they do not affect interaction with the content or how it is announced