Text scramble
A brief seeded text reveal with stable accessible wording and an explicit replay trigger.
TEXT / REVEAL
Made for the details.
A brief visual reveal keeps the final phrase available throughout.
Implementation
1"use client";2 3import {4 useEffect,5 useRef,6 useState,7 useSyncExternalStore,8 type HTMLAttributes,9} from "react";10 11export type TextScrambleProps = Omit<12 HTMLAttributes<HTMLSpanElement>,13 "children"14> & {15 text: string;16 /** Change this value to request one finite replay. Mounting alone stays still. */17 replayKey?: string | number;18 /** Reproducible replacement characters for the same replay frame. */19 seed?: number;20 /** Total resolve time in milliseconds; zero shows the final text immediately. */21 duration?: number;22};23 24const motionQuery = "(prefers-reduced-motion: reduce)";25 26function subscribeMotionPreference(listener: () => void) {27 const media = window.matchMedia(motionQuery);28 media.addEventListener("change", listener);