What is Micro-interactions?
The short answer
Micro-interactions are small, single-purpose animations that respond to what a visitor does, like a button that presses in, a heart that fills or a field that shakes on an error.
What people say: “little animations”, “when the button reacts”.
Micro-interactions, explained
They confirm that something happened, show state and add personality. The best last a fraction of a second and never make anyone wait.
They should respect the visitor's reduced-motion setting and never be the only signal of a state change.
Questions people ask about Micro-interactions
What is Micro-interactions?
Micro-interactions are small, single-purpose animations that respond to what a visitor does, like a button that presses in, a heart that fills or a field that shakes on an error.
Do animations slow down a website?
Small CSS transitions on transform and opacity cost almost nothing; heavy JavaScript animation libraries and animating layout properties are what slow pages down.
Related terms
Hover effects are visual changes that happen when a pointer moves over an element, like a card lifting, an image zooming or a link underlining.
Magnetic buttonA magnetic button drifts toward the cursor as it gets close, then snaps back, making the button feel physical and inviting a click.
Reduced motionReduced motion is a device setting people turn on when animation makes them dizzy or distracted; sites should honour it by toning down or removing non-essential motion.
Parallax scrollingParallax scrolling moves background and foreground layers at different speeds as you scroll, creating an illusion of depth.
Part of the Web Encyclopedia by Apex Flow Digital. Definitions are general knowledge, kept current, with no invented statistics.