v3/packages/design-system/atoms/typist/Typist.tsx

import * as React from 'react';

type TypistProps = {
  resetTimeout: number;
  charTimeout: number;
  lines: string[];
};

export const Typist = (props: TypistProps) => {
  const [outputText, setOutputText] = React.useState('');
  const [currentLine, setCurrentLine] = React.useState(0);

  React.useEffect(() => {
    const fullLine = props.lines[currentLine];

    if (outputText === fullLine) {
      const timeout = setTimeout(() => {
        setOutputText('');
        setCurrentLine((currentLine + 1) % props.lines.length);
      }, props.resetTimeout);

      return () => {
        clearTimeout(timeout);
      };
    }

    const timeout = setTimeout(() => {
      setOutputText(fullLine.slice(0, outputText.length + 1));
    }, props.charTimeout);

    return () => {
      clearTimeout(timeout);
    };
  }, [currentLine, outputText]);

  return <>{outputText}</>;
};