border-beam

name	border-beam
description	Give one card or CTA a lively accent: a small bright comet of light travels around its border. Brighter/livelier than shine-border — use for a single "new"/"featured" element, one per view. Pure CSS; fully static under prefers-reduced-motion.
triggers	["border beam","traveling light border","comet border","animated outline accent","边框光点","环绕流光"]
od	{"mode":"prototype","surface":"web","platform":"desktop","category":"animation-motion","upstream":"https://magicui.design/docs/components/border-beam","preview":{"type":"html"},"design_system":{"requires":false},"example_prompt":"Use border-beam on the \"New\" feature card: a small bright comet travels the border. Just that one\ncard; static under reduced-motion.\n"}

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.