Build an Electric Border Animation in React

Borders are boring. They sit there, static, doing the minimum. Give that border a moving pulse of light and suddenly your card feels powered on.

The final result

The whole thing is pure CSS under the hood. Try changing the color and speed:

Setting up

No dependencies beyond React. The component uses inline styles and a style tag for the keyframe.

interface ElectricBorderProps {
  children: React.ReactNode;
  className?: string;
  duration?: number;
  color?: string;
  borderRadius?: string;
  borderWidth?: number;
}

Step 1: The spinning gradient

The trick is a conic-gradient. Only a narrow band is visible, the rest is transparent. Spinning it traces a pulse around the element.

Step 2: The mask trick

Without a mask, the gradient fills the entire rectangle. The CSS mask subtracts the content box, leaving only the border strip.

Step 3: The animation

A simple infinite rotation makes the pulse travel. Try different speeds:

Step 4: Try different looks

Blue with a thick border, or a subtle white glow. The same component handles both:

Key takeaways

• The conic-gradient plus CSS mask technique produces a true border ring with zero canvas or SVG overhead.
• maskComposite: 'exclude' is the key that cuts out the interior.
• Duration between 1.5s and 3s hits the sweet spot.