Confetti
撒花彩带
Aliases:撒花彩带动画庆祝特效五彩纸屑撒花庆祝
What is it
On completing a key action, a burst of coloured pieces erupts and falls — a one-shot, high-energy celebration. It belongs only to milestones: submission success, task done, subscription reached. Rarity is what gives it weight.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Milestones — first publish, payment success, goal reached
- First-time moments and achievements unlocked
- Consumer products whose brand welcomes celebration
✕ When not to use
- Frequent actions — confetti on every save is a disaster
- Serious or professional tooling
- Moments where it obscures the result itself
Variants
Burst
中心爆开
Erupts from the button center — the default
Cannons
双侧礼炮
Two cannons firing from both sides — more ceremony
Rain
顶部飘落
Drifts down from the top for seconds — maximum coverage
Implementation
absolute particlesrandom transform translate/rotate@keyframes fallcleanup after animationSpawn absolutely positioned small pieces (divs or canvas particles) with random angle, initial velocity and colour, falling in a parabola while spinning; remove them from the DOM as soon as the 1–2s animation ends to prevent node leaks. Fire once, never loop; respect prefers-reduced-motion with a static success glyph instead.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add confetti celebration to the project's milestone moments. Check brand tone and the trigger list first; confirm confetti fits (low-frequency, positive). Requirements: - 30–60 pieces, 1–2s parabola, DOM cleaned up afterwards - One-shot, brand token colours - Never obscures results; pointer-events must not block clicks - Respect prefers-reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
The element overshoots its resting point and oscillates once or twice before settling — a springy "boing". It injects physics and playfulness, best saved for success states, reward moments and branded entrances.
MotionSimilarWhen a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
PatternsUsed withA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsApplies toUpdate the interface immediately as if the operation will succeed while the real request runs in the background; settle on success, roll back to the original state with a notice on failure. It solves the "wait for the server on every action" problem — trading brief uncertainty for a zero-latency feel, ideal for frequent light actions like likes and bookmarks.
PatternsUsed with