タイピングしてる感じをJSで表現しました。

ひらがなからローマ字への変換に
https://github.com/WaniKani/WanaKana
を使っています。

kuromoji.jsあたりを使えば分かち書きや読み推定できるでしょうが、
辞書のダウンロードが重くなりがちなので、今回は定型文のみ対応しています。

元々はSvelte + TypeScriptで実装してましたが、
需要がなさそうなのでvanilla JSで書き直しました。

index.html

<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <style>
      .before-conversion {
        text-decoration: underline dotted;
      }
      .selecting-conversion {
        text-decoration: underline solid;
      }
    </style>
  </head>
  <body>
    <div class="typing-animation"></div>
    <script src="https://unpkg.com/wanakana"></script>
    <script src="./main.js"></script>
  </body>
</html>

main.js

document.addEventListener("DOMContentLoaded", () => {
  /**
   * 一文字あたりの入力にかかる時間（ミリ秒）です。
   */
  const charDuration = 200;

  /**
   * 指定された時間待ちます。
   * @param {number} timeout ミリ秒
   * @returns {Promise<void>} Promise
   */
  function wait(timeout) {
    return new Promise((resolve) => setTimeout(resolve, timeout));
  }

  /**
   * ローマ字からひらがな、ひらがなから漢字となる変換を表します。
   * @param {string} completed 変換後の文字列
   * @param {number} duration 変換アニメーションの待機時間
   * @param {ConversionEntry[]} children 子要素となる変換の配列
   * @param {string} styleClass 子要素の変換アニメーション中に適用されるCSSクラス名
   * @param {string} convertingClass この要素の変換アニメーション中に適用されるCSSクラス名
   */
  function ConversionEntry(
    completed,
    duration,
    children,
    styleClass,
    convertingClass
  ) {
    /**
     * 変換後の文字列
     */
    this.completed = completed;

    /**
     * 変換後の文字数
     */
    this.count = completed.length;

    /**
     * 変換アニメーションを直列に実行します。
     * @param {TypingRenderer} renderer 描画ロジック
     * @returns {Promise<void>} Promise
     */
    this.animate = function (renderer) {
      if (styleClass) {
        renderer.intoSpan(styleClass);
      }

      return children
        .reduce(
          (prev, child) => prev.then(() => child.animate(renderer)),
          Promise.resolve()
        )
        .then(() => {
          if (convertingClass) renderer.replaceClass(convertingClass);
        })
        .then(() => wait(duration))
        .then(() => {
          if (styleClass) {
            renderer.outOfSpan();
          }
          renderer.remove(
            children.reduce((prev, child) => prev + child.count, 0)
          );
          renderer.append(completed);
        });
    };
  }

  /**
   * 削除アニメーションを表します。
   * @param {number} removeCount
   */
  function RemoveEntry(removeCount) {
    /**
     * 削除アニメーションの待機時間は0です。
     */
    this.duration = 0;

    /**
     * 変換後の文字数は削除文字数の負数です。
     */
    this.count = -removeCount;

    /**
     * 一文字削除します。
     * @param {TypingRenderer} renderer 描画ロジック
     * @param {number} remains 残り削除文字数
     * @returns {Promise<void>} Promise
     */
    function removeOne(renderer, remains) {
      if (remains) {
        return wait(charDuration).then(() => {
          renderer.remove(1);
          return removeOne(renderer, --remains);
        });
      }
    }

    /**
     * 変換アニメーションを直列に実行します。
     * @param {TypingRenderer} renderer 描画ロジック
     * @returns {Promise<void>} Promise
     */
    this.animate = function (renderer) {
      return removeOne(renderer, removeCount);
    };
  }

  /**
   * 入力文字を表します。
   * @param {string} kanji 変換後の文字列
   * @param {string} kana ひらがな
   */
  function TypingInput(kanji, kana) {
    /**
     * 入力にかかる時間としてランダム性のあるミリ秒を返します。
     * @returns {number} ミリ秒
     */
    function randomDuration() {
      return Math.random() * charDuration * 2 + charDuration / 4;
    }

    const komojis = "ゃゅょぁぃぅぇぉ".split("");

    /**
     * ローマ字入力において一度に入力する単位の配列を返します。
     * @param {string} kana ひらがな
     * @returns {string[]} ひらがなの配列
     */
    function spreadKana(kana) {
      return kana.split("").reduce((prev, char) => {
        if (~komojis.indexOf(char) || prev[prev.length - 1] === "っ") {
          prev[prev.length - 1] += char;
        } else {
          prev.push(char);
        }

        return prev;
      }, []);
    }

    const convEntries = spreadKana(kana).map((k) => {
      const romajis = wanakana.toRomaji(k).split("");
      romajis.pop();
      const romajiEntries = romajis.map(
        (r) => new ConversionEntry(r, randomDuration(), [])
      );
      return new ConversionEntry(k, charDuration, romajiEntries);
    });

    /**
     * この入力文字に相当する変換オブジェクトです。
     */
    this.conversion = new ConversionEntry(
      kanji,
      charDuration * 2,
      convEntries,
      "before-conversion",
      "selecting-conversion"
    );
  }

  /**
   * 入力としての文字削除を表します。
   * @param {number} removeCount 削除文字数
   */
  function TypingBackspace(removeCount) {
    this.conversion = new RemoveEntry(removeCount);
  }

  /**
   * 描画ロジックを表します。
   * @param {HTMLElement} element
   */
  function TypingRenderer(element) {
    const hierarchies = [element];

    /**
     * 現在カーソルのある要素を返します。
     * @returns {HTMLElement} HTML要素
     */
    this.current = function () {
      return hierarchies[hierarchies.length - 1];
    };

    /**
     * CSSクラスを指定したspan要素を作成し、その内部にカーソルを移動します。
     * @param {string} styleClass CSSクラス名
     */
    this.intoSpan = function (styleClass) {
      const span = document.createElement("span");
      span.classList.add(styleClass);
      this.current().appendChild(span);
      hierarchies.push(span);
    };

    /**
     * 現在のspan要素の外側へカーソルを移動します。
     */
    this.outOfSpan = function () {
      hierarchies.pop();
    };

    /**
     * 現在の要素のCSSクラスを置き換えます。
     * @param {string} styleClass CSSクラス
     */
    this.replaceClass = function (styleClass) {
      this.current().class = null;
      this.current().classList.add(styleClass);
    };

    /**
     * 文字列を追記します。
     * @param {string} str 文字列
     */
    this.append = function (str) {
      this.current().textContent = this.current().textContent + str;
    };

    /**
     * 文字列を指定の長さ削除します。
     * @param {number} removeCount 削除する文字列の長さ
     */
    this.remove = function (removeCount) {
      const remains = removeCount - this.current().textContent.length;
      this.current().textContent = this.current().textContent.substring(
        0,
        this.current().textContent.length - removeCount
      );
      if (remains > 0) {
        const prev = this.current().previousElementSibling;
        hierarchies.pop().remove();
        if (prev) this.hierarchies.push(prev);

        this.remove(remains);
      }
    };
  }

  /**
   * アニメーションの描画を開始します。
   * @param {string} completed アニメーション完了後の文字列
   * @param {HTMLElement} element 描画先のHTML要素
   * @param {(TypingInput | TypingBackspace)[]} typings 入力文字オブジェクトの配列
   */
  function render(completed, element, typings) {
    new ConversionEntry(
      completed,
      0,
      typings.map((e) => e.conversion)
    ).animate(new TypingRenderer(element));
  }

  const typings = [
    new TypingInput("素早い", "すばやい"),
    new TypingInput("茶色の", "ちゃいろの"),
    new TypingInput("キツネは", "きつねは"),
    new TypingInput("少し", "すこし"),
    new TypingBackspace(2),
    new TypingInput("のろまな", "のろまな"),
    new TypingInput("犬を", "いぬを"),
    new TypingInput("飛び越える", "とびこえる"),
  ];

  const targetElement = document.querySelector(".typing-animation");

  render("素早い茶色のキツネはのろまな犬を飛び越える", targetElement, typings);
});