Nexu gradient-text
A gradient that drifts through a headline. Part of
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
- Copy
gradient-text.cssinto the project and link it. - Wrap the phrase:
<h1><span class="gradient-text">motion, anything</span></h1> - Set brand colors via
--g1/--g2/--g3; tune the duration (default 6s).
Accessibility & performance
- Under
prefers-reduced-motionthe drift stops and the text renders in a solid--g1color. - Animates
background-positionof a text-clipped gradient — GPU-safe.
Framework notes
- Pure CSS; works in any framework. Keep the base
--g1readable as the reduced-motion fallback.