Typewriter Effect for React

"use client";

import { motion } from "framer-motion";
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

interface TypewriterProps {
  phrases: readonly string[];
  className?: string;
  cursorClassName?: string;
  trigger?: "mount" | "inView";
  typeSpeed?: number;
  deleteSpeed?: number;
  pauseDuration?: number;
  cursorBlinkDuration?: number;
  cursorBlinkEasing?:
    | "easeInOut"
    | "easeIn"
    | "easeOut"
    | "linear"
    | [number, number, number, number];
  inViewThreshold?: number;
}

export function Typewriter({
  phrases,
  className,
  cursorClassName,
  trigger = "inView",
  typeSpeed = 100,
  deleteSpeed = 50,
  pauseDuration = 2000,
  cursorBlinkDuration = 0.5,
  cursorBlinkEasing = "easeInOut",
  inViewThreshold = 0.3,
}: TypewriterProps) {
  const [phraseIndex, setPhraseIndex] = useState(0);
  const [display, setDisplay] = useState("");
  const [deleting, setDeleting] = useState(false);
  const [inView, setInView] = useState(trigger === "mount");
  const ref = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    if (trigger !== "inView") {
      return;
    }
    const el = ref.current;
    if (!el) {
      return;
    }
    const obs = new IntersectionObserver(
      ([e]) => setInView(e?.isIntersecting ?? false),
      {
        threshold: inViewThreshold,
      },
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [trigger, inViewThreshold]);

  const shouldRun = trigger === "mount" ? true : inView;

  useEffect(() => {
    if (!shouldRun) {
      return;
    }
    const phrase = phrases[phraseIndex] ?? "";
    if (deleting) {
      if (display.length > 0) {
        const t = setTimeout(
          () => setDisplay(display.slice(0, -1)),
          deleteSpeed,
        );
        return () => clearTimeout(t);
      }
      setDeleting(false);
      setPhraseIndex((phraseIndex + 1) % phrases.length);
      return;
    }
    if (display.length < phrase.length) {
      const t = setTimeout(
        () =>
          setDisplay(phrase.slice(0, display.length + 1)),
        typeSpeed + Math.random() * 40,
      );
      return () => clearTimeout(t);
    }
    const t = setTimeout(
      () => setDeleting(true),
      pauseDuration,
    );
    return () => clearTimeout(t);
  }, [
    shouldRun,
    display,
    deleting,
    phraseIndex,
    phrases,
    typeSpeed,
    deleteSpeed,
    pauseDuration,
  ]);

  const cursorTransition = {
    duration: cursorBlinkDuration,
    ease: cursorBlinkEasing,
    repeat: Number.POSITIVE_INFINITY,
  };

  return (
    <span ref={ref} className={cn(className)}>
      {display}
      <motion.span
        animate={{ opacity: [1, 0] }}
        transition={cursorTransition}
        className={cn(
          "inline-block min-h-[1em] w-0.5 shrink-0 bg-current align-middle",
          cursorClassName,
        )}
        aria-hidden={true}
      />
    </span>
  );
}