---
name: nexu-io/border-beam
source: https://app.decimal.ai/s/nexu-io-border-beam@1/SKILL.md
source_sha256: 30af0f096a5a
---

# border-beam

A bright comet that travels an element's border. Part of
[motion-anything](https://github.com/nexu-io/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:
   ```html
   <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.