A hover state is the smallest promise an interface makes. It costs one line of CSS and it is the first thing a visitor tests, usually without meaning to. Get it wrong and the page feels like a document. Get it right and the page feels like a machine that noticed you.

Linear is the tell

The default easing in most codebases is whatever the framework shipped, and the framework usually shipped ease. It is not terrible. It is just anonymous — the visual equivalent of system font stack, present on every site that never made a decision.

Real movement doesn’t start and stop at the same rate. Things accelerate out of rest and settle into it. A curve that leaves quickly and arrives slowly reads as physical; a curve that does the opposite reads as hesitant. The distance between those two feelings is four numbers in a cubic-bezier().

The practical shortcut: pick two curves and commit. One that decelerates for things entering, one that accelerates for things leaving. Almost everything else is a variation on those.

Duration belongs to the gesture, not the system

The mistake I see most often is a single duration token applied everywhere, which produces dropdowns that feel sluggish and page reveals that feel rushed. Both from one reasonable-sounding decision.

Scale duration to distance travelled. An element moving four pixels needs 120ms. An element crossing the viewport needs three times that. Applying one number to both means one of them is always wrong, and the one that’s wrong is the one people repeat forty times a day.

Orchestration is the whole trick

A single element animating is a detail. Several elements animating in a considered order is a sequence, and a sequence is what makes a page read as assembling itself rather than as a set of independent twitches.

The cheapest version of this is a stagger — the same entrance, offset by fifty milliseconds per item. Fifty reads as one gesture. Two hundred reads as a queue. Beyond about six items the eye stops tracking the sequence and starts waiting for it to finish, which is the signal to animate the group rather than its members.

Then take it all away

Everything above is negotiable, and someone will have negotiated it already by setting prefers-reduced-motion. Honour it globally rather than per-component, because the component you forget is the one that will spin.

The point of a micro-interaction is never the motion. It’s the impression that the interface is paying attention, and that impression has to survive the visitor who has asked for stillness.