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

text-scramble

GitHub

实现文字从乱码到清晰文本的解码动画效果，适用于短标题或技术风格场景。支持无障碍模式，自动忽略减少动效偏好，确保内容可访问性。

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

触发场景

需要为短标题添加科技感解码动画实现英雄区文字的动态显示效果

安装

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

更多选项

非标准路径

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

不安装直接使用

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

指定 Agent (Claude Code)

npx skills add nexu-io/motion-anything --skill text-scramble -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:\/\/tympanus.net\/Development\/TextScrambleEffect\/",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use text-scramble on the hero line for a technical product: it resolves from noise, fast. Just\nthe one line; instant under reduced-motion."
    },
    "name": "text-scramble",
    "triggers": [
        "text scramble",
        "decode text",
        "glitch text reveal",
        "matrix text",
        "解码文字",
        "科技感标题"
    ],
    "description": "Resolve one short headline from random glyphs — a techy decode reveal. One short line only; keep\nit fast. The resolved text is the real, accessible content; under prefers-reduced-motion it appears\ninstantly with no scramble. Avoid on body copy and calm\/luxury tones.\n"
}

text-scramble

A line of text that resolves from random glyphs. Part of motion-anything; obeys MOTION-SPEC.md. Technique popularized by Codrops, reimplemented dependency-free.

When to use it

A hero word / short headline with a technical or futuristic tone; cycling a few phrases on one line.

When NOT to use it (restraint)

Long text or body copy — unreadable while scrambling. One short line.
Calm / editorial / luxury tones (feels gimmicky).

How to apply

Copy text-scramble.js into the project and link it.

Mark the element:

<span class="scramble" data-text="motion, anything"></span>

Auto-plays data-text on load. To change the phrase later: scrambleTo(el, "next phrase").

Accessibility & performance

Under prefers-reduced-motion the final text appears instantly (no scramble). The resolved data-text is always the real content.
Swaps text content on rAF; keep the line short so it stays cheap.