---
name: nexu-io/shine-border
source: https://app.decimal.ai/s/nexu-io-shine-border@1/SKILL.md
source_sha256: 53e67ec964b8
---

# shine-border

A light that travels around 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 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:
   ```html
   <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.