Shrinking Header
The header shrinks over the first 120 px of scroll and gains its shadow only then.
Usage
Meant for
Examples
On a Mobile Nav
The bar loses height and gains a shadow as the page moves under it, all three parts on one timeline so they arrive together. The bar is the real MobileNav (data-wm-bar), its logo the mark (data-wm-mark). Driving it from real scroll means swapping the timeline for animation-timeline: scroll(), which is not Baseline yet — that is why this one runs on a clock.
Running: Index design tokens6.3s
Done: Deploy checkout-v342.1s
Done: Sync Figma variables3.8s
Waiting: Send weekly report—
Done: Rotate API keys0.9s
Failed: Import CSV1.2s
The class is wm wm-shrinking-header — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.