Typewriter

Typewriter animations simulate the effect of text being typed out in real-time. This technique can be used to create a sense of anticipation and engagement as users watch the text appear on the screen.

Open in

Installation

npm install framer-motion

pnpm install framer-motion

yarn add framer-motion

bun add framer-motion

Copy and paste the following code into your project.

components/ui/typewriter.tsx

typewriter.tsx

"use client";

import { useEffect } from "react";
import { motion, useMotionValue, useTransform, animate } from "framer-motion";

export default function TextGenerateEffect({
  words,
  className = "",
}: {
  words: string;
  className?: string;
}) {
  const count = useMotionValue(0);
  const rounded = useTransform(count, (latest) => Math.round(latest));
  const displayText = useTransform(rounded, (latest) =>
    words.slice(0, latest)
  );

  useEffect(() => {
    const controls = animate(count, words.length, {
      type: "tween",
      duration: 2.5, // Increased from 1 to 2.5 seconds
      ease: "easeInOut",
    });
    return controls.stop;
  }, [words]);

  return (
    <motion.span className={className}>
      {displayText}
    </motion.span>
  );
};

Props

Prop

Type

Gradient Typewriter