Animation widgets lab

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.

Animation widgets lab

Jelly button

Exaggerated squash-and-stretch on tap.

Pinch / ctrl-wheel zoom

Ctrl+scroll (trackpad pinch) scales content inside a viewport.

Pinch on trackpad (⌃ scroll) or Ctrl+wheel to zoom — lab simulation.

Draggable PiP tile

Mini panel draggable within dashed bounds.

Drag the tile — constrained to the dashed area (PiP-style).

Mini PiP

Command palette (⌘K)

Modal with spring scale, backdrop blur, and basic focus on open.

Press ⌘/Ctrl+K (global within this page).

Cascading context menu

Menu shell then staggered list items.

Notification drawer

Full-height panel slides from the right with scrim.

CSS scroll-driven animation

Progress bar driven by animation-timeline scroll() in a local scroller.

Scroll line 1 — progress bar ties to this scroller in supporting browsers.

Scroll line 2 — progress bar ties to this scroller in supporting browsers.

Scroll line 3 — progress bar ties to this scroller in supporting browsers.

Scroll line 4 — progress bar ties to this scroller in supporting browsers.

Scroll line 5 — progress bar ties to this scroller in supporting browsers.

Scroll line 6 — progress bar ties to this scroller in supporting browsers.

Scroll line 7 — progress bar ties to this scroller in supporting browsers.

Scroll line 8 — progress bar ties to this scroller in supporting browsers.

Scroll line 9 — progress bar ties to this scroller in supporting browsers.

Scroll line 10 — progress bar ties to this scroller in supporting browsers.

Scroll line 11 — progress bar ties to this scroller in supporting browsers.

Scroll line 12 — progress bar ties to this scroller in supporting browsers.

Scroll line 13 — progress bar ties to this scroller in supporting browsers.

Scroll line 14 — progress bar ties to this scroller in supporting browsers.

Scroll line 15 — progress bar ties to this scroller in supporting browsers.

Scroll line 16 — progress bar ties to this scroller in supporting browsers.

Uses animation-timeline: scroll() inside the box; falls back to a static bar where unsupported.

CSS :has() sibling dim

Grid dims non-hovered cards with pure CSS.

Hover one card — peers dim via :has() (modern browsers).

CSS mask-image wipe

Organic reveal via animated mask-position on a gradient block.

Gradient revealed by animated radial mask-position.

Mini-cart slide-down

Dropdown with staggered line items and height animation.