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.
- Buttons
- gsap
- intermediate
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1335 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 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 Pointer-Origin Ripple Button
Three pill buttons flood with colour from the exact pointer position on hover: a clip-path circle grows from the entry point and the label inverts as the edge passes it; clicks add a translucent burst and a press squash.
- gsap
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 Toast Notification Micro-interaction
Four triggers spawn stacked toasts bottom-right: each slides in from x 40 with a back.out overshoot while earlier toasts shift up via Flip, an icon draws itself with DrawSVG, a hairline counts down 4s (pausing on hover) and dismissal re-flows the stack.
- gsap
- flip
- svg