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 を使えば数行のコードで実装可能
オプションを組み合わせて自由にカスタマイズできる

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