Nexu shine-border
A light that travels around 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 hero card / CTA / "recommended" tier you want to feel alive as it sits on screen.
When NOT to use it (restraint)
- Multiple elements at once — competing lights become noise. One per view.
- Calm / serious content, or anything already animating strongly nearby.
How to apply
- Copy
shine-border.cssinto the project and link it. - Mark the element:
<div class="shine"> … </div> - Tune with CSS vars:
--shine-color,--shine-width, and the animation duration (default 4s).
Accessibility & performance
- Under
prefers-reduced-motionthe light stops and a plain static border remains. - Animates a masked conic-gradient (via
@property --shine-angle) — compositor-friendly.
Framework notes
- Works as-is in any framework; it is pure CSS. Scope
--shine-*per component as needed.