"use client";

import * as React from "react";
import { motion } from "framer-motion";

import { cn } from "@/lib/utils";

interface ScrambleTextProps {
  text: string;
  className?: string;
  /**
   * Characters used for scrambling
   * @default "ABCDEFGHJKLMNPQRSTUVWXYZ123456789"
   */
  characters?: string;
  /**
   * Interval speed in milliseconds
   * @default 30
   */
  speed?: number;
  /**
   * Total duration in milliseconds
   * @default 1200
   */
  duration?: number;
  /**
   * Delay before starting in milliseconds
   * @default 0
   */
  delay?: number;
  /**
   * Render as different element
   * @default "span"
   */
  as?: "span" | "p" | "h1" | "h2" | "h3" | "h4" | "div";
  /**
   * Callback when scramble completes
   */
  onComplete?: () => void;
}

function ScrambleText({
  text,
  className,
  characters = "ABCDEFGHJKLMNPQRSTUVWXYZ123456789",
  speed = 30,
  duration = 1200,
  delay = 0,
  as: Component = "span",
  onComplete,
}: ScrambleTextProps) {
  const [displayText, setDisplayText] = React.useState(text);

  React.useEffect(() => {
    let frame = 0;
    let intervalId: ReturnType<typeof setInterval> | null = null;
    const steps = Math.max(1, Math.floor(duration / speed));
    const revealPerStep = text.length / steps;
    const startTimeout = setTimeout(() => {
      intervalId = setInterval(() => {
        frame += 1;
        const revealCount = Math.min(text.length, Math.floor(frame * revealPerStep));

        const next = text
          .split("")
          .map((char, index) => {
            if (index < revealCount) return char;
            const rand = Math.floor(Math.random() * characters.length);
            return characters[rand] ?? char;
          })
          .join("");

        setDisplayText(next);

        if (revealCount >= text.length) {
          if (intervalId) {
            clearInterval(intervalId);
          }
          setDisplayText(text);
          onComplete?.();
        }
      }, speed);
    }, delay);

    return () => {
      clearTimeout(startTimeout);
      if (intervalId) {
        clearInterval(intervalId);
      }
    };
  }, [characters, delay, duration, speed, text, onComplete]);

  return (
    <motion.span
      className={cn("inline-flex text-foreground", className)}
      initial={{ opacity: 0, filter: "blur(6px)" }}
      animate={{ opacity: 1, filter: "blur(0px)" }}
      transition={{ duration: 0.6, ease: "easeOut" }}
      aria-label={text}
    >
      <Component aria-hidden="true">{displayText}</Component>
    </motion.span>
  );
}

export { ScrambleText };
Scramble Text

Dependencies

Files

Installation
