← All effects
Confetti Burst
click anywhere to celebrate
-- fps
prefers-reduced-motion detected — one frozen burst shown
X-ray · layers
pieces fall like paper
sway and spin in the air
pieces dissolve at the end
Parameters
Pieces80
Power9
Gravity0.25
Flutter0.60
your version · updates as you tinker
How this effect works
A confetti burst is a firework made of rectangles. On click, every piece gets a random direction and a launch speed around POWER, with a slight upward bias — real confetti guns shoot up. From that moment, physics takes over: gravity adds a constant downward pull every frame, and air drag slowly eats the horizontal speed. That's the same two lines of physics as any falling object.
The flutter layer is what makes it paper instead of gravel: each piece sways sideways on its own sine wave and spins around its center at its own speed. Turn flutter off and watch the same burst suddenly look like falling rocks. The fade layer dissolves each piece near the end of its life, so the celebration ends softly instead of pieces blinking out.
Production notes: respects prefers-reduced-motion (one static frame instead of animation) · cost is per active piece and bursts live ~2.5 s — a 200-piece burst is fine on any phone · classic use: success states, "order placed", achievements · the copied snippet is self-contained HTML + JS.