Component · Hover and click effects

Confetti click animation

by Informeek Studio Made with Claude 11 November 2026
Live Click the button, then click anywhere on the page

The prompt

Claude · Claude Opus 5.5

Build a confetti click animation on a dark navy page (#101828). In the centre, a reward card (#182235, 24px radius, thin border) with an amber "Level 7 reached" badge, the heading "You earned 250 points", a grey line "Seven days in a row. Claim your reward before midnight." and a full-width amber (#fdb022) "Claim reward" button. Draw confetti on a full-screen canvas behind the card that ignores pointer events. Clicking anywhere releases 18 pieces from the pointer; clicking the button releases 70 bigger, faster pieces from its centre and changes it to a green (#32d583) "Reward claimed". Pieces are small rectangles, circles and triangles in amber, green, blue (#53b1fd), pink (#f670c7) and white, flying out in every direction, falling with gravity, spinning, slowing with air drag and fading out over about a second. Scale the canvas for retina screens and skip the confetti for reduced motion.

Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.

Use it in three steps

  1. Copy the prompt with the button above.
  2. Paste it into your tool, such as v0, Lovable, Bolt or Claude.
  3. Make it yours by changing the reward text and the confetti colours to your brand.

About this confetti animation

A confetti animation is the quickest way to make a small win feel like an event. Here every click on the page throws a little burst of shapes from the pointer, and pressing Claim reward sets off a much bigger one from the button while it turns green and changes its label.

The confetti is drawn on a single canvas that covers the page but ignores clicks, so it never gets in the way of the card. Each piece has its own shape, colour and spin, falls with gravity and slows with a touch of air drag before fading out, which is what makes it look thrown rather than sprayed.

Why the prompt works

  • It sets two burst sizes, 18 pieces for a page click and 70 for the reward, so the important moment stands out.
  • It describes the physics in plain words: gravity, spin, drag and fade.
  • It lists the palette as hex codes, so the pieces match the card.
  • It asks for retina scaling and a reduced motion fallback.

Where to use it

Completed sign-ups, first purchases, streaks and achievements. Save it for real wins: confetti on every button soon feels cheap.

The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.

Keep exploring

More prompts like this

See the collection →