60:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 61:T1342,"use client"; import { useCallback, useEffect, useRef } from "react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; const GLYPHS = "abcdefghijklmnopqrstuvwxyz0123456789#%&*+=/<>"; // Head start before the first character settles, so the noise registers. const LEAD = 180; // Each character settles this long after the one before it. const STAGGER = 45; // New noise roughly 25 times a second. Changing it every frame reads as // flicker rather than decoding. const TICK = 40; // One character cell wide, cap height on the baseline, so it sits exactly // where the letter it covers will land. Letter spacing skips inline blocks, // so the margin applies tracking-tight by hand to keep the width exact. const CURSOR = "inline-block h-[0.72em] w-[1ch] mr-[-0.025em] bg-current align-baseline"; // Noise is quieter than the settled text, so the eye reads the decoded part // as the word and the rest as signal still coming in. const AHEAD = "opacity-35"; function noise(original: string) { const glyph = GLYPHS[Math.floor(Math.random() * GLYPHS.length)]; return original === original.toUpperCase() ? glyph.toUpperCase() : glyph; } // Writes straight to the node every frame, so decoding never re-renders React. export function useScramble(text: string) { const ref = useRef(null); const frame = useRef(0); const reduceMotion = useReducedMotion(); useEffect(() => () => cancelAnimationFrame(frame.current), []); const scramble = useCallback(() => { const node = ref.current; if (!node || reduceMotion) return; cancelAnimationFrame(frame.current); const chars = [...text]; const current = chars.map(noise); const start = performance.now(); let lastTick = start; let lastHead = -1; // A block cursor reads the word in: decoded text behind it, a faint // churn of noise ahead. Three nodes built once and rewritten in place, // so a frame is at most two text writes. const done = document.createTextNode(""); const cursor = document.createElement("span"); cursor.className = CURSOR; const ahead = document.createElement("span"); ahead.className = AHEAD; node.replaceChildren(done, cursor, ahead); const step = (now: number) => { const elapsed = now - start; const refresh = now - lastTick >= TICK; if (refresh) lastTick = now; // Characters settle strictly left to right, so everything before the // first unsettled one is final. let head = chars.length; for (let i = 0; i < chars.length; i++) { if (chars[i] !== " " && elapsed < LEAD + i * STAGGER) { head = i; break; } } if (head === chars.length) { node.textContent = text; return; } if (refresh) current.forEach((_, i) => (current[i] = noise(chars[i]))); if (refresh || head !== lastHead) { lastHead = head; done.data = chars.slice(0, head).join(""); // The cursor covers the character it is decoding, so the word keeps // its exact width the whole way through. ahead.textContent = chars .map((char, i) => (char === " " ? " " : current[i])) .slice(head + 1) .join(""); } frame.current = requestAnimationFrame(step); }; // Fill the first frame before hit testing, so the button never shrinks // under a stationary pointer and retriggers pointerenter. step(start); }, [text, reduceMotion]); return { ref, scramble }; } function ScrambleItem({ index, label }: { index: number; label: string }) { const { ref, scramble } = useScramble(label); return (

); } const ITEMS = ["Work", "Lab", "Writing", "Contact"]; export default function TextScrambleDemo() { return (

))}

); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L60",null,{"files":[{"path":"components/text-scramble.tsx","content":"$61","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]