Skip to content
Docs
Gibberish Text

Gibberish Text

A component that displays gibberish text initially and then reveals the actual text.

Loading...

Installation

CLI

pnpm dlx shadcn@latest add https://animata.design/r/text/gibberish-text.json

Manual

Run the following command

It will create a new file called gibberish-text.tsx inside the components/animata/text directory.

touch components/animata/text/gibberish-text.tsx

Paste the code

Open the newly created file and paste the following code:

import { useEffect, useState } from "react";
 
import { cn } from "@/lib/utils";
 
interface GibberishTextProps {
  /**
   * The text to animate.
   */
  text: string;
 
  /**
   * The class name to apply to each letter.
   */
  className?: string;
}
 
const Letter = ({ letter, className }: { letter: string; className?: string }) => {
  const [code, setCode] = useState(letter.toUpperCase().charCodeAt(0));
 
  useEffect(() => {
    let count = Math.floor(Math.random() * 10) + 5;
    const interval = setInterval(() => {
      setCode(() => Math.floor(Math.random() * 26) + 65);
      count--;
      if (count === 0) {
        setCode(letter.toUpperCase().charCodeAt(0));
        clearInterval(interval);
      }
    }, 24);
 
    return () => clearInterval(interval);
  }, [letter]);
 
  const char = String.fromCharCode(code);
 
  return (
    <span
      className={cn("inline-block min-w-[1ch] font-mono text-center text-foreground", className)}
    >
      {char === " " ? "\u00A0" : char}
    </span>
  );
};
 
export default function GibberishText({ text, className }: GibberishTextProps) {
  return (
    <>
      {text.split("").map((letter, index) => {
        return <Letter className={className} letter={letter} key={`${index}-${letter}`} />;
      })}
    </>
  );
}

Credits

Built by hari

Edit this page on GitHub
Focus Blur ResolveGlitch text