# Border Beam

> 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.

- Skill: `nexu-io/border-beam` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add nexu-io/border-beam`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nexu-io/border-beam/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Nexu (https://skillmd.com/u/nexu-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nexu-io/border-beam

---


# 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.