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.
allow-discrete + @starting-style let the native dialog and backdrop fade/translate cleanly on open and close.
<dialog> + ::backdrop transitions (allow-discrete + @starting-style)
detecting…popover="auto" gives free light-dismiss + ESC; anchor positioning tethers to the trigger.
Popover API + anchor positioning
detecting…Light-dismiss + ESC dismiss come for free with popover="auto"; no outside-click handler in JS.
Registering an <angle> custom property lets gradient-angle interpolate fluidly instead of token-hopping.
@property registered <angle>
Hover — gradient angle interpolates smoothly
Without @property, the gradient would hop because linear-gradient() is treated as a token. Registering the angle as a typed property makes it animatable.
OKLCH mixing produces perceptually-uniform palette steps; slider drags the brand→white mix.
color-mix(in oklch, …)
Each card has its own view-timeline progress range — distinct from the existing scroll() bar.
animation-timeline: view()
detecting…Card 1
Each card animates from opacity 0 / translateY+scale to settled, progress-driven by its own view-timeline.
Card 2
Each card animates from opacity 0 / translateY+scale to settled, progress-driven by its own view-timeline.
Card 3
Each card animates from opacity 0 / translateY+scale to settled, progress-driven by its own view-timeline.
Card 4
Each card animates from opacity 0 / translateY+scale to settled, progress-driven by its own view-timeline.
Card 5
Each card animates from opacity 0 / translateY+scale to settled, progress-driven by its own view-timeline.
Card 6
Each card animates from opacity 0 / translateY+scale to settled, progress-driven by its own view-timeline.
Card 7
Each card animates from opacity 0 / translateY+scale to settled, progress-driven by its own view-timeline.
Card 8
Each card animates from opacity 0 / translateY+scale to settled, progress-driven by its own view-timeline.
Per-element progress timeline — distinct from the existing scroll()-based progress bar widget.
Native auto-grow textarea — replaces the JS scrollHeight/ResizeObserver hack with one line of CSS.
field-sizing: content
Replaces the standard scrollHeight/textarea-resize ResizeObserver pattern with a single CSS declaration.
grid-template-rows: subgrid aligns CTA buttons across cards even when body copy varies in length.
grid-template-rows: subgrid
detecting…400gsm fleece, double-stitched cuffs.
180gsm ringspun.
Brushed cotton, available in 8 colors with curved or flat brim options.
Without subgrid the CTA buttons would each align to their own card's baseline. With subgrid, they all sit on the same outer-grid track.
A scoped block applies a local theme to everything inside without leaking to siblings — no BEM, no CSS modules.
@scope rule
Scoped link styling bleeds nowhere; the theme lives only inside this card.
Same selectors, untouched — proves the scope didn't leak.
Native offset-path animates an element along an SVG curve with auto-rotation. Foundation for fly-to-cart trails.
offset-path + offset-distance
Reusable foundation for fly-to-cart or success-checkmark trails — the path can be any SVG curve.
The storefront logo flies in a heart-shaped mask from the add button toward the cart. Uses Framer Motion, createPortal, and the nav cart when available.
