ブラーリビール — 動きの伝え方辞典

text

blur reveal / blur text in

ブラーリビール

文字がぼけた状態から徐々にピントが合うように現れるテキスト演出。opacityだけのフェードより空気感が出て、高級・幻想系サイトの見出しで定番。

01 — Demo video

Play live →

02 — Prompt template

テキストに blur reveal(ぼかしから現れる演出)を実装してください。

- テキストを1文字ずつ span に分割する(spanは display: inline-block)
- 初期状態は filter: blur({{blur}}px) と opacity: 0
- 表示時に filter: blur(0) / opacity: 1 へ {{duration}}s の ease-out で遷移させる
- 文字ごとに {{stagger}}ms ずつ transition-delay をずらして順に現れるようにする
- filter はコンポジット負荷が高いので、適用は見出しなど短いテキストに限定し、本文全体には使わない
- アニメーション中のみ will-change: filter, opacity を効かせ、完了後は外す
- prefers-reduced-motion 時はぼかしアニメーションなしで即座に全文を表示する

テキストに blur reveal(ぼかしから現れる演出)を実装してください。

- テキストを1文字ずつ span に分割する(spanは display: inline-block)
- 初期状態は filter: blur({{blur}}px) と opacity: 0
- 表示時に filter: blur(0) / opacity: 1 へ {{duration}}s の ease-out で遷移させる
- 文字ごとに {{stagger}}ms ずつ transition-delay をずらして順に現れるようにする
- filter はコンポジット負荷が高いので、適用は見出しなど短いテキストに限定し、本文全体には使わない
- アニメーション中のみ will-change: filter, opacity を効かせ、完了後は外す
- prefers-reduced-motion 時はぼかしアニメーションなしで即座に全文を表示する

テキストに blur reveal(ぼかしから現れる演出)を実装してください。

- テキストを1文字ずつ span に分割する(spanは display: inline-block)
- 初期状態は filter: blur({{blur}}px) と opacity: 0
- 表示時に filter: blur(0) / opacity: 1 へ {{duration}}s の ease-out で遷移させる
- 文字ごとに {{stagger}}ms ずつ transition-delay をずらして順に現れるようにする
- filter はコンポジット負荷が高いので、適用は見出しなど短いテキストに限定し、本文全体には使わない
- アニメーション中のみ will-change: filter, opacity を効かせ、完了後は外す
- prefers-reduced-motion 時はぼかしアニメーションなしで即座に全文を表示する

03 — Params

blur(初期のぼけ量 px) — 範囲 4〜24 / 初期 10
8〜12pxが上品。24px近くまで上げると霧の中から浮かび上がる印象になる。
duration(1文字の時間 s) — 範囲 0.2〜2 / 初期 0.8
0.6〜1.0sが「ピントが合う」感じを出しやすい。短すぎるとただのフェードに見える。
stagger(文字間の遅延 ms) — 範囲 0〜200 / 初期 60
40〜80msが自然。0で全文字同時、大きくするほど1文字ずつ順に浮かぶ。

04 — Vocab

filter: blur() — ガウスぼかし。値が初期のぼけ量で、0に戻すとピントが合って見える。描画コストが高いので適用範囲を絞る。
stagger — 複数要素の開始時刻を一定間隔でずらすこと。文字ごとに遅延を足すと波のように順に現れる。
will-change — 変化するプロパティをブラウザに予告して描画準備させる。付けっぱなしはメモリを食うので完了後に外すのが作法。
コンポジット負荷 — filterやbox-shadowはピクセル単位の合成コストが高い。適用する要素数と面積を絞るのが基本。

05 — NG → OK examples

言い方: 「「テキストをふわっとぼかして表示して」」

なぜNG: 「ふわっと」だけではopacityフェードだけの実装が返ってきがち。ぼけ量・時間・文字ごとのずらしを指定しないと、ぼけが強すぎて読めない時間が長い実装や、本文全体にfilterをかけて重くなる実装になることも多い。

言い方: 「「見出しをblur revealで。1文字ずつspan分割、blur(10px)+opacity:0からblur(0)へ0.8s ease-out、文字ごと60msのstagger。filterは見出し限定で本文には使わない」」

なぜOK: 分割単位・初期ぼけ量・時間・staggerまで数値で指定し、filterの適用範囲も制限している。「見出し限定」の一言がパフォーマンス事故を防ぐ。