テキストスクランブル — 動きの伝え方辞典

hover

text scramble / text shuffle

テキストスクランブル

ホバーすると文字がランダムに入れ替わり、左から順に元のテキストへ確定していく動き。サイバー・技術系の世界観と相性がよく、ナビゲーションやボタンのラベルで使われる。

01 — Demo video

Play live →

02 — Prompt template

テキストに text scramble を実装してください。

- ホバー開始で全文字をランダム文字に置き換え、左から1文字ずつ {{speed}}ms 間隔で元の文字に確定させる
- シャッフルに使う文字セットは{{charset}}
- 未確定の文字は2〜3フレームごとにランダムに入れ替え続ける(requestAnimationFrame使用)
- 実行中に再ホバーされたら前のアニメーションをキャンセルして最初からやり直す
- prefers-reduced-motion 時はシャッフルせず即座に元のテキストを表示する

テキストに text scramble を実装してください。

- ホバー開始で全文字をランダム文字に置き換え、左から1文字ずつ {{speed}}ms 間隔で元の文字に確定させる
- シャッフルに使う文字セットは{{charset}}
- 未確定の文字は2〜3フレームごとにランダムに入れ替え続ける(requestAnimationFrame使用)
- 実行中に再ホバーされたら前のアニメーションをキャンセルして最初からやり直す
- prefers-reduced-motion 時はシャッフルせず即座に元のテキストを表示する

テキストに text scramble を実装してください。

- ホバー開始で全文字をランダム文字に置き換え、左から1文字ずつ {{speed}}ms 間隔で元の文字に確定させる
- シャッフルに使う文字セットは{{charset}}
- 未確定の文字は2〜3フレームごとにランダムに入れ替え続ける(requestAnimationFrame使用)
- 実行中に再ホバーされたら前のアニメーションをキャンセルして最初からやり直す
- prefers-reduced-motion 時はシャッフルせず即座に元のテキストを表示する

03 — Params

speed(1文字の確定間隔 ms) — 範囲 15〜120 / 初期 45
小さいほど一瞬で確定する。60を超えるとじっくり解読される印象。
charset(シャッフルに使う文字) — 選択: 英大文字 / 数字 / カタカナ / 記号（初期: 英大文字）
英大文字は技術系、カタカナは和風サイバー。世界観で選ぶ。

04 — Vocab

charset — シャッフル中に表示するランダム文字の集合。英大文字なら技術系、カタカナなら和風サイバーの空気になる。
resolve — ランダム文字が元の文字に確定すること。左から順に確定すると「解読されていく」物語が生まれる。
rAF — requestAnimationFrame。描画フレームごとに処理を回すAPI。setIntervalよりカクつかない。
等幅フォント — 文字が入れ替わっても幅が揺れない。スクランブルはmonospaceのフォントと組むのが基本。

05 — NG → OK examples

言い方: 「「文字がバラバラってなるやつやって」」

なぜNG: 「バラバラ」が入れ替わりなのか分解して飛ぶのか不明。確定の方向(左から/ランダム順)、速度、使う文字も未定義で、意図と違う派手な演出が返ってきがち。

言い方: 「「text scrambleを実装。左から順に45ms間隔で確定、未確定文字はランダムに入れ替え続ける、文字セットは英大文字、実行中の再ホバーはキャンセル」」

なぜOK: 確定順・間隔・文字セット・多重起動の扱いまで指定している。特にキャンセル処理は言わないと壊れやすい。