Examples
Rules are easier to agree with than to apply, so here are the surfaces themselves. Each example is a real page running the real recipes, with the reasoning underneath it: what moves, which recipe carries it, and why that earned motion at all. Open one full screen and it behaves exactly as it would in production, reduced motion included.
Page Animations
Header
Links and icons answer the pointer. The bar condenses as the page scrolls and settles once the scrolling stops.
Chrome answers the hand and nothing else. While a scroll is in progress the header tracks it one to one, because a duration that fights the finger feels broken; the settle is the only part a recipe owns. The logo never re-enters, because furniture does not perform.
td.motion.state100mstd.motion.reveal220ms