shine-border

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

1. Copy shine-border.css into the project and link it.
2. Mark the element:

   <div class="shine"> … </div>
   

3. Tune with CSS vars: --shine-color, --shine-width, and the animation duration (default 4s).

Accessibility & performance

• Under prefers-reduced-motion the 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.