fluid-interaction-review

Fluid Interaction Review

Use this only for direct-manipulation surfaces. It complements motion-review-gate; it is not a general visual-style or Apple-look preset.

Best Fit

• drawers, sheets, swipe actions, carousels, sliders, scrubbers, and draggable panels;
• gesture code using Pointer Events, Motion, Framer Motion, or a library with equivalent primitives;
• reviews where a transition looks acceptable after release but feels disconnected during manipulation.

Do Not Use For

• ordinary buttons, forms, tables, or static marketing sections;
• adding glass, bounce, sound, or haptics as decoration;
• replacing stable library behavior without a reproduced interaction defect;
• imposing universal spring constants or visual styling.

Interaction Contract

1. Continuous tracking — while dragging or swiping, the surface follows the pointer 1:1. Preserve the offset from the point where the user grabbed it; do not jump to the element center.
2. Pointer ownership — use Pointer Events and setPointerCapture(pointerId) when implementing custom gestures so tracking survives leaving the element bounds. Release or cancel capture cleanly.
3. Interruptibility — a moving surface can be grabbed and redirected immediately. Retarget from the current on-screen value and current velocity, not from a stale logical target. Never lock input until an animation finishes.
4. Velocity handoff — sample a short, timestamped movement history and pass release velocity into the settling spring. Guard zero distance, sparse events, and extreme velocity.
5. Momentum projection — when a flick can cross snap points, select the destination from a bounded projection of release velocity, then settle with the handed-off velocity. Do not choose solely from release position.
6. Hysteresis — keep the gesture undecided until movement exceeds a small, input-appropriate threshold. Resolve axis and intent before suppressing native scrolling or committing an action.
7. Soft boundaries — beyond a real bound, apply progressively increasing resistance. Do not hard-stop while the pointer is still moving. Clamp the final resting state to a valid target.
8. Spatial continuity — enter and exit use the same spatial path unless product meaning requires otherwise. Popovers and panels originate from their trigger or manipulation source; reversible motion preserves direction and velocity continuity.