カラーウェーブ — 動きの伝え方辞典

text

color wave / character color sweep

カラーウェーブ

薄く沈めた見出しの上を、アクセント色の発光が1文字ずつ波のように走り抜け、通過した文字が本来の色で定着していくリビール。文字を動かさずに色だけで読ませる順序を作れるのが強み。

01 — Demo video

Play live →

02 — Prompt template

見出しに color wave(文字色の波によるリビール)を実装してください。

- 見出しを1文字ずつ <span> に分割する(空白は white-space: pre で保持)
- 初期状態は最終色のまま opacity を {{dim}}% まで落として沈めておく
- {{batch}} 文字を1組として、組ごとに {{stagger}}ms ずつ遅らせて先頭から発火させる
- 発火した文字は 120ms でアクセント色 + opacity 1 まで上がり、{{hold}}ms 保持したあと 120ms で最終色へ戻る(opacity は 1 のまま)
- 動かすのは color と opacity だけ。文字送り(letter-spacing / width / margin)は変えずリフローさせない
- 分割で font-kerning が崩れるため、分割した span を含む要素に font-kerning: none を指定する
- prefers-reduced-motion 時は波を再生せず、最初から最終色 + opacity 1 で表示する

見出しに color wave(文字色の波によるリビール)を実装してください。

- 見出しを1文字ずつ <span> に分割する(空白は white-space: pre で保持)
- 初期状態は最終色のまま opacity を {{dim}}% まで落として沈めておく
- {{batch}} 文字を1組として、組ごとに {{stagger}}ms ずつ遅らせて先頭から発火させる
- 発火した文字は 120ms でアクセント色 + opacity 1 まで上がり、{{hold}}ms 保持したあと 120ms で最終色へ戻る(opacity は 1 のまま)
- 動かすのは color と opacity だけ。文字送り(letter-spacing / width / margin)は変えずリフローさせない
- 分割で font-kerning が崩れるため、分割した span を含む要素に font-kerning: none を指定する
- prefers-reduced-motion 時は波を再生せず、最初から最終色 + opacity 1 で表示する

見出しに color wave(文字色の波によるリビール)を実装してください。

- 見出しを1文字ずつ <span> に分割する(空白は white-space: pre で保持)
- 初期状態は最終色のまま opacity を {{dim}}% まで落として沈めておく
- {{batch}} 文字を1組として、組ごとに {{stagger}}ms ずつ遅らせて先頭から発火させる
- 発火した文字は 120ms でアクセント色 + opacity 1 まで上がり、{{hold}}ms 保持したあと 120ms で最終色へ戻る(opacity は 1 のまま)
- 動かすのは color と opacity だけ。文字送り(letter-spacing / width / margin)は変えずリフローさせない
- 分割で font-kerning が崩れるため、分割した span を含む要素に font-kerning: none を指定する
- prefers-reduced-motion 時は波を再生せず、最初から最終色 + opacity 1 で表示する

03 — Params

stagger(文字間の時間差 ms) — 範囲 10〜120 / 初期 40
波の進む速さ。30〜50msが定番。80msを超えると1文字ずつ点灯して見え、波として繋がらない。
hold(発色を保つ時間 ms) — 範囲 0〜400 / 初期 120
アクセント色に留まる時間。100〜160msで「光って戻る」。300ms超は残像が長く、波の輪郭がぼやける。
batch(同時に光る文字数) — 範囲 1〜5 / 初期 1
1で1文字ずつの細かい波、2〜3で塊が進むブロック状の波になる。長い見出しほど大きめが読みやすい。
dim(点灯前の濃さ %) — 範囲 0〜60 / 初期 15
波が来る前の文字の不透明度。15〜25%だと「まだ読めないが形は見える」。0%は完全リビールになり別の動きに見える。

04 — Vocab

stagger — 複数要素に一定間隔の遅延を付けて順に発火させること。この間隔が波の進行速度そのものになる。
font-kerning — 文字ペアごとの字詰め。1文字ずつspanに割るとペアが切れて字間が崩れるため、noneで揃えるのが定石。
hold(保持) — アクセント色に留まる時間。0だと三角波のように光がすれ違うだけになり、長いと帯状の塗りに見える。
リフロー — レイアウトの再計算。colorとopacityは合成のみで済むが、letter-spacingやwidthを動かすと毎フレーム発生して重くなる。

05 — NG → OK examples

言い方: 「「見出しの文字を1文字ずつ光らせて」」

なぜNG: 「光らせる」だけでは、通過後に色が戻るのか光ったままなのかが決まらない。text-shadowでぼんやり発光させる実装や、opacity 0→1のただのスタッガーフェードが返ってくることが多い。

言い方: 「「color waveで実装。1文字ずつspan分割し、初期opacity 15%。40ms間隔で先頭から順に120msでアクセント色+opacity 1へ上げ、120ms保持後に最終色へ戻す。colorとopacityのみでリフロー禁止、font-kerning: none」」

なぜOK: 波の向き・間隔・発色の保持時間・戻り先まで数値で固定してあるため、意図した「通過して定着する」波になる。「colorとopacityのみ」がレイアウトを動かす実装を封じる。