Foundation
MotionA tactical library of motion patterns — covering core purposes and loading states for consistent, purposeful animation.
Guide: Direct attention and structure
Motion that helps users understand structure, navigate, and prioritise information
Menu Navigation
Slide-in animation shows spatial relationship - menu comes from the edge
Tab navigation
Underline animation maintains spatial reference during transitions
Content for structure tab
Confirm: Feedback and status
Motion that provides immediate feedback and confirms actions were successful
Form success state
Confirmation animation builds confidence in critical actions
Toggle states
Spring animation confirms state change with tactile feel. Spring animations are built into the foundation of some UI components.
Delight: Brand moments and emotion
Motion used sparingly to celebrate, surprise, and reinforce positive emotions
Use Sparingly: Delight motion should enhance key moments, not disrupt the experience. Reserve for achievements, milestones, and brand moments.
Withdrawal success
Celebratory animation for critical successful actions builds confidence
Achievement unlocked
Playful animation for milestones creates memorable moments
Streak counter
Number animation with spring physics creates satisfying feedback
When to use delight motion
Good uses
- • First-time user completing onboarding
- • Successful withdrawal or deposit
- • Achieving a milestone or goal
- • Unlocking a new feature
- • Celebrating a win or positive outcome
Avoid
- • Routine, repeated actions
- • Every button click or interaction
- • During focused work or browsing
- • Error states or negative outcomes
- • Loading or waiting states