Next.jsでタイピングアニメーションを実装する方法

はじめに

タイピングアニメーションは、テキストを一文字ずつ表示していく演出で、ヒーローエリアやキャッチコピーを目立たせたいときに便利です。

ここでは Next.js での実装方法を紹介します。

react-typed

今回紹介するのは react-typed を使う方法です。
Typed.js を React 向けにラップしたコンポーネントで、数行で導入できます。

インストール

npm install react-typed

実装例

"use client";
import { ReactTyped } from "react-typed";

export default function HeroTyping() {
  return (
    <h1>
      <ReactTyped
        strings={[
          "Next.jsでタイピングアニメーションを実装",
          "react-typedを使えば簡単に導入可能",
          "オプションも豊富でカスタマイズ自在"
        ]}
        typeSpeed={40}
        backSpeed={20}
        backDelay={1000}
        loop
        showCursor
        cursorChar="|"
      />
    </h1>
  );
}

※スタイルを除いた最小構成なので、適宜スタイリングをして使用してください。

主なオプション

オプション名	型	デフォルト値	説明
strings	string[]	[]	表示する文字列の配列
typeSpeed	number	50	1文字を入力する速さ（ms）
startDelay	number	0	タイピング開始までの待機時間（ms）
backSpeed	number	50	バックスペースの速さ（ms）
backDelay	number	700	バックスペースを始めるまでの待機時間（ms）
smartBackspace	boolean	true	前の文字列と次の文字列が共通の場合、共通部分を残す
shuffle	boolean	false	文字列配列をランダム順に表示
loop	boolean	false	繰り返し再生するか
loopCount	number	Infinity	繰り返す回数
attr	string	null	要素の属性値にテキストを入力する場合に指定
bindInputFocusEvents	boolean	false	入力フィールドにフォーカス時に制御イベントをバインド
contentType	"html" | "null"	"html"	HTMLを解釈して表示するか、プレーンテキストとして扱うか
fadeOut	boolean	false	バックスペースの代わりにフェードアウトさせる
fadeOutClass	string	"typed-fade-out"	フェードアウトに使うCSSクラス名
fadeOutDelay	number	500	フェードアウト開始までの遅延（ms）

まとめ

• タイピングアニメーションは簡単に導入できる演出
• react-typed を使えば数行のコードで実装可能
• オプションを組み合わせて自由にカスタマイズできる

タイピングアニメーションを効果的に活用すれば、サイトの第一印象を強くし、メッセージをより印象的に伝えることができますので、ぜひ実装してみてください。