Motion

Panel

Chrome reveal, nav drawers and slide-over panels. Reduced motion collapses the duration to 0s so the panel appears instantly rather than sliding.

Lift

The pointer response of a raisable surface. The card rises and its shadow deepens; the focal image inside rises further and zooms slightly, so the product leads the surface it sits on. Hover-capable pointers (mouse) reach that end state on `:hover`; touch pointers reach the same end state via touch-down, but slower — a long, hard-decelerating creep that reads as elastic strain rather than a snap, settling back at the normal speed on release. Keyboard focus uses the same end state as hover, at every breakpoint. Reduced motion zeroes every offset, the scale, and both durations, leaving the card completely still.

Reveal

How a group of items arrives. Each fades in and rises into place, one after another rather than all at once, so the eye is led along the row. The stagger is the point — it is what makes a list read as a sequence instead of a block appearing. Triggered when the group scrolls into view, once — or, for content at the top of the page that may only peek above the fold, as soon as any of it is on screen at load (`on-screen-at-load`). Under reduced motion the offset and stagger drop to zero and the items are simply present.

Anchor arrival

What happens when a link sends the eye to something already on the page — a CTA anchoring back to the secondary hero's form. The page snaps to the target with a short, smooth scroll on the reveal ease, so it lands rather than drifts; the target then pulses three times per tap, on the panel ease: each pulse swells it a little and fades a 4px stroke in the selected colour (`--color-interactive-selected`, `--border-thick`) in and out around it, so it reads as a breath rather than a bounce. Driven by `useAnchorArrival` (src/system/), which reads these from the CSSOM. Under reduced motion the scroll becomes a jump, the pulse duration drops to zero and its scale to 1, so nothing moves.

Tab dwell

How long an auto-advancing tab group holds one tab before moving to the next (SectionTabbedMedia, plan 28 slice 4). One token, read by two things that must never disagree: the progress ring's CSS animation and the component's JS advance timer, which reads it from the CSSOM rather than duplicating the number. A token and not an author control on purpose — `ControlsSchema` has no number kind, so retuning the dwell is a one-line change here. Under reduced motion the component switches auto-advance OFF entirely instead of shortening it; this value is deliberately NOT zeroed, because a 0s dwell would spin the tabs rather than stop them.

Logo scroll

The mobile logo row in SectionLogoWall scrolls on its own, as one endless line. Its run is this step multiplied by the number of logos, so a longer list moves at the same speed rather than faster. A logo longer than 3.75:1 is capped in width, so the speed in pixels per second for a given step depends on the logo mix. Pausable by a button, and by hover over or focus on the logos. Under reduced motion the row does not move at all and becomes a swipe row; this value is deliberately NOT zeroed, because a 0s run would flicker rather than stop.

Fan

A deck of overlapping cards that follows the pointer — the first motion in the system driven by continuous input rather than triggered by state (CardFan; ADR 0023). Every card derives its position, rotation, depth-scale, dim and opacity in CSS from one number, `--fan-progress`, which the component drives from pointer events and settles by transitioning. That is why there is no animation dependency and why the duration and easing below are real tokens rather than decoration. This family is the only one in the system split into two groups, because it is the only one carrying layout values alongside motion values — and they must NOT be treated alike under reduced motion.

Lift in place

Hover the card. The surface rises by --motion-lift-offset, the tray rises by --motion-lift-focal-offset and zooms by --motion-lift-focal-scale. Keyboard users get the same response via :focus-within when they tab to the card’s CTA, at every breakpoint.

On a touch device, touch and hold the card instead of hovering it: it reaches the same offset, but slowly, over --motion-duration-lift-hold on a hard-decelerating --motion-ease-lift-hold curve — fast at first, then creeping, which reads as elastic strain rather than a second, deeper state. Release settles back at the ordinary --motion-duration-lift regardless of how long the hold ran. Hover and touch-down are gated to hover: hover and hover: none respectively — every pointer covered once, never twice.

Build muscle

High-protein meals to support training and recovery.

Reveal in place

Scroll this row into view. Each card fades in and rises by --motion-reveal-offset, offset from the one before it by --motion-reveal-stagger. It runs once. Reload the page and scroll back down to see it again.

This is a shared primitive (app/globals.css), not a card or carousel behaviour — any container of items can adopt it:

The primitive itself has no opinion on breakpoint — it is a consumer decision. CardLayout runs it at EVERY breakpoint (plan 22 reversed an earlier desktop-only rule): the staggered arrival plays on touch too, coexisting with the touch-down lift because the reveal animates the track item while the lift transforms the card surface inside it — the two never fight over the same transform.

Nine consumers share it today: this demo’s CardLayout, CardFan, SectionCardQuotes, SectionCardGrid, SectionCardStats, SectionCardPhotos and SectionMediaPills arm it on scroll into view; the secondary SectionHero’s form arms it on screen at load (below); SectionTabbedMedia arms it on scroll into view for a panel’s first arrival, then replays it on every subsequent tab swap via a keyed remount.

• The intended way to consume the family is useRevealGroup (src/system/useRevealGroup.ts) — a seam over useRevealOnScroll that returns containerProps, itemProps(stagger, className?) and RevealNoscript, so a new consumer wires all five pieces below without re-deriving them.
• Put data-reveal="pending"|"in" on the container, driven by the useRevealOnScroll hook underneath the seam (src/system/useRevealOnScroll.ts) — it watches the container and flips to "in" the first time it scrolls into view.
• The trigger is scroll into view by default. Pass "on-screen-at-load" as the third argument for content at the top of the page that may only peek above the fold — a short phone, or the browser’s bars showing: if any of it is on screen when it is first observed, it reveals straight away instead of waiting for the first scroll.
• Put the .reveal-item class on each child that should fade and rise.
• Set --reveal-index per child (its position in the group) so the CSS stagger delay is index × --motion-reveal-stagger.
• Pair it with a <noscript> block that forces .reveal-item back to visible — without JS the observer never fires, so the container never leaves "pending".

Build muscle

High-protein meals to support training and recovery.

Lose weight

Portion-controlled, macro-balanced, under 500 kcal.

Increase energy levels

Balanced meals that help prevent afternoon crashes.

Fan, driven by the pointer

Drag the deck sideways and let go — the release projects your velocity forward and settles onto a whole card on --motion-ease-fan-settle, which overshoots by about 15% before coming back. Step it with the arrows beside it or with ←/→ once the deck has focus and you get the calmer --motion-ease-fan-step instead, a 3% nudge. Click any card behind the front one to promote it. The front card does nothing.

There are twelve cards here and no ends: the geometry is progress mod 12, so the deck wraps forever, and the only visible seam is the trailing card fading out as a new one arrives. Nothing in this is a scroller and nothing is an animation library — it is one registered custom property, --fan-progress, being transitioned.

Turn reduced motion on and try it again. The deck stays exactly as fanned, as dimmed and as separated as it is now — it simply jumps between positions instead of gliding. That is the two-group split doing its job: if the arrangement group were zeroed alongside the durations, all twelve cards would be stacked dead-centre right now.