Micro-interactions that feel alive

Why do some interfaces feel alive while others feel mechanical, even when they animate the same things? After a lot of experimenting, including building the animated Pyrus on this site, I’ve landed on a few principles.

Tweens feel robotic, springs feel physical

A classic CSS transition moves from A to B over a fixed time. That’s fine for fades, but for things people touch it can feel stiff. A spring instead has stiffness and damping: it accelerates, overshoots slightly and settles. Our brains read that as physical.

// a tiny spring, stepped every frame
velocity += (target - value) * stiffness * dt;
velocity *= 1 - damping * dt;
value += velocity * dt;

Springs also handle interruptions gracefully. If the target changes mid-animation, the motion simply bends toward the new target instead of jumping.

Anticipation and follow-through

Animators have used these for a century. Before a jump, a character crouches (anticipation); after landing, it squashes and settles (follow-through). In UI, a button that dips slightly on press and springs back on release does the same thing at a tiny scale.

Restraint is the real skill

If everything moves, nothing stands out.

• Animate in response to the user, not constantly.
• Keep UI motion short, usually under 300ms for feedback.
• Use one bold moment per screen, not ten.
• Idle motion should be subtle enough to ignore.

Respect reduced motion

Some people get dizzy or nauseous from motion. Honour prefers-reduced-motion by replacing movement with simple fades or static states. It’s a small effort that makes the experience work for everyone.

Performance keeps it alive

Motion that stutters feels worse than no motion. Animate transform and opacity, batch your DOM reads before writes, and pause animations that are off-screen. The goal is a steady 60 frames per second.

Want to see these ideas in action? Go back to the home page and click Pyrus.