Confetti Burst Button
A pill "Celebrate" button squashes on press and launches pooled canvas confetti — rectangles, discs and thin ribbons — that spin, flip and flutter down under gravity and drag, while the label rolls to a drawn check "Celebrated".
- Buttons
- gsap
- canvas2d
- intermediate
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1265 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
light Add to Bag Fly
Clicking “Add to bag” clones the product image and flies it along a cubic bezier arc — shrinking and tilting — into the header bag, which squash-bounces while the badge count rolls up and the button wipes to a drawn-check “Added”.
- gsap
- svg
light Button Fill Sweep
Four buttons on a membership page: on hover or focus a slanted lime pane sweeps across in 0.55s power3.out, carrying a counter-moving copy of the label so the text inverts exactly under the fill, then leaves through the far edge.
- gsap
light Press Feedback Button
A product card and a control panel where every button, switch, segment and record key compresses to 0.94 and sinks 2px on pointer or key down, then springs back with back.out(3) on release or when the press is cancelled by sliding off.
- gsap
light Loading → Success Morph Button
Click → the pill collapses to a circle holding a spinning arc, waits, then the arc morphs into a tick while the fill floods green and the pill re-expands around "Done"; a second button plays the declined variant with a red cross and a shake, then both reset.
- gsap
- svg