UI motion & microinteractions
Also searched as: ui motion, microinteractions, interface animation, button states, motion UX
Canonical Definition
UI motion is the animation of user interface elements — buttons, toggles, sheets, tabs, and modals — demonstrating cause and effect and operational feedback inside software.
10 to 25 frames (300ms - 800ms)
spring({ damping: 12, stiffness: 200, mass: 0.6 })
UI motion bridges user intent with system state. When a user clicks a button, a spinner expands from the click origin, the button shifts into a disabled state, and a success checkmark pops with confetti.
In promotional video, showing high-fidelity microinteractions proves that the product is real, responsive, and thoughtfully designed.
Spring-Loaded Sheets & Modals
Entering bottom sheets with physical mass and overshoot
A bottom sheet springs up from the base of the frame, overshooting slightly before settling into its resting position.
How this works: A modern mobile bottom sheet springing upward with natural damping and backdrop dimming.
- Spring physics calculation with natural overshoot
- Synchronized backdrop blur and opacity transition
- Tactile handle bar micro-motion
State Toggles & Interactive Controls
Exemplifying instant cause-and-effect with fluid transitions
Switching a toggle flips color themes, expands card sections, and confirms user choices with crisp physical satisfaction.
How this works: A toggle switch triggers a coordinated state change across adjacent metric cards.
- Elastic thumb sliding with morphing shape
- Instant UI reconfiguration downstream
- Clear visual feedback for product capability demos
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- UI microinteractions should feel snappier than real life (under 300ms) to maintain high video tempo.
- Always provide immediate visual response on frame 0 of a simulated user action.
Common Failure Modes (What to avoid)
- Sluggish UI animations that make a fast software product feel slow and unresponsive.
Working catalog implementations
Typed Remotion components ready to drop into code.
Sheet Spring-Up
A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease
Pull to Refresh
A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.
Settings Toggle Flow
A composed settings flow with preference rows, toggle switches, and active-state feedback
Badge Pop
A transitions.dev-inspired notification badge pop with elastic scale and count reveal
Build ui motion & microinteractions in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
Spring physics & overshoot
Spring physics is a physical simulation model based on Hooke's Law that computes motion from mass, tension (stiffness), and friction (damping), producing organic overshoot and settlement.
Composition & UIProduct demos & devices
Product demos and device scenes present digital software interfaces inside simulated smartphone, tablet, or desktop frames with realistic camera staging and cursor interactions.
Composition & UIAnimated icons
Animated icons are vector symbols — checkmarks, shields, lightning bolts, and settings gears — that draw on, morph between states, or perform looped actions to reinforce messaging.