Agent Skills
› nexu-io/motion-anything
› gradient-text
gradient-text
GitHub为简短标题或品牌名添加高端渐变动画效果。纯CSS实现，支持GPU加速，自动适配无障碍偏好，仅限短文本使用以提升视觉质感。
Trigger Scenarios
需要为短标题或品牌名称添加动态渐变视觉效果
希望在不依赖JavaScript的情况下实现高性能的CSS文字动画
Install
npx skills add nexu-io/motion-anything --skill gradient-text -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": "https:\/\/magicui.design\/docs\/components\/animated-gradient-text",
"design_system": {
"requires": false
},
"example_prompt": "Use gradient-text on the hero word only: a slow on-brand gradient drifts through it. Keep the\nrest of the type solid; solid color under reduced-motion."
},
"name": "gradient-text",
"triggers": [
"gradient text",
"animated headline",
"shimmering title",
"premium heading color",
"渐变文字",
"流光标题"
],
"description": "Give one short headline quiet premium emphasis: a slow on-brand gradient drifts through the type.\nOne phrase per view; never body copy (readability). Pure CSS; falls back to a solid brand color\nunder prefers-reduced-motion.\n"
}
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.
Version History
- b016900 Current 2026-07-11 17:08
