Core Concepts
Canonical Definition
Subtle, single-purpose animations that provide immediate sensory feedback, convey status, and enhance usability during interface actions.
Detailed Explanation & Context
Micro-interactions are contained product moments that revolve around a single use case: toggling a switch, liking an item, refreshing a feed, or typing in an input field. When executed with subtle spring dynamics and tactile visual response, micro-interactions build user confidence, reduce cognitive friction, and elevate the perceived craft of software.
Mathematical Model / Governing Formula
Trigger → Rules → Feedback → Loops & Modes (Dan Saffer Framework)Key Takeaways
- Confirm receipt of user input without requiring jarring modal dialogs.
- Communicate status transitions (e.g. from idle to saving to saved).
- Subtle, fast feedback: optimal micro-interaction durations range between 100ms and 250ms.
Implementation Syntax (JSX)
// Micro-interaction: tactile like button with spring pop
const { scale } = useSpring({ scale: liked ? [1, 1.25, 1] : 1, stiffness: 600 });Pillar Guides & Tools
Apply in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.