xpert-ai 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
- Copy
border-beam.cssinto the project and link it. - Mark the element:
<div class="beam"> … </div> - Tune
--beam-color,--beam-size, and the animation duration (default 3s).
Accessibility & performance
- Under
prefers-reduced-motionthe 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.