DocsComponents
Star us
Docs

Staggered Letter

A staggered up/drop letter animation.

Installation

Install dependencies

npm install framer-motion

Run the following command

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

mkdir -p components/animata/text && touch components/animata/text/staggered-letter.tsx

Paste the code

Open the newly created file and paste the following code:

import { HTMLAttributes } from "react";
import { motion } from "framer-motion";
 
import { cn } from "@/lib/utils";
 
interface DropLetterProps extends HTMLAttributes<HTMLDivElement> {
  applyMask?: boolean;
 
  text?: string;
 
  delay?: number;
 
  direction?: "up" | "drop";
}
 
export default function StaggeredLetter({
  applyMask = true,
  text = "Animata",
  delay = 0.09,
  direction = "drop",
  className,
  ...props
}: DropLetterProps) {
  const common = "text-7xl font-bold drop-shadow-lg";
  return (
    <div
      className={cn(
        "relative flex flex-col items-center justify-center text-foreground",
        className,
      )}
      {...props}
    >
      {applyMask && <div className={cn(common, "absolute text-gray-400")}>{text}</div>}
      <div className="flex">
        {text.split("").map((letter, index) => (
          <motion.div
            className={common}
            initial={{ opacity: 0, y: direction === "up" ? 150 : -150 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              delay: index * delay,
            }}
            key={letter}
          >
            {letter === " " ? <span>&nbsp;</span> : letter}
          </motion.div>
        ))}
      </div>
    </div>
  );
}

Credits

Built by Bibek Bhattarai

Edit this page on GitHub
Split TextSwap Text