DocsComponents
Star us
Docs

Gibberish Text

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

Installation

Update tailwind.config.js

theme: {
    extend: {
     colors: {
        foreground: "hsl(var(--foreground))",
     }
    },
  },

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]);
 
  return (
    <span className={cn("whitespace-pre text-foreground", className)}>
      {String.fromCharCode(code)}
    </span>
  );
};
 
/**
 * Animate each letter in the text using gibberish text effect.
 * Renders a random letter first and then animates it to the correct letter.
 */
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
Double UnderlineJitter Text