Agent Skills › nexu-io/motion-anything › gradient-text

gradient-text

GitHub

提供纯CSS实现的动态渐变文本效果，适用于短标题或品牌名称以营造高端感。支持无障碍降级和GPU加速动画，无需依赖任何框架。

recipes/web/gradient-text/SKILL.md nexu-io/motion-anything

Trigger Scenarios

需要为短标题添加动态视觉效果实现高性能的CSS文字渐变动画

Install

npx skills add nexu-io/motion-anything --skill gradient-text -g -y

More Options

Non-standard path

npx skills add https://github.com/nexu-io/motion-anything/tree/main/recipes/web/gradient-text -g -y

Use without installing

npx skills use nexu-io/motion-anything@gradient-text

指定 Agent (Claude Code)

npx skills add nexu-io/motion-anything --skill gradient-text -a claude-code -g -y

安装 repo 全部 skill

npx skills add nexu-io/motion-anything --all -g -y

预览 repo 内 skill

npx skills add nexu-io/motion-anything --list

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.css into 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-motion the drift stops and the text renders in a solid --g1 color.
Animates background-position of a text-clipped gradient — GPU-safe.