Text Scramble

Scrambles text with random characters then resolves to the target string. Pure React — no framer-motion required.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Text ScrambleScrambles text with random characters then resolves to the target string. Pure React — no framer-motion required.

"use client";
import { useState, useEffect } from "react";

const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%";

type TextScrambleProps = {
  text: string;
  speed?: number;
  loop?: boolean;
};

export function TextScramble({ text, speed = 40, loop = false }: TextScrambleProps) {
  const [display, setDisplay] = useState(text);

  useEffect(() => {
    let iteration = 0;
    let intervalId: ReturnType<typeof setInterval>;

    function scramble() {
      iteration = 0;
      clearInterval(intervalId);
      intervalId = setInterval(() => {
        setDisplay(
          text
            .split("")
            .map((char, i) => {
              if (char === " ") return " ";
              if (i < iteration) return text[i];
              return CHARS[Math.floor(Math.random() * CHARS.length)];
            })
            .join("")
        );
        if (iteration >= text.length) {
          clearInterval(intervalId);
          if (loop) setTimeout(scramble, 1800);
        }
        iteration += 1 / 3;
      }, speed);
    }

    scramble();
    return () => clearInterval(intervalId);
  }, [text, speed, loop]);

  return <span className="mp-text-scramble">{display}</span>;
}

Props

Prop	Type	Default	Description
textrequired	string	—	Target text to resolve to
speed	number	40	Scramble interval in ms
loop	boolean	false	Restart scramble after resolving