Typewriter

1"use client";
2 
3import { useEffect, useState } from "react";
4 
5import { AnimatePresence, motion } from "motion/react";
6 
7import { cn } from "@/lib/utils";
8 
9interface TypewriterProps {
10  /**
11   * Array of strings to display
12   */
13  text: string[];
14  /**
15   * Delay between each letter (in seconds)
16   * @default 0.025
17   */
18  letterDelay?: number;
19  /**
20   * Duration of the box fade (in seconds)
21   * @default 0.125
22   */
23  boxFadeDuration?: number;
24  /**
25   * Duration of the text fade out (in seconds)
26   * @default 0.25
27   */
28  textFadeOutDuration?: number;
29  /**
30   * Delay between each text fade out (in ms)
31   * @default 5500
32   */
33  delayBetween?: number;
34  /**
35   * Additional classNames
36   */
37  className?: string;
38}
39 
40export const Typewriter = ({
41  text,
42  letterDelay = 0.025,
43  boxFadeDuration = 0.125,
44  textFadeOutDuration = 0.25,
45  delayBetween = 5500,
46  className,
47}: TypewriterProps) => {
48  const [currentIndex, setCurrentIndex] = useState(0);
49 
50  useEffect(() => {
51    const intervalId = setInterval(() => {
52      setCurrentIndex((prevIndex) => (prevIndex + 1) % text.length);
53    }, delayBetween);
54 
55    return () => clearInterval(intervalId);
56  }, []);
57 
58  return (
59    <p className={cn("text-sm font-light uppercase", className)}>
60      <AnimatePresence mode="wait">
61        <motion.span
62          key={currentIndex}
63          initial={{ opacity: 1 }}
64          exit={{ opacity: 0 }}
65          transition={{
66            duration: textFadeOutDuration,
67            ease: "easeInOut",
68          }}
69        >
70          {text[currentIndex].split("").map((char, index) => (
71            <span key={index} className="relative">
72              <motion.span
73                initial={{ opacity: 0 }}
74                animate={{ opacity: 1 }}
75                transition={{ delay: index * letterDelay, duration: 0 }}
76              >
77                {char}
78              </motion.span>
79              <motion.span
80                initial={{ opacity: 0 }}
81                animate={{ opacity: [0, 1, 0] }}
82                transition={{
83                  delay: index * letterDelay,
84                  times: [0, 0.1, 1],
85                  duration: boxFadeDuration,
86                  ease: "easeInOut",
87                }}
88                className="bg-foreground absolute inset-x-0.25 inset-y-0"
89              />
90            </span>
91          ))}
92        </motion.span>
93      </AnimatePresence>
94    </p>
95  );
96};