Unlisted test route for motion, embed, and add-to-cart interaction experiments. Open with a country prefix, e.g. /au/test/animation-widgets. Sections are paginated (?page=2, 10 per page); add-to-cart / button interaction blocks start around page 13 (see footer pagination). The old /test/button-animations URL redirects to that page. Global cursor trail is disabled so the custom cursor demo is visible.
Dev-only add-to-cart lab. The fly-to-cart target prefers the main nav link [data-testid='nav-cart-link'] when present; the secondary button is a stand-in.
The same cart flight as #1, but the trigger is a Framer Motion button with the spring whileTap from #4—press feedback and success motion in one control.
Pick a preset below to try different trail vs arrival combinations. Confetti uses heart shapes (`shapeFromPath`) so particles respect the greyscale or default color palette; if `Path2D` is unavailable they fall back to basic shapes. Spring squish (#4) and slot text (#8) are unchanged; re-triggers after the slot resets (~2s).
Variant presets
Heart-shaped confetti in a greyscale palette on the trail and shells, plus chip lasers and mega finale (canvas-confetti `shapeFromPath`).
Loading state, then success color, checkmark, and copy that resets. Mirrors a typical add-to-cart flow with React state and Tailwind transitions.
canvas-confetti burst from the button center. Works well for playful or celebratory brands.
whileTap scale with a spring for press feedback. Framer Motion makes this a few lines of code.
Click coordinates seed an expanding ring inside an overflow-hidden button. Uses Framer Motion for the ripple (pure CSS is another valid approach).
navigator.vibrate for supported mobile browsers; wrapped in a capability check so desktop is unaffected.
Status: — Use Chrome on Android for hardware vibration; iOS Safari does not expose this API to web pages in most cases.
Front: Add to cart. Back: Added with icon. Framer Motion rotates on the X-axis with preserve-3d and hidden back-faces, similar to pure CSS 3D card flips.
Fixed height, overflow hidden; the text column translates up on click so an Added! line slides into view. Typography-only feedback without a big color change.
A darker layer creeps left-to-right, then the label flips to success—good when cart API can take a moment. Demo uses a 1.2s fill; wire width to a real request for production.
