Users can rarely articulate why one interface feels premium and another feels cheap. They just know. The gap is almost always micro-interactions — the hundred small motion and feedback moments that happen below conscious awareness but above the threshold of noticeability when they're absent.
What Is a Micro-interaction?
Dan Saffer's definition is still the best: a contained product moment that does one small thing. A toggle animating between states. A button that gives haptic-equivalent visual feedback on press. A form field that shakes when validation fails rather than simply turning red. None of these are features. Together they're the texture of a quality product.
The Four Parts
Triggers, rules, feedback, loops and modes. A button click is the trigger. The animation rule determines how it responds. The visual state change is the feedback. The loop determines whether it repeats.
Most teams implement feedback and ignore the rest. That's why buttons snap between states rather than transitioning.
Spring Physics Over Duration Curves
Bezier easing curves are a hack. Physical spring simulations produce motion that feels natural because springs are how mass actually moves in the world. Framer Motion's spring config:
transition={{
type: "spring",
stiffness: 400,
damping: 28
}}High stiffness, appropriate damping. The element settles quickly without bouncing cartoonishly. Adjust stiffness and damping until the motion feels like something you'd want to touch.
The 100ms Rule
Any response to a user action that takes more than 100ms must show immediate feedback — even if the actual work takes longer. A button should visually depress and show a loading indicator at the moment of click, not after the network round-trip completes. The action felt instant. The wait feels like a separate, expected phase.
Shared Layout Animations
The most underused Framer Motion feature. When elements exist in multiple positions across state changes, shared layout animations interpolate between positions automatically:
<motion.div layoutId="active-indicator" />Tab indicators that slide between tabs. Selected card that expands to a modal. List items that reorder with fluid motion. These patterns are a single prop.
The Restraint Principle
Every animation you add is noise someone has to habituate to. The goal is never to show off motion — it's to reinforce the mental model. If an animation doesn't explain what just happened or what's about to happen, it's decoration, and decoration accumulates into fatigue.
Animate state transitions. Animate hierarchy. Animate acknowledgment. Skip the rest.