Electric Border

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.

Electric Border is a React glowing border component built with SVG filters. The jitter is driven by SVG's built-in animate elements rather than a JavaScript frame loop; Motion is used only to detect the reduced-motion setting.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<ElectricBorder/>

    </div>
  );
}

When to use

• Highlighting the recommended plan card on a pricing page
• Hero buttons and sign-up cards on gaming, esports, or event pages
• Sections on a product page that flag a new feature or limited edition
• Alert cards that need attention in a dark-themed dashboard
• Not a good fit: pages that need many bordered items side by side, or a quieter glow; try Border Beam instead

Installation

npx webberui@latest add https://webberui.com/r/electric-border.en.json

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.

Examples

Recommended plan card

Give the content a solid background and a radius slightly smaller than borderRadius, and use padding to leave room for the stroke to jitter.

<ElectricBorder color="#22d3ee" borderRadius={20} padding={3} className="w-72">
  <div className="rounded-[17px] bg-neutral-950 p-6 text-neutral-100">
    <p className="text-sm text-cyan-300">Recommended</p>
    <h3 className="mt-1 text-xl font-semibold">Team</h3>
    <ul className="mt-4 space-y-1 text-sm text-neutral-300">
      <li>Up to 20 members</li>
      <li>Shared component library and permissions</li>
    </ul>
  </div>
</ElectricBorder>

Wrap a button

The outer element of ElectricBorder is a plain div, so it can wrap anything; the stroke and glow layers ignore pointer events, so the button stays clickable.

<ElectricBorder color="#f43f5e" thickness={1.5} borderRadius={999} chaos={0.6}>
  <button className="rounded-full bg-neutral-950 px-6 py-2.5 text-sm font-medium text-white">
    Register now
  </button>
</ElectricBorder>

Toggle the current by state

With speed at 0 the current stops and only a static glowing border remains, which works as an active/inactive indicator.

<ElectricBorder color="#a3e635" speed={isActive ? 1.5 : 0} chaos={isActive ? 1.2 : 1}>
  <div className="rounded-[14px] bg-neutral-900 p-5 text-neutral-100">
    {isActive ? "Sync in progress" : "Sync paused"}
  </div>
</ElectricBorder>

Props

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-hidden and pointer-events-none, so they do not affect interaction with the content or how it is announced

FAQ

Does it work with the Next.js App Router?

Yes. The file already starts with "use client", so you can import it from a Server Component page as usual. The animation turns on only after mounting, so the first render is a static border that matches the SSR output.

How do I change the colour, speed, and intensity?

color sets the stroke and glow colour, speed is a speed multiplier (0 is still), chaos multiplies the displacement (higher is wilder), and thickness sets the stroke width. The background tint appends an alpha value to color, so a six-digit hex colour such as "#5b8cff" is recommended.

Does the current drift off the edge when the size changes?

No. The component watches its outer size with ResizeObserver and updates the noise scroll distance from the real width and height, so the loop stays seamless.

What about performance?

The animation runs in the browser through SVG animate elements, with no requestAnimationFrame loop. The displacement filter still repaints every frame, though, so keep it to key areas rather than using many on one page.

What happens with reduced motion?

When the user has reduced motion enabled, the displacement drops to zero, the jitter stops, and a softer static glowing border remains.