テキスト・タイポ演出
文字そのものを動かして、見出しを主役にする。
文字そのものを動かして見出しを主役にするカテゴリ。タイプライター、文字スクランブル、グリッチ、流れるグラデーション、単語ごとのキネティック分割の5種で、いずれも見出し1行に当てる前提で作られている。原則はフォン・レストルフ効果。周りと違うものだけが記憶に残るので、動く文字が効くのは1画面に1箇所だけのときに限られる。本文や複数の見出しに散らすと、どれも目立たなくなるうえに読みにくくなる。ヒーローのキャッチコピーやセクションの冒頭など、1つの言葉を強く見せたい場面で引く。
使い分け複数のフレーズを順に見せるなら typewriter、1つの言葉を確定させる演出なら text-scramble、見出しを静かに出すなら kinetic-split。gradient-flow-text は動きが小さく常時表示に向く。glitch-text は世界観が合うときだけ。
まず見る3件
- 自動再生
タイプライター解説あり
Typewriter Effect
複数のフレーズを1文字ずつ打ち込み、カーソルが点滅。打つ→消す→次のフレーズをループする。
- 打つ 80ms／消す 40ms と、消す方を倍速にする。同じ速さだと消えるのを打つのと同じだけ待たされる
- 打ち終わりに 1,200ms 止める。ここを削ると読み切る前に消え始め、何を言っていたか残らない
- setTimeout の再帰で 1 文字ずつ進め、visibilitychange で止める。タブを離れている間に進むと戻ったとき文字が飛ぶ
- JS
- クリック
キネティック分割
Kinetic Typography
見出しの単語が1つずつ下からスライドインしながらフェードイン。ボタンで何度でも再生。
- 各行を overflow: hidden のマスクにして、単語を下 60% から立ち上げる。マスク無しの上昇は「浮く」、マスクありは「現れる」
- 遅延は 100ms＋160ms×順番。3 語で最後が 420ms 後に動き出し、全体 1 秒以内に収まる
- transform は (.22,1,.36,1) のオーバーシュート無し ease-out、opacity は ease と別カーブ。位置と濃さを同じカーブにすると硬い
- JS
- クリック
文字スクランブル
Text Scramble
ランダム文字がパラパラ変化しながら目的の文字列に次第に確定していく。ボタンで再生。
- 確定は左から 160ms（4 回転）ごと。全文字が同時に決まると「差し替え」に見え、順に決まると「解読」に見える
- 差し替えは 40ms 刻み。60fps の 2〜3 フレームごとで、これより速いと文字が読めず灰色の帯になる
- 等幅フォント（Courier）と letter-spacing 0.1em。可変幅だとランダム文字の幅で単語が左右に揺れる
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| タイプライター Typewriter Effect | 自動再生 | JS | ヒーローで複数の言い方を順に見せる・検索欄・チャットの入力例の提示 | default |
| 文字スクランブル Text Scramble | クリック | JS | 見出しの切替をデジタルな演出で見せる・ボタン操作で単語を次々に確定させる場面 | default / hover / focus / disabled |
| グリッチ Glitch Text | ホバー | JS | ゲーム・テック系のロゴ見出し・ホバー／タップで一瞬だけ反応する演出 | default / hover / focus / active |
| グラデ流れ文字 Animated Gradient Text | 自動再生 | CSSのみ | ブランドカラーの見出しに光を流す・JS なしの常時装飾 | default |
| キネティック分割 Kinetic Typography | クリック | JS | ヒーロー見出しを単語ごとに立ち上げる・3〜4 語の短いスローガン | default / hover / focus / disabled |
すべての見本（5件）
- 自動再生
タイプライター解説あり
Typewriter Effect
複数のフレーズを1文字ずつ打ち込み、カーソルが点滅。打つ→消す→次のフレーズをループする。
- JS
- クリック
文字スクランブル
Text Scramble
ランダム文字がパラパラ変化しながら目的の文字列に次第に確定していく。ボタンで再生。
- JS
- ホバー
グリッチ
Glitch Text
見出しのRGBがずれ、ノイズ状のチラつきでグリッチエフェクトを演出。タップ/ホバーで発火。
- JS
- 自動再生
グラデ流れ文字
Animated Gradient Text
background-clip:text を使い、藍系グラデーションが左から右へ流れ続ける見出し演出。
- CSSのみ
- クリック
キネティック分割
Kinetic Typography
見出しの単語が1つずつ下からスライドインしながらフェードイン。ボタンで何度でも再生。
- JS