Text Scramble (Decode Effect) new 文本乱序（Decode 效果） web
Random characters churn and settle into the real text
随机字符不停翻滚，最终落定成真正的文字
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Glyph churn字符翻滚（Glyph churn）
chars (ScrambleTextPlugin)“The random letters still spinning at the end while the rest has settled” is the churn — the not-yet-locked characters drawn from the scramble charset.
“其他字母都定住了，末尾还有几个随机字母在转”就是 churn —— 从乱序字符集里取出的、尚未锁定的字符。
Prompt fragmentPrompt 片段the scramble's glyph churn: the still-randomizing characters (charset like "!<>-_\\/[]{}") that haven't reached their settle deadline yet
乱序效果中的字符翻滚：仍在随机变化、还没到落定死线的字符（字符集如 "!<>-_\\/[]{}")
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build a text scramble (decode) effect: each character cycles random glyphs and locks into the real one left to right (GSAP ScrambleTextPlugin, or a requestAnimationFrame loop with a per-character settle deadline). Use a monospace font or tabular glyphs so width never jitters, expose the final string via aria-label with the churning span aria-hidden, and honor prefers-reduced-motion by rendering the text instantly.
构建一个文本乱序（decode）效果：每个字符先循环随机字形，再从左到右依次锁定为真实字符（用 GSAP ScrambleTextPlugin，或 requestAnimationFrame 循环加每字符的落定死线）。使用等宽字体或表格数字字形，保证宽度不抖动；通过 aria-label 暴露最终字符串，翻滚中的 span 设 aria-hidden；并遵守 prefers-reduced-motion，直接瞬间呈现文本。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my text scramble effect (GSAP ScrambleTextPlugin / rAF charset loop). Rule out: layout jitter because glyph widths differ (needs monospace or tabular-nums); the animation never settling because the per-character deadline keeps resetting on re-render; screen readers announcing garbage (final text must live in aria-label, churn aria-hidden); the effect re-running on every state change instead of once per mount; reduced-motion users getting the churn instead of instant text. The symptom:
调试我的文本乱序效果（GSAP ScrambleTextPlugin / rAF 字符集循环）。逐项排除：字形宽度不一导致布局抖动（需要 monospace 或 tabular-nums）；每字符死线在重新渲染时不断重置，动画永远落不定；屏幕阅读器念出乱码（最终文本必须放在 aria-label，翻滚部分 aria-hidden）；每次状态变化都重跑效果，而不是每次挂载只跑一次；开了 reduced-motion 的用户仍看到翻滚而不是瞬间出字。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| GSAP | ScrambleTextPlugin | the canonical implementation — free since GSAP 3.13最经典的实现 —— 自 GSAP 3.13 起免费 |
| JS | requestAnimationFrame + charset swap | the hand-rolled version: per-character reveal deadline, random glyphs until then手写版做法：给每个字符设一个揭晓死线，死线前一直显示随机字形 |
| CSS | font-variant-numeric: tabular-nums | monospace/tabular glyphs stop the line jittering while it churns等宽/表格数字字形能防止翻滚时整行抖动 |
| A11y | aria-label + aria-hidden churn | screen readers get the final text, never the noise屏幕阅读器只读到最终文本，读不到翻滚的噪声 |