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.
- Buttons
- gsap
- svg
- intermediate
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1310 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 Shake
An invite form refuses an invalid submit: each field that needs attention jitters 10px left and right four times with a shrinking range (0.5s total), lands exactly at 0, turns red and shows a message saying what to fix.
- gsap
light 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".
- gsap
- canvas2d
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