Agent Skills
› nexu-io/motion-anything
› text-scramble
text-scramble
GitHub用于将单行短标题或英雄词从随机字符解码为真实文本，营造科技感。适用于简短内容，避免长文本或优雅风格。尊重无障碍偏好，减少运动时直接显示文本。
Trigger Scenarios
需要展示具有科技或未来感的短标题
英雄区域（Hero）的单行文字动态效果
Install
npx skills add nexu-io/motion-anything --skill text-scramble -g -y
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.jsinto the project and link it. - Mark the element:
<span class="scramble" data-text="motion, anything"></span> - Auto-plays
data-texton load. To change the phrase later:scrambleTo(el, "next phrase").
Accessibility & performance
- Under
prefers-reduced-motionthe final text appears instantly (no scramble). The resolveddata-textis always the real content. - Swaps text content on rAF; keep the line short so it stays cheap.
Framework notes
- React: keep a ref and call
scrambleTo(ref.current, text)on mount / when the phrase changes.
Version History
- b016900 Current 2026-07-11 17:11
