border-beam

border-beam

A bright comet that travels an element's border. Part of motion-anything; obeys MOTION-SPEC.md. Technique popularized by Magic UI, reimplemented dependency-free (pure CSS).

When to use it

• A single "new" / "featured" card or a hero CTA that should feel lively for a beat.

When NOT to use it (restraint)

• Several at once (competing beams = noise). One per view.
• Calm/serious contexts — or when a quieter full-border glow fits: use shine-border instead.

How to apply

1. Copy border-beam.css into the project and link it.
2. Mark the element:

   <div class="beam"> … </div>
   

3. Tune --beam-color, --beam-size, and the animation duration (default 3s).

Accessibility & performance

• Under prefers-reduced-motion the beam stops; a plain static border remains.
• Animates a masked conic-gradient (via @property --beam-angle) — compositor-friendly.

Framework notes

• Pure CSS; works in any framework. Scope --beam-* per component.