Craft UI - Beautiful React Components

Basic Text Scramble

Text Scramble on Hover

Text Scramble with Custom Chars

Usage Guide

Install the clsx and tailwind-merge packages:

npm install clsx tw-merge

Next, add cn utility function in your project:

import { twMerge } from "tailwind-merge";
import { clsx, type ClassValue } from "clsx";

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

Copy and paste the following component source.

"use client";

import { cn } from "@/lib/utils";
import React, { useState, useEffect, useCallback } from "react";

interface PropType {
    children: string;
    speed?: number;
    duration?: number;
    trigger?: boolean;
    className?: string;
    characterSet?: string;
    as?: React.ElementType;
    onScrambleEnd?: () => void;
}

const defaultCharacterSet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

export default function TextScramble({
    children = "Hello, World!",
    speed = 50,
    duration = 3,
    trigger = true,
    className = "",
    characterSet = defaultCharacterSet,
    as: Component = "span",
    onScrambleEnd
}: PropType) {
    const [scrambledText, setScrambledText] = useState(children);

    const scrambleText = useCallback(() => {
        let currentIndex = 0;
        const endTime = Date.now() + duration * 1000;

        const scrambleInterval = setInterval(() => {
            if (Date.now() > endTime) {
                clearInterval(scrambleInterval);
                setScrambledText(children);
                onScrambleEnd && onScrambleEnd();
                return;
            }

            const scrambled = children
                .split("")
                .map((char, index) => {
                    if (char === " ") {
                        return " ";
                    }
                    return index < currentIndex
                        ? char
                        : characterSet[Math.floor(Math.random() * characterSet.length)];
                })
                .join("");

            setScrambledText(scrambled);
            currentIndex = Math.min(currentIndex + 1, children.length);
        }, speed);

        return () => clearInterval(scrambleInterval);
    }, [children, duration, speed, characterSet, onScrambleEnd]);

    useEffect(() => {
        if (trigger) {
            const cleanup = scrambleText();
            return cleanup;
        } else {
            setScrambledText(children);
        }
    }, [trigger, scrambleText, children]);

    return <Component className={cn("font-mono", className)}>{scrambledText}</Component>;
}

Props

Prop	Type	Description	Default
children	string	The text to display	"Hello, World!"
duration	number	Duration of the scrambling animation (s).	3
speed	number	The speed at which scrambling happens (ms).	50
trigger	boolean	Trigger the animation.	true
characterSet	string	Custom characters used for scrambling.	[A-Za-z0-9]
className	string	Additional class names for styling.	_
as	string	HTML tag name to wrap the text inside	_
onScrambleEnd	function	Function to run after the scrambling ends	_