fluidlisted

# Fluid Motion starts from the current on-screen value, inherits the user's velocity, projects momentum forward, and can be grabbed and reversed at any instant. Use springs. Use CSS, Pointer Events, `requestAnimationFrame`, or Motion/Framer Motion. WWDC citations live in `references/hig-index.md`. Do not quote manifesto language. Apply the rules below. ## 1. Response — kill latency The moment lag appears, the feeling of directness "falls off a cliff." Response is the foundation everything else is built on. - **Respond on pointer-down, not on release.** Highlight a button the instant it's pressed. Waiting for `click`/touch-up to show feedback feels dead. - **Be vigilant about every latency.** Audit debounces, artificial timers, transition waits, and the ~300ms tap delay. Anything on the input path that isn't essential is a regression. - **Feedback must be continuous *during* the interaction, not just at the end.** For a drag, slider, or drawer, update the UI 1:1 with the pointer the whole way through — never animate only when the gesture completes. ```css /* Feedback lives on the press, and it's instant */ .button:active { transform: scale(0.97); transition: transform 100ms ease-out; } ``` ## 2. Direct manipulation — 1:1 tracking > "Touch and content should move together." When the user drags something, it must stay glued to the finger — and respect the offset from *where they grabbed it*. Snapping to the element's center on grab breaks the illusion immediately.