Motion
The intentional use of animation and transition to guide attention, provide feedback and clarify relationships—enhancing usability without distracting or delaying task completion.
Motion in Bolt serves to orient users, confirm actions and smooth transitions between states. It is never decorative or over-the-top. When applied thoughtfully, motion reduces cognitive load by showing how elements relate, where content comes from and what has changed.
Motion reveals relationships and continuity
Permalink to "Motion reveals relationships and continuity"Motion helps users understand cause and effect. It confirms that an action has been registered, shows the result of an interaction and directs focus to what has changed.
- Animate transitions to show how interface states relate to one another
- Use motion to reveal spatial relationships (e.g., drawers sliding in, panels expanding, form submissions)
- Maintain visual continuity as users navigate between screens or sections
- Smooth transitions reduce disorientation and help users maintain context
- Motion should feel responsive—avoid delays that slow task completion
Motion remains subtle and purposeful
Permalink to "Motion remains subtle and purposeful"- Motion should feel natural and unobtrusive—never distracting or excessive
- Durations are brief enough to feel responsive but long enough to be perceivable
- Avoid motion that draws attention away from the task at hand
- Reserve dramatic or longer animations for rare, high-priority moments (critical alerts, success confirmations)
Motion respects accessibility and user preferences
Permalink to "Motion respects accessibility and user preferences"- All motion must honor the
prefers-reduced-motionsetting, ensuring accessibility for users with vestibular sensitivities or motion preferences - When reduced motion is enabled, replace animations with instant state changes or simpler, less intense transitions
- Avoid motion that flashes, strobes or creates rapid visual changes
- Ensure motion never obscures content or prevents access to functionality
Why It Matters
Permalink to "Why It Matters"Purposeful motion improves usability by confirming actions, clarifying relationships and maintaining context—while respecting user needs and preferences.
When motion is subtle, consistent and accessible, it enhances the user experience without drawing attention to itself. Thoughtful animation makes interfaces feel responsive, cohesive and easier to navigate. Conversely, excessive or inaccessible motion can disorient users, slow task completion and create frustration.
Simple rule of thumb: If the motion doesn't help users understand what happened or where to look next, remove it.