カプセルが開く演出を、5つの段階に分けて並べたもの。ボタンを押して見比べる。
動画・GIF・外部ライブラリは一切使っていない。全部 CSS の指示書（@keyframes）。
ただし見た目の質は、動きではなく素材で決まる。
カプセルはAIで作った背景透過の画像1枚（512px・26KB）。CSSで描いた丸ではない。
そしてこのカプセルは開いていない。浮き上がって光って消えるだけで、その一瞬を光と粒で隠している。
だから素材は「閉じた1枚」で足りる。
いちばん効くのはここ。途中でわざと暗くすると「来るぞ」と感じる。 明るくなっていくだけだと、ただ光っただけになる。
選んだ段階のコード
同じカプセル画像でも、後ろに光・前に閃光・輪・火花を重ねると別物になる。 足しているのは中身の無い丸と棒だけ。画像は1枚のまま増えていない。
重ねている中身
数ではなくバラバラさで決まる。同じ動きを並べた瞬間にCG臭くなる。 飛ぶ方向・距離・落ち方・回転・大きさ・遅れ・所要時間の7つを、1粒ずつ乱数にする。
1粒ずつ入れている値
レア度のある仕組みなら、演出にも段階を付ける余地がある。 同じ部品の数と時間を変えるだけで3段階になる。色は足さない。
段階ごとの設定
開いた瞬間にスマホをトン・ツー・トと震わせる。1行で入る。 PCでは何も起きない。Androidのスマホで開くと効く（iPhoneのSafariは非対応）。
押すと、ここに結果が出ます
コード
// 22ミリ秒ふるえ → 55休み → 38ふるえ if (navigator.vibrate) navigator.vibrate([22, 55, 38]);
注意：長く震わせると不快になる。合計100ミリ秒前後までにする。 「動きを減らす」設定の人には出さない。