紙吹雪バースト
ボタンを押すと画面上部から紙吹雪が舞い落ちる。矩形パーティクルをscaleYで周期的に潰し3D回転のフラッターを近似、重力+左右の揺れで落下させる。EC購入完了・フォーム送信完了などの祝祭演出に。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 注文・送信完了の祝祭演出
- 達成バッジ・レベルアップの通知
- 枚数を増やしても軽い紙吹雪
- 避ける場面
- エラー・通常の保存など祝う場面でない
- 連続で何度も発火する操作
- 本文の上に長時間残す
- 構成要素
- ステージ
- 紙吹雪（canvas）
- チェックマーク
- 完了メッセージ
- 再生ボタン
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab で「もう一度祝う」ボタンに到達・Enter/Space で発火。紙吹雪自体は操作対象ではない
- 支援技術
canvas は aria-hidden・pointer-events none の装飾。完了の意味は「ご注文を承りました」のテキストが担う。reduce 設定では枚数を 46 に半減
- 動き
90枚が上端から重力 140px/s² で落下・sin の横揺れ・cos(flip) の scaleY で3D回転を近似。下端で約0.6s フェード
デザインの要点
- ひらひらは scale(1, cos(flip)) で厚みゼロの矩形を裏返す近似。回転だけだと平面がくるくる回る紙に見えない
- 重力 140px/s² は花火の粒より弱く、横揺れ ±30 を足す。速く落とすと祝祭ではなく落下物になる
- canvas は pointer-events none で下のボタンを塞がない。祝いの演出が次の操作の邪魔をしてはいけない
- 枚数（90）は reduce 設定で半減する。完了の意味はテキストが持つので、演出は減らしても伝わる
実装メモ
同じ見本帳の「紙吹雪セレブレーション」はDOM要素+CSSアニメ実装ですが、こちらはCanvas 2Dの物理パーティクルなので枚数を増やしても要素数が増えず軽量です。用途に応じて選んでください。
コード（コピーして使えます）
<div class="cvc-stage">
<canvas class="cvc-canvas" aria-hidden="true"></canvas>
<div class="cvc-content">
<p class="cvc-check">✓</p>
<p class="cvc-msg">ご注文を承りました</p>
<button class="cvc-btn" type="button">もう一度祝う</button>
</div>
</div>