概要
ネオングリーンのピクセルグリッドが画面を覆い、「SYSTEM UP」表示のあと中心から外へ向かってセルが弾けて消え、レトロゲーム風のヒーローが現れる、8bit/サイバー系のオープニング。
使用技術
・GSAP
・CSS Grid（動的セル生成）、`@keyframes flicker` によるネオン点滅、`text-shadow` の多重掛けでグロー
実装ポイント
・グリッド（15列×12行=180セル）はJSで `createElement` して生成。`Math.random() > 0.8` の確率で `.accent` クラスを付け、一部セルを明るく散らす
・ディゾルブの核が `stagger: { grid: [rows, cols], from: “center”, amount: 0.6 }`。GSAPのグリッドstaggerで中心から同心円状に伝播させ、各セルを `scale:0`＋`opacity:0` で消す
・テキストやタイトルの登場に `ease:”steps(5)”` / `”steps(1)”` を使い、なめらかさをあえて殺してデジタル/カクカクした質感を出している
・ローダー消去とヒーロー登場を `”-=0.5″` で重ね、`.set(loaderEl, {display:”none”})` を挟んでオーバーレイを確実に除去。`onComplete` で `body` の `overflow` を `auto` に戻す
・ネオン点滅（`.pixel-logo` の `flicker`）はGSAPではなくCSSアニメーションで常時ループさせ、JS側の演出と役割分担している
コアスニペット
// 中心から外側へ同心円状にセルを弾けさせる
tl.to(".pixel-cell", {
duration: 0.8,
scale: 0,
opacity: 0,
stagger: {
grid: [rows, cols],
from: "center",
amount: 0.6, // 全体で0.6秒かけてばらける
},
ease: "power2.inOut",
}, "-=0.2");