{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"A line of text starts as glyph noise and resolves, character by character, into the real words; holds for a beat; then scrambles back and loops. Click it to "},{"type":"text","text":"edit in place","marks":[{"type":"bold"}]},{"type":"text","text":" (up to 150 characters) and hit *Try It* — your text gets the same treatment. It reads as *decoding* rather than *glitching* because characters settle left to right and never re-scramble once resolved."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Try it"}]},{"type":"paragraph","content":[{"type":"text","text":"Watch the tile above loop; click the text to try your own line."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"How it works"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A "},{"type":"text","text":"requestAnimationFrame","marks":[{"type":"code"}]},{"type":"text","text":" loop advances a \"resolved\" cursor; characters before it show the real glyph, characters after it show a random one from a small glyph set, re-rolled every few frames so the noise shimmers."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spaces are never scrambled, so word shapes stay readable during the resolve."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The loop has three phases — resolve → hold → scramble — with timings at the top of the file."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editing swaps the display for an "},{"type":"text","text":"","marks":[{"type":"code"}]},{"type":"text","text":" with the same font metrics, so nothing jumps."}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Settings"}]},{"type":"paragraph","content":[{"type":"text","text":"The gear in the top corner of the demo (14px, "},{"type":"text","text":"Settings","marks":[{"type":"code"}]},{"type":"text","text":" icon) opens a menu of this lab's controls; every change updates the demo live. Save keeps your values in the browser, Reset restores the defaults, and a universal \"Hide controls\" switch hides every lab's gear at once (a small \"show controls\" link brings it back)."}]},{"type":"enhancedImage","attrs":{"src":"/labs/shots/scramble-settings.png","alt":"The Scramble settings menu: resolve and scramble speed, hold, glyph set, custom glyphs, loop, scramble spaces","title":"The Scramble settings menu: resolve and scramble speed, hold, glyph set, custom glyphs, loop, scramble spaces","width":null}},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","content":[{"type":"paragraph","content":[{"type":"text","text":"Control"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"type":"text","text":"Type"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"type":"text","text":"Default"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"type":"text","text":"Range or options"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Resolve speed"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"range"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"33ms/char"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"8ms/char to 150ms/char"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Hold"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"range"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"2000ms"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"200ms to 6000ms"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Scramble speed"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"range"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"33ms/char"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"8ms/char to 150ms/char"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Glyph set"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"select"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Windle classic"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Windle classic, Blocks, Binary, Matrix, Custom"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom glyphs"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"text"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"(empty)"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"free text, used when Glyph set is Custom"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Loop"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"toggle"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"on"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"on/off"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Scramble spaces"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"toggle"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"off"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"on/off"}]}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Going live: pass "},{"type":"text","text":"showControls={false}","marks":[{"type":"code"}]},{"type":"text","text":" to hide the gear in production, or keep it and let visitors dial it in."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Install"}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Download "},{"type":"text","text":"ScrambleText.tsx","marks":[{"type":"code"}]},{"type":"text","text":" and drop it in (client component). No dependencies."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Change "},{"type":"text","text":"DEFAULT_TEXT","marks":[{"type":"code"}]},{"type":"text","text":" and, if you like, "},{"type":"text","text":"GLYPHS","marks":[{"type":"code"}]},{"type":"text","text":" and the three timing constants."}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Use"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"type":"text","text":"import ScrambleText from \"@/components/ScrambleText\";\n\nexport default function Hero() {\n return ;\n}"}]},{"type":"paragraph","content":[{"type":"text","text":"To drive it from a prop, replace the "},{"type":"text","text":"useState(DEFAULT_TEXT)","marks":[{"type":"code"}]},{"type":"text","text":" initializer with a "},{"type":"text","text":"text","marks":[{"type":"code"}]},{"type":"text","text":" prop and remove the edit affordance if you don't want visitors changing it."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"The source"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"type":"text","text":"// Lab: \"Scramble/Unscramble Text\". Text resolves out of glyph noise, holds,\n// scrambles back, loops. Click the text to edit it in place (≤150 chars, wraps);\n// \"Try It\" (a bigger FREE-style button, centered) arms when you type, applies\n// your text, and disarms until you type again.\n// Credit: the resolve-out-of-noise technique and glyph set come from Justin Windle's\n// \"Text Scramble Effect\" (CodePen, MIT): https://codepen.io/soulwire/pen/mErPAK\n\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport LabSettings, { useLabSettings, type LabSettingSchema, type LabSettingsValue } from \"@/components/labs/LabSettings\";\n\nconst DEFAULT = \"Use it on a single sentence, or a whole paragraph.\";\nconst GLYPHS_WINDLE = \"!<>-_\\\\/[]{}—=+*^?#________\";\nconst GLYPHS_BLOCKS = \"▁▂▃▄▅▆▇█\";\nconst GLYPHS_BINARY = \"01\";\nconst GLYPHS_MATRIX = \"ﾊﾐﾋｰｳｼﾅﾓﾆｻﾜﾂｵﾘｱﾎﾃﾏｹﾒｴｶｷﾑﾕﾗｾﾈｽﾀﾇﾍ\";\nconst GLYPH_SETS: Record = { windle: GLYPHS_WINDLE, blocks: GLYPHS_BLOCKS, binary: GLYPHS_BINARY, matrix: GLYPHS_MATRIX };\nconst MAX = 150;\n\nexport const SCRAMBLE_SETTINGS: LabSettingSchema = [\n { key: \"resolveMs\", label: \"Resolve speed\", kind: \"range\", default: 33, min: 8, max: 150, step: 1, unit: \"ms/char\" },\n { key: \"holdMs\", label: \"Hold\", kind: \"range\", default: 2000, min: 200, max: 6000, step: 100, unit: \"ms\" },\n { key: \"scrambleMs\", label: \"Scramble speed\", kind: \"range\", default: 33, min: 8, max: 150, step: 1, unit: \"ms/char\" },\n {\n key: \"glyphs\",\n label: \"Glyph set\",\n kind: \"select\",\n default: \"windle\",\n options: [\n { value: \"windle\", label: \"Windle classic\" },\n { value: \"blocks\", label: \"Blocks\" },\n { value: \"binary\", label: \"Binary\" },\n { value: \"matrix\", label: \"Matrix\" },\n { value: \"custom\", label: \"Custom\" },\n ],\n },\n { key: \"customGlyphs\", label: \"Custom glyphs\", kind: \"text\", default: \"\" },\n { key: \"loop\", label: \"Loop\", kind: \"toggle\", default: true },\n { key: \"scrambleSpaces\", label: \"Scramble spaces\", kind: \"toggle\", default: false },\n];\n\nfunction resolveGlyphs(value: LabSettingsValue): string {\n const key = String(value.glyphs ?? \"windle\");\n if (key === \"custom\") {\n const custom = String(value.customGlyphs ?? \"\");\n return custom.length > 0 ? custom : GLYPHS_WINDLE;\n }\n return GLYPH_SETS[key] ?? GLYPHS_WINDLE;\n}\n\nexport default function ScrambleText() {\n const { value, setValue, reset, save } = useLabSettings(SCRAMBLE_SETTINGS, \"lab:scramble-text\");\n const [source, setSource] = useState(DEFAULT);\n const [run, setRun] = useState(0); // bump to restart the animation from full scramble\n const [text, setText] = useState(DEFAULT);\n const [editing, setEditing] = useState(false);\n const [draft, setDraft] = useState(DEFAULT);\n const [armed, setArmed] = useState(false);\n const sourceRef = useRef(source);\n sourceRef.current = source;\n const box = useRef(null);\n\n useEffect(() => {\n if (editing) return; // freeze the animation while editing\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) { setText(source); return; }\n const glyphs = resolveGlyphs(value);\n const resolveMs = Math.max(1, Number(value.resolveMs) || 1);\n const holdMs = Math.max(0, Number(value.holdMs) || 0);\n const scrambleMs = Math.max(1, Number(value.scrambleMs) || 1);\n const loop = value.loop !== false;\n const scrambleSpaces = Boolean(value.scrambleSpaces);\n let raf = 0, phase: \"in\" | \"hold\" | \"out\" = \"in\", phaseStart = performance.now();\n const render = (t: string, revealed: number) =>\n t.split(\"\").map((ch, i) => (!scrambleSpaces && ch === \" \") ? \" \" : revealed > i ? ch : glyphs[Math.floor(Math.random() * glyphs.length)]).join(\"\");\n const tick = (now: number) => {\n const t = sourceRef.current;\n if (phase === \"in\") {\n const revealed = Math.floor((now - phaseStart) / resolveMs);\n setText(render(t, revealed));\n if (revealed >= t.length) { phase = \"hold\"; phaseStart = now; }\n } else if (phase === \"hold\") {\n if (now - phaseStart >= holdMs) { phase = \"out\"; phaseStart = now; }\n } else {\n const revealed = t.length - Math.floor((now - phaseStart) / scrambleMs);\n setText(render(t, revealed));\n if (revealed <= 0) {\n if (!loop) return; // one cycle and stop, fully scrambled\n phase = \"in\"; phaseStart = now;\n }\n }\n raf = requestAnimationFrame(tick);\n };\n raf = requestAnimationFrame(tick);\n return () => cancelAnimationFrame(raf);\n }, [source, editing, run, value.resolveMs, value.holdMs, value.scrambleMs, value.glyphs, value.customGlyphs, value.loop, value.scrambleSpaces]);\n\n useEffect(() => { if (editing) box.current?.focus(); }, [editing]);\n\n const textClass = \"w-full break-words text-center font-mono text-[14px] leading-[22px] tracking-[0.04em]\";\n\n return (\n

\n \n {editing ? (\n { setDraft(e.target.value); setArmed(e.target.value.trim().length > 0 && e.target.value.trim() !== source); }}\n onPointerDown={(e) => e.stopPropagation()}\n className={`${textClass} h26-scramble-edit`}\n aria-label=\"Text to scramble\"\n />\n ) : (\n { e.preventDefault(); setDraft(source); setEditing(true); }}\n className={`${textClass} h26-scramble-text h26-tip`}\n data-tip=\"Click to Change Text\"\n >\n {text}\n \n )}\n { e.preventDefault(); const next = draft.trim(); setSource(next); setText(next.replace(/[^ ]/g, \"_\")); setArmed(false); setEditing(false); setRun((r) => r + 1); }}\n className=\"h26-try mt-6\"\n >\n Try It\n \n

\n );\n}\n"}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Credits"}]},{"type":"paragraph","content":[{"type":"text","text":"Built on "},{"type":"text","text":"Text Scramble Effect","marks":[{"type":"link","attrs":{"href":"https://codepen.io/soulwire/pen/mErPAK","target":"_blank","rel":"noopener noreferrer"}}]},{"type":"text","text":" by Justin Windle (MIT). The looping phases, in-place editing and the React packaging were added here. If you build on this, please carry the credit forward the same way."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"License"}]},{"type":"paragraph","content":[{"type":"text","text":"MIT."}]}]}

More from the lab