Text Scramble
介绍
文字以随机字符逐位解码成目标词，进入视口和悬停时触发。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Text Scramble 加进你的项目并换成你的配色。
适用场景
标题动效、客户证言、强调文案和大字排版。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add text-scramble
mcp › 使用 8pt MCP 调用 get_component("text-scramble")
代码
Text Scramble 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-scr"><span class="x-scr__t" data-words="DESIGN SYSTEM|PIXEL PERFECT|SHIP TODAY">DESIGN SYSTEM</span></div>
.x-scr{color:var(--d-fg,#fff);cursor:default}
.x-scr__t{display:inline-block;font:700 clamp(20px,3vw,32px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;white-space:pre}
.x-scr__t i{font-style:normal;color:var(--d-accent,#4D74FF)}const init = (root) => {
const el = root.querySelector('.x-scr__t'), words = el.dataset.words.split('|'), pool = '!#$%&*+=?@^~01/\\[]{}';
let wi = 0, raf = 0;
const run = () => {
const target = words[wi = (wi + 1) % words.length], len = target.length, start = performance.now();
cancelAnimationFrame(raf);
const step = (now) => {
const p = (now - start) / 900; let out = '';
for (let i = 0; i < len; i++) out += p * len > i + 2 ? target[i] : p * len > i - 4 ? `<i>${pool[(Math.random() * pool.length) | 0]}</i>` : ' ';
el.innerHTML = out; if (p < 1.3) raf = requestAnimationFrame(step); else el.textContent = target;
};
raf = requestAnimationFrame(step);
…订阅 Builder 查看完整源码。查看价格