"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { motion } from "framer-motion"; import { Binary } from "lucide-react"; import { cn } from "@/lib/utils"; const CHARS = "ABCDEFGHJKLMNPQRSTUVWXYZ0123456789/<>[]{}=+*#%"; // Deterministic 2D hash in [0,1). No Math.random / Date.now, so it is SSR safe. function noise(a: number, b: number) { const n = Math.sin(a * 127.1 + b * 311.7) * 43758.5453; return n - Math.floor(n); } type CellState = "locked" | "scramble" | "glitch"; type Cell = { ch: string; state: CellState }; export function ScrambleText({ text, className, scrambleSpeed = 40, revealDelay = 3, loop = false, loopDelay = 4200, idle = true, caret = true, }: { text: string; className?: string; /** Milliseconds per animation frame. */ scrambleSpeed?: number; /** Frames each character stays scrambled before it locks in. */ revealDelay?: number; /** Automatically re-run the decode on a timer. */ loop?: boolean; /** Milliseconds to rest before an auto re-decode when `loop` is on. */ loopDelay?: number; /** Keep a few settled characters flickering at rest so it never looks dead. */ idle?: boolean; /** Show a blinking terminal caret. */ caret?: boolean; }) { const initial = useMemo( () => text.split("").map((ch) => ({ ch, state: "locked" as const })), [text] ); const [cells, setCells] = useState(initial); // Per-character lock time (in frames), left-to-right with a little organic jitter. const lockAt = useMemo(() => { return text.split("").map((ch, i) => ch === " " ? 0 : i * revealDelay + Math.round(noise(i, 1) * 5) ); }, [text, revealDelay]); const maxLock = useMemo( () => lockAt.reduce((m, v) => Math.max(m, v), 0), [lockAt] ); // Bumped on hover; the animation loop watches it to re-run a decode on demand. const triggerRef = useRef(0); useEffect(() => { setCells(initial); let raf = 0; let last = 0; let tick = 0; let mode: "decode" | "rest" = "decode"; let decodeStart = 0; let restStart = 0; let seenTrigger = triggerRef.current; let sig = ""; const glyph = (i: number, t: number) => CHARS[Math.floor(noise(i * 2.3 + 5, t) * CHARS.length)]; const chars = text.split(""); const loopFrames = Math.max(1, Math.round(loopDelay / scrambleSpeed)); const frame = (t: number) => { raf = requestAnimationFrame(frame); if (t - last < scrambleSpeed) return; last = t; tick += 1; // A hover since the last frame forces a fresh decode from the top. if (triggerRef.current !== seenTrigger) { seenTrigger = triggerRef.current; mode = "decode"; decodeStart = tick; } const next: Cell[] = new Array(chars.length); if (mode === "decode") { const elapsed = tick - decodeStart; for (let i = 0; i < chars.length; i++) { const ch = chars[i]; if (ch === " ") { next[i] = { ch: " ", state: "locked" }; } else if (elapsed >= lockAt[i]) { next[i] = { ch, state: "locked" }; } else { next[i] = { ch: glyph(i, tick), state: "scramble" }; } } if (elapsed > maxLock + 1) { mode = "rest"; restStart = tick; } } else { // Resting: settled text with sparse, deterministic flicker. const phase = Math.floor(tick / 2); for (let i = 0; i < chars.length; i++) { const ch = chars[i]; if (idle && ch !== " " && noise(i * 7.7 + 3, phase) > 0.9) { next[i] = { ch: glyph(i, tick), state: "glitch" }; } else { next[i] = { ch, state: "locked" }; } } if (loop && tick - restStart >= loopFrames) { mode = "decode"; decodeStart = tick; } } // Only commit when something actually changed. let nextSig = ""; for (let i = 0; i < next.length; i++) nextSig += next[i].ch + next[i].state[0]; if (nextSig !== sig) { sig = nextSig; setCells(next); } }; raf = requestAnimationFrame(frame); return () => cancelAnimationFrame(raf); }, [text, scrambleSpeed, lockAt, maxLock, loop, loopDelay, idle, initial]); return ( { triggerRef.current += 1; }} className={cn( "inline-flex cursor-default items-center whitespace-pre font-mono tabular-nums", className )} > {cells.map((c, i) => ( {c.ch} ))} {caret && ( )} ); } export default function Demo() { return (

{/* Ambient glow, kept restrained. */}

{/* Thin bright top edge. */}

{/* Slow scanline so the panel breathes at rest. */} {/* Header */}

Decoder

Live

{/* Headline that continuously re-decodes. */} {/* Secondary cipher line, faster loop, offset rhythm. */}

Hover the headline to re-run the decode. At rest it keeps a faint flicker, so the panel never reads as static.

{/* Meta footer */}

cipher aes-256 latency 12ms

); }

Scramble Text