Core Concepts
Micro-Interactions
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)
// A fast, crisp spring for small feedback
{ stiffness: 600, damping: 30, mass: 1 }Related Glossary Terms
Pillar Guides & Tools
Apply Micro-Interactions in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.