Confetti
紙吹雪
どんな動き？
ボタンのクリックやフォーム送信の完了など、お祝いしたい瞬間に画面中央から色とりどりの紙片が放射状に飛び散り、回転しながら落ちていく演出。canvas-confettiというライブラリを使えば数行のコードで手軽に実装でき、達成感や喜びを一気に演出できる。購入完了ページやキャンペーンのゴール画面などで使われる定番のマイクロインタラクション。
よく使う場所
完了画面フォーム送信後キャンペーンページ
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Burst small colorful confetti pieces outward from a central point, spinning as they fly and fall.Trigger:
click on a button or completion of an action.
Initial state:
All pieces: gathered at the origin point, opacity: 0, rotate: 0deg
Animation:
Pieces fly outward radially and downward at varying distances and speeds, spinning continuously as gravity pulls them down.
Final state:
Pieces: scattered at their landing positions, opacity: 1, rotated at random angles
Timing:
duration: 0.9–1.2s, easing: ease-out, slight per-piece stagger. Play once per trigger.実装方法の候補
この動きは以下の技術で実装できます。
canvas-confettiJavaScripttsparticles
別名・関連ワード
Confetti BurstCelebration ConfettiConfetti Explosion