Tooltip

Tooltips are usually an afterthought. This one animates from the trigger, which makes the relationship between label and control obvious.

The idea

Tooltip exists to make one state change legible. The interaction starts where the user's attention already is, and ends somewhere they expected to land.

Motion earns its place when it explains state. Everything else is noise in a nice suit.

How it works

A spring with high stiffness and moderate damping does most of the work. No timelines, no keyframes — just two states and a transition between them, so the component stays readable months later.

Everything is driven by React state. Hover, tap, and layout changes are declared on the element itself, which means the animation cannot drift out of sync with what is actually rendered.

Using it

Drop it into any page, restyle it with your own tokens, and tune the spring until the weight feels right for your product. Nothing here depends on global CSS.