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.
- Buttons
- gsap
- beginner
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1169 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 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
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 Click Ripple
Buttons, list rows, chips, icon buttons and a FAB each spawn a translucent circle of ink at the exact press point (keyboard: the centre); it scales to the farthest corner in 0.55s, holds while pressed, then fades out and removes itself.
- 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