モザイクリビール — 動きの伝え方辞典

media

mosaic reveal / tile reveal

モザイクリビール

画像がタイル状に分割され、1枚ずつ時間差で現れるリビール演出。実装はgridで敷いたカバータイルをopacityで消していくだけと軽い。出現順(ランダム/順番/斜め)とstaggerの設計が世界観を決める。

01 — Demo video

Play live →

02 — Prompt template

画像の出現に mosaic reveal(タイル状リビール)を実装してください。

- 画像の上に CSS grid で {{tiles}} のカバータイル(背景と同色)を敷き詰める
- 各タイルを {{order}} の順に {{stagger}}ms ずつ遅らせ、opacity 1→0 (各0.4s)で消していく
- 出現順はJSでdelay配列を作り、各タイルの transition-delay に流し込む(randomはFisher–Yatesでシャッフル)
- 動かすのはopacityのみ。タイルを動かしたり画像自体を切り抜いたりしない(リフロー禁止)
- 全タイル消滅後はオーバーレイごと display: none にして操作を妨げない
- prefers-reduced-motion 時はタイル分割せず、画像全体を0.3s以内の1回のフェードで表示する

画像の出現に mosaic reveal(タイル状リビール)を実装してください。

- 画像の上に CSS grid で {{tiles}} のカバータイル(背景と同色)を敷き詰める
- 各タイルを {{order}} の順に {{stagger}}ms ずつ遅らせ、opacity 1→0 (各0.4s)で消していく
- 出現順はJSでdelay配列を作り、各タイルの transition-delay に流し込む(randomはFisher–Yatesでシャッフル)
- 動かすのはopacityのみ。タイルを動かしたり画像自体を切り抜いたりしない(リフロー禁止)
- 全タイル消滅後はオーバーレイごと display: none にして操作を妨げない
- prefers-reduced-motion 時はタイル分割せず、画像全体を0.3s以内の1回のフェードで表示する

画像の出現に mosaic reveal(タイル状リビール)を実装してください。

- 画像の上に CSS grid で {{tiles}} のカバータイル(背景と同色)を敷き詰める
- 各タイルを {{order}} の順に {{stagger}}ms ずつ遅らせ、opacity 1→0 (各0.4s)で消していく
- 出現順はJSでdelay配列を作り、各タイルの transition-delay に流し込む(randomはFisher–Yatesでシャッフル)
- 動かすのはopacityのみ。タイルを動かしたり画像自体を切り抜いたりしない(リフロー禁止)
- 全タイル消滅後はオーバーレイごと display: none にして操作を妨げない
- prefers-reduced-motion 時はタイル分割せず、画像全体を0.3s以内の1回のフェードで表示する

03 — Params

tiles(分割数) — 選択: 4×3 / 6×4 / 8×5 / 10×6（初期: 6×4）
タイルの分割数。24〜40枚が目安。少ないと大味、多すぎると砂嵐ノイズに寄る。
stagger(1枚ごとの時間差 ms) — 範囲 5〜60 / 初期 25
総時間≒最大delay+フェード0.4s。枚数を増やしたらstaggerを削り、全体で1〜1.5sに収める。
order(出現順) — 選択: random / sequential / diagonal（初期: random）
randomはノイズ的、sequentialは走査線的、diagonalは左上から光が走るように見える。

04 — Vocab

カバータイル方式 — 画像を切るのではなく、背景色のタイルを上に敷いて消していく方式。どんなコンテンツにも使え、DOMも軽い。
transition-delay — 各タイルの開始時刻をずらすCSSプロパティ。JSで作ったdelay配列をstyleに流し込むだけでstaggerが組める。
Fisher–Yates — 偏りのないシャッフルの定番アルゴリズム。Math.random() - 0.5 でsortする方法は偏るので使わない。
総時間の逆算 — 体感時間 = 最大delay + タイル1枚のフェード時間。枚数×staggerが膨らみやすいので、常に合計から逆算する。

05 — NG → OK examples

言い方: 「「画像をモザイクみたいにパラパラ表示して」」

なぜNG: 分割数も出現順も時間差も未定義。canvasで画像をピクセル分解する過剰実装や、総時間の逆算がなく表示に3秒かかる実装が返ってきがち。

言い方: 「「mosaic revealを実装。6×4のカバータイルをgridで敷き、randomの順に25msずらしてopacity 1→0(各0.4s)。動かすのはopacityのみ、完了後はオーバーレイをdisplay: none。reduced-motionは全体フェード1回」」

なぜOK: 分割数・順序・時間差・後始末まで揃っている。「カバータイルを消す」方式と明示すれば、画像自体を切り刻む重い実装を避けられる。