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.
- Buttons
- gsap
- flip
- 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. 1207 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 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 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 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