50:I[707087,["/_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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"],"RegistryDependencies"] 51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52:T2983,"use client"; import { Fragment, useRef, type CSSProperties } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // Text that shuffles through other characters and settles into place. It can play once when the // text scrolls into view (letters resolve left to right), and it can scramble the letters near // the pointer as you move across it. // // The letters are real spans that React renders and owns. The scramble never edits their text. // It sets a data attribute, and a CSS overlay (::after) paints the random glyph on top of the // real letter, which is hidden for that moment. So the layout never jumps, React never loses a // node it expects, and changing the `text` prop is safe. export type TextScrambleRevealProps = { /** The words to show. Plain text. */ text: string; /** When it scrambles: "reveal" plays once on entering the view, "hover" reacts to the pointer, "both" does the two. */ mode?: "hover" | "reveal" | "both"; /** The random characters a letter shuffles through. Every character in the string is one choice. */ scrambleChars?: string; /** The colour of the random characters, and of the flash a letter leaves as it settles. Any CSS colour. */ scrambleColor?: string; /** How long one letter keeps shuffling, in seconds. Each letter varies a little around it. */ scrambleDuration?: number; /** How close the pointer must come to a letter to scramble it, in pixels. */ radius?: number; /** In "reveal" mode, the gap between one letter starting to settle and the next, in seconds. Long texts are sped up to finish in about two seconds. */ stagger?: number; /** Play the reveal only the first time it is seen (true), or every time it scrolls back into view (false). */ once?: boolean; /** Text size. A number is pixels, a string is any CSS size such as "clamp(18px, 4vw, 40px)". Leave it out to inherit. */ fontSize?: number | string; /** Line height, as a multiple of the text size. */ lineHeight?: number; /** Extra classes for the paragraph: font, colour, width. The text takes its colour from here. */ className?: string; }; type Job = { end: number; swapAt: number }; export function TextScrambleReveal({ text, mode = "both", scrambleChars = ".:·+*-", scrambleColor = "#00a8e8", scrambleDuration = 0.45, radius = 80, stagger = 0.01, once = true, fontSize, lineHeight = 1.3, className = "", }: TextScrambleRevealProps) { const boxRef = useRef(null); // Read at the moment they are needed, so changing them never restarts the effect const settings = useRef({ glyphs: [".", ":"], duration: scrambleDuration, radius, color: scrambleColor }); const glyphs = Array.from(scrambleChars).filter((c) => c.trim() !== ""); settings.current = { glyphs: glyphs.length > 0 ? glyphs : ["."], duration: scrambleDuration, radius, color: scrambleColor }; useGSAP( () => { const box = boxRef.current; if (!box) return; const letters = Array.from(box.querySelectorAll("[data-letter]")); if (letters.length === 0) return; // Reduced motion: no scrambling at all. The text is simply there. const mm = gsap.matchMedia(); mm.add("(prefers-reduced-motion: no-preference)", () => { const wantsReveal = mode === "reveal" || mode === "both"; const wantsHover = mode === "hover" || mode === "both"; const jobs = new Map(); // letters that are shuffling right now const flashes = new Set(); // the colour fade after a letter settles let centres: { x: number; y: number }[] = []; let ticking = false; let ready = !wantsReveal; // hover waits until the reveal has started let last: { x: number; y: number } | null = null; const randomGlyph = () => settings.current.glyphs[Math.floor(Math.random() * settings.current.glyphs.length)] ?? "."; const swapGap = () => 0.04 + Math.random() * 0.03; // Settling: show the real letter again and fade it from the scramble colour const settle = (letter: HTMLElement) => { delete letter.dataset.s; const flash = letter.animate([{ color: settings.current.color }], { duration: 650, easing: "ease-out" }); flashes.add(flash); flash.onfinish = flash.oncancel = () => flashes.delete(flash); }; const tick = () => { const now = gsap.ticker.time; jobs.forEach((job, index) => { const letter = letters[index]!; if (now >= job.end) { jobs.delete(index); settle(letter); } else if (now >= job.swapAt) { letter.dataset.s = randomGlyph(); job.swapAt = now + swapGap(); } }); if (jobs.size === 0) { gsap.ticker.remove(tick); ticking = false; } }; // One shared ticker loop for every shuffling letter. It sleeps when nothing is shuffling. const scramble = (index: number, delay = 0) => { const now = gsap.ticker.time; const length = settings.current.duration * (0.75 + Math.random() * 0.5); letters[index]!.dataset.s = randomGlyph(); jobs.set(index, { end: now + delay + length, swapAt: now + swapGap() }); if (!ticking) { ticking = true; gsap.ticker.add(tick); } }; // Where each letter is, relative to the paragraph. Measured once, not on every pointer move. const measure = () => { const frame = box.getBoundingClientRect(); centres = letters.map((letter) => { const r = letter.getBoundingClientRect(); return { x: r.left - frame.left + r.width / 2, y: r.top - frame.top + r.height / 2 }; }); }; const resize = new ResizeObserver(measure); resize.observe(box); let fontsDone = false; document.fonts?.ready.then(() => { if (!fontsDone) measure(); }); // The reveal: every letter starts as a random glyph and settles in reading order const hideAll = () => { letters.forEach((letter) => { letter.dataset.s = randomGlyph(); }); }; const playReveal = () => { jobs.forEach((_job, index) => delete letters[index]!.dataset.s); jobs.clear(); const step = Math.min(stagger, 2 / letters.length); letters.forEach((_letter, index) => scramble(index, index * step)); ready = true; }; let view: IntersectionObserver | null = null; if (wantsReveal) { hideAll(); view = new IntersectionObserver( ([entry]) => { if (!entry) return; if (entry.isIntersecting) { playReveal(); if (once) view?.disconnect(); } else if (!once) { // Left the screen: get ready to play again jobs.clear(); hideAll(); ready = false; } }, { threshold: 0.35 }, ); view.observe(box); } // Hover: scramble every letter within `radius` of the path the pointer just travelled, // so a fast flick leaves no gaps. const touch = (x: number, y: number) => { const from = last ?? { x, y }; const dx = x - from.x; const dy = y - from.y; const lengthSquared = dx * dx + dy * dy; const reach = settings.current.radius; centres.forEach((c, index) => { if (jobs.has(index)) return; const along = lengthSquared === 0 ? 0 : Math.max(0, Math.min(1, ((c.x - from.x) * dx + (c.y - from.y) * dy) / lengthSquared)); const ox = c.x - (from.x + dx * along); const oy = c.y - (from.y + dy * along); if (ox * ox + oy * oy < reach * reach) scramble(index); }); last = { x, y }; }; const onMove = (event: PointerEvent) => { if (!ready || !event.isPrimary) return; const frame = box.getBoundingClientRect(); touch(event.clientX - frame.left, event.clientY - frame.top); }; const onLeave = () => { last = null; }; if (wantsHover) { box.addEventListener("pointermove", onMove); box.addEventListener("pointerdown", onMove); box.addEventListener("pointerleave", onLeave); box.addEventListener("pointercancel", onLeave); } return () => { fontsDone = true; gsap.ticker.remove(tick); resize.disconnect(); view?.disconnect(); box.removeEventListener("pointermove", onMove); box.removeEventListener("pointerdown", onMove); box.removeEventListener("pointerleave", onLeave); box.removeEventListener("pointercancel", onLeave); flashes.forEach((flash) => flash.cancel()); flashes.clear(); jobs.clear(); // Put the real letters back, so a re-run (or a change of props) starts clean letters.forEach((letter) => delete letter.dataset.s); }; }); return () => mm.revert(); }, { scope: boxRef, dependencies: [text, mode, once, stagger], revertOnUpdate: true }, ); const words = text.trim().split(/\s+/).filter(Boolean); return (

{/* Screen readers get the real sentence once. The letters below are only the picture of it. */} {text}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"gsap"}]]}]}],["$","li","@gsap/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40gsap%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@gsap/react"}]]}]}]]}],["$","$L50",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/dimaac/text-scramble-reveal/text-scramble-reveal.tsx","content":"$52","type":"registry:component","target":"components/dimaac/text-scramble-reveal.tsx"}],"className":"h-[70svh] min-h-80"}]]}]