Smart Typewriter Component

export function useTypewriter(phrases, options = {}) {
  const { typeSpeed = 80, deleteSpeed = 45,
          pauseAfterType = 1800, pauseAfterDelete = 400 } = options;
  const [displayText, setDisplayText] = useState("");
  const [isTyping, setIsTyping] = useState(true);
  const [isDeleting, setIsDeleting] = useState(false);
  const phraseIndex = useRef(0);
  const charIndex = useRef(0);
  const timeout = useRef();

  const jitter = (b) => b * (0.7 + Math.random() * 0.6);

  useEffect(() => {
    const tick = () => {
      const phrase = phrases[phraseIndex.current];
      if (!isDeleting) {
        if (charIndex.current < phrase.length) {
          charIndex.current++;
          setDisplayText(phrase.slice(0, charIndex.current));
          timeout.current = setTimeout(tick, jitter(typeSpeed));
        } else {
          setIsTyping(false);
          timeout.current = setTimeout(() => setIsDeleting(true), pauseAfterType);
        }
      } else {
        if (charIndex.current > 0) {
          charIndex.current--;
          setDisplayText(phrase.slice(0, charIndex.current));
          timeout.current = setTimeout(tick, jitter(deleteSpeed));
        } else {
          setIsDeleting(false); setIsTyping(true);
          phraseIndex.current = (phraseIndex.current + 1) % phrases.length;
          timeout.current = setTimeout(tick, pauseAfterDelete);
        }
      }
    };
    timeout.current = setTimeout(tick, typeSpeed);
    return () => clearTimeout(timeout.current);
  }, [phrases, isDeleting]);

  return { displayText, isTyping, isDeleting };
}

.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
}

.typewriter-cursor.blinking {
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}