tactile-interaction-curveslisted

# Tactile Interaction Curves A button that snaps instantly between two colours, or slides linearly from one state to another, tells the user "this is a picture of a button". One that accelerates quickly out of rest and settles softly, then visibly compresses under the cursor, tells them "this has mass". The difference is a few lines of CSS, and it's the single cheapest way to make an interface feel expensive. The model is physical: things at rest need a push to move (fast start), things in motion lose energy (slow landing), and pressing something compresses it (scale down, fast). Every interactive state change should be legible as one of those three. ## The three rules **1. Ease out, never linear, never `all`.** Motion uses a curve with a fast start and a long deceleration — `cubic-bezier(0.16, 1, 0.3, 1)` is the workhorse, `cubic-bezier(0.25, 1, 0.5, 1)` for smaller elements. Keep it under 300ms — that's the budget for the *visible* change to land; a spring recoil or settle tail (as in `magnetic-hitbox-warp`) may run on to ~400–450ms because the state has already arrived and only the last few pixels are still moving. `linear` is banned for *motion*; it's fine — actually preferable — for pure colour crossfades (`background-color 150ms linear`), which is what your eye expects from a tint change. `transition: all` is banned because it silently animates layout properties (`width`, `padding`, `height`) that jank, and makes the exit timing impossible to control. **2. Enter sl