Motion & texture

Confetti

Q: How do people describe a Confetti in plain words?

colorful paper bits exploding when something big succeeds that New Year’s blast after I finish checkout the first time confetti raining after I unlock an achievement

Q: How do I implement a Confetti?

Fire confetti only on first-order success: full-viewport canvas (pointer-events: none, removed after ~2.5s), ~150 particles from the CTA with gravity and spin, brand colors. Under prefers-reduced-motion, show a static celebration badge instead.

A short burst of colored particles for rare celebrations—emotion, not decoration spam.

Also known as celebration particles · party burst · success confetti

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Confetti".

Fire confetti only on first-order success: full-viewport canvas (pointer-events: none, removed after ~2.5s), ~150 particles from the CTA with gravity and spin, brand colors. Under prefers-reduced-motion, show a static celebration badge instead.

Anatomy:
- particle: Position, velocity, spin, color under gravity.
- emitter: Burst from the CTA, sides, or bottom—causal beats full-screen random.
- decay: Settle and vanish in ~2–3s; never loop forever.

Preferred API / pattern: `canvas-confetti / react-confetti once on success`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Confetti on routine saves
○Avoid: DOM particles
○Avoid: Canvas intercepting clicks
○Avoid: Leaving a full-screen canvas mounted forever
○Avoid: Ignoring reduced-motion / photosensitive users.

In plain wordsHow people search for it

“colorful paper bits exploding when something big succeeds”“that New Year’s blast after I finish checkout the first time”“confetti raining after I unlock an achievement”

AnatomyOpen for part names

particle: Position, velocity, spin, color under gravity.
emitter: Burst from the CTA, sides, or bottom—causal beats full-screen random.
decay: Settle and vanish in ~2–3s; never loop forever.

How to write itOpen for stack patterns

Web (HTML/CSS)canvas particles (e.g. canvas-confetti)

React + Tailwind + shadcn/uicanvas-confetti / react-confetti once on success

SwiftUICanvas particle system / SpriteKit lite

Ant Designcustom canvas overlay on Result success

Notes

Emotional nuclear option powered by scarcity: first order, big milestone, exam passed. Confetti on every save trains people to ignore it (and burns battery). Canvas particles only—DOM confetti janks. pointer-events: none, remove the layer when done. Respect reduced-motion with a static 🎉 badge instead.

Common mistakesHumans and models trip here

Confetti on routine saves: scarcity is the whole point.
DOM particles: dozens of divs thrash low-end devices—use canvas.
Canvas intercepting clicks: forgot pointer-events: none.
Leaving a full-screen canvas mounted forever: memory leak.
Ignoring reduced-motion / photosensitive users.

More failure symptoms on AI broke it.

Related patterns

Result PageA full screen that states the final outcome of a heavy action and offers a clear next step.Spring AnimationMotion driven by stiffness and damping instead of a fixed duration curve—naturally overshoots, then settles.Count Up / Number TickerAnimate a number from a start value to its target so stats land with a little ceremony.

Spotted a wrong name or missing pattern?

Message on X