Text Scramble
Overview
Text decodes from random characters into the target word one letter at a time, on entering the viewport and on hover.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Text Scramble to your project in your colors.
Where to use it
Animated headlines, testimonials, emphasis copy and large-type layouts.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add text-scramble
mcp › Use 8pt MCP to call get_component("text-scramble")
Code
Source for Text Scramble. Motion uses only transform and opacity and respects the Reduce motion setting.
<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);
…Subscribe to Builder to see the full source.See pricing