---
name: nexu-io/gradient-text
source: https://app.decimal.ai/s/nexu-io-gradient-text@1/SKILL.md
source_sha256: ca313c949b8f
---

# gradient-text

A gradient that drifts through a headline. 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
- One hero word / short headline / brand name / key metric you want to feel premium.

## When NOT to use it (restraint)
- Body copy or long text — it hurts readability and contrast. **One short phrase per view.**
- When guaranteed color contrast is required for accessibility.

## How to apply
1. Copy `gradient-text.css` into the project and link it.
2. Wrap the phrase:
   ```html
   <h1><span class="gradient-text">motion, anything</span></h1>
   ```
3. Set brand colors via `--g1/--g2/--g3`; tune the duration (default 6s).

## Accessibility & performance
- Under `prefers-reduced-motion` the drift stops and the text renders in a solid `--g1` color.
- Animates `background-position` of a text-clipped gradient — GPU-safe.

## Framework notes
- Pure CSS; works in any framework. Keep the base `--g1` readable as the reduced-motion fallback.