Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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.
.claude/skills/nexu-io-border-beam/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-03 | ✗→✓ | ▲ Improved | -29% | 0% |
| case-09 | ✗→✓ | ▲ Improved | -62% | 0% |
| case-11 | ✗→✓ | ▲ Improved | -58% | 0% |
| case-12 | ✗→✓ | ▲ Improved | -31% | 0% |
| case-14 | ✗→✓ | ▲ Improved | -50% | 0% |
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).
border-beam.css into the project and link it.html <div class="beam"> … </div>
--beam-color, --beam-size, and the animation duration (default 3s).prefers-reduced-motion the beam stops; a plain static border remains.@property --beam-angle) — compositor-friendly.--beam-* per component.Other measured skills in the registry, with their headline benchmark lift.