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.
Pointer-anchored verlet integration with constraint passes — soft-body feel without a physics library.
Move pointer — verlet chain follows. Pure JS, no library.
Manual First-Last-Invert-Play with the WAAPI animate() — works without GSAP Flip and without View Transitions.
FLIP technique: capture rects → change layout → invert with WAAPI. No GSAP Flip plugin, no View Transitions API.
CSS perspective + rotateY page turns. Mock SC-Prints catalog; degrades to instant page swap under reduced motion.
Tinder-style: drag past threshold to dismiss; rotation and opacity track x via Framer useMotionValue/useTransform.
Swipe • 1
Hoodie — Stone
Swipe • 2
Tee — Pink
Swipe • 3
Cap — Olive
`position: sticky` with progressive top-offsets. Cards stack as you scroll the panel — Apple/Bricks pattern.
01
Premium fabric
Each card sticks at a slightly higher offset, stacking as you scroll. Pure CSS — `position: sticky`.
02
Eco inks
Each card sticks at a slightly higher offset, stacking as you scroll. Pure CSS — `position: sticky`.
03
Local print
Each card sticks at a slightly higher offset, stacking as you scroll. Pure CSS — `position: sticky`.
04
Bulk pricing
Each card sticks at a slightly higher offset, stacking as you scroll. Pure CSS — `position: sticky`.
05
Free quote
Each card sticks at a slightly higher offset, stacking as you scroll. Pure CSS — `position: sticky`.
Scroll inside the panel — cards stack at progressive top-offsets.
Per-digit spring translate; pick a price to see the odometer roll. Useful for sale-price reveals on PDPs.
Click a swatch — circular clip-path sweeps the new color from the click point. Direct precursor to a customizer color-pick treatment.
Click a swatch — circular clip-path sweeps from the click point.
Reads CUSTOMER_MILESTONES from the canonical production-stage.ts. Crawler dot + spring-filled track; auto-advances under motion.
Reads the canonical CUSTOMER_MILESTONES from production-stage.ts. Drop into /account/orders/details/<id> if it tests well.
SVG getPointAtLength() samples position + tangent so the truck rides any curve. Pairs with the production-line crawler above.
SVG getPointAtLength() samples position + tangent angle from the path so the truck rides any curve and rotates naturally.
Native anchor() + position-try-options auto-flips the tooltip near viewport edges. Replaces JS bounding-box math; falls back to absolute-positioned tip when unsupported.
CSS Anchor Positioning API
detecting…Native anchor() + position-try-options auto-flip the tooltip near viewport edges. Replaces JS bounding-box math.
