Motion Language
This document defines the motion system for MHMD Studio. Motion is treated as a functional layer of the interface that improves understanding, communicates relationships, and provides feedback. Every animation should have a measurable purpose.
Document Metadata
| Property | Value |
|---|---|
| Document | Motion Language |
| Version | 1.0 |
| Status | Active |
| Owner | Mohammed El Maachi |
| Last Updated | July 2026 |
Purpose
Motion provides continuity between interface states.
It should reduce cognitive effort by helping users understand what changed, why it changed, and what they should do next.
Motion is never decoration.
Motion Philosophy
The MHMD Studio motion system should feel:
- Calm
- Refined
- Confident
- Responsive
- Predictable
- Lightweight
- Natural
Animation should support the interface rather than become the interface.
The highest quality motion often goes unnoticed because it feels expected.
Motion Principles
Every animation must satisfy at least one of the following objectives:
- Explain a state change.
- Confirm user input.
- Guide visual attention.
- Maintain spatial continuity.
- Reduce perceived waiting time.
- Improve comprehension.
If none apply, the animation should not exist.
Motion Characteristics
Motion should be:
- Smooth
- Subtle
- Intentional
- Consistent
- Fast enough to feel responsive
- Slow enough to remain understandable
Avoid exaggerated or theatrical movement.
Timing Scale
| Interaction | Duration |
|---|---|
| Hover | 120–180 ms |
| Focus | 120–180 ms |
| Button Press | 150–200 ms |
| Card Hover | 180–220 ms |
| Tooltip | 150–250 ms |
| Dropdown | 180–240 ms |
| Modal | 250–320 ms |
| Drawer | 280–350 ms |
| Page Transition | 300–450 ms |
| Hero Animation | 500–800 ms |
Longer durations should be reserved for meaningful transitions.
Easing
Preferred easing functions:
- ease-out
- ease-in-out
- spring (light damping)
Motion should accelerate naturally and settle gently.
Avoid:
- Bounce
- Elastic
- Overshoot
- Cartoon-style easing
Hover States
Hover feedback should communicate interactivity.
Examples include:
- Border color change
- Slight elevation
- Subtle background adjustment
- Small opacity transition
Avoid dramatic scaling or rotation.
Focus States
Keyboard focus should always be visible.
Requirements:
- High contrast
- Consistent appearance
- Smooth transition
- No layout shift
Never remove focus indicators without providing an accessible alternative.
Active States
Active interactions should communicate confirmation.
Examples:
- Slight button compression
- Background adjustment
- Border emphasis
Avoid large movement.
Loading States
Prefer skeleton loading over spinners.
Skeletons should:
- Match final layout
- Preserve spacing
- Minimize layout shifts
Use spinners only when layout cannot be predicted.
Progress Indicators
Progress should always communicate:
- Current state
- Remaining work
- Completion
Avoid indefinite loading whenever possible.
Page Transitions
Page transitions should preserve context.
Objectives:
- Reduce abrupt changes
- Maintain orientation
- Reinforce navigation
Transitions should never delay access to content.
Section Reveals
Content may fade and translate slightly into view.
Recommended movement:
- 8–24 px
Recommended opacity:
- 0 → 100%
Avoid exaggerated vertical movement.
Navigation Animation
Navigation should:
- Fade smoothly
- Maintain position
- Avoid unnecessary movement
The navigation should feel stable.
Modal Animation
Sequence:
- Overlay fades in.
- Modal scales gently from 98% to 100%.
- Opacity increases simultaneously.
Closing reverses the sequence.
Avoid dramatic zoom effects.
Drawer Animation
Drawers should slide from the appropriate screen edge.
Movement should feel direct.
Avoid elastic overshoot.
Dropdown Animation
Dropdowns should:
- Fade
- Translate slightly downward
- Preserve focus
Duration:
180–240 ms
Tooltip Animation
Tooltips should:
- Fade
- Move slightly upward
Movement:
4–8 px
Accordion Animation
Content height should animate smoothly.
Avoid abrupt expansion.
Respect reduced-motion preferences.
Tabs
Transition should emphasize content continuity.
Indicator movement should remain subtle.
Avoid large sliding panels.
Carousels
Avoid autoplay.
Allow:
- Swipe
- Keyboard navigation
- Buttons
Transitions should maintain orientation.
Hero Animation
Hero animations should establish atmosphere.
Allow:
- Slow illustration movement
- Gentle fades
- Subtle parallax
Avoid distracting motion.
Scroll Behavior
Scrolling should feel native.
Never hijack scrolling.
Smooth scrolling may be used for internal anchor links.
Parallax
Parallax should be subtle.
Movement ratio:
0.05–0.15
Avoid dramatic depth effects.
Micro-Interactions
Micro-interactions improve confidence.
Examples:
- Copy confirmation
- Save confirmation
- Form validation
- Successful submission
- Hover feedback
- Toggle changes
Each interaction should communicate one clear outcome.
Reduced Motion
Respect the operating system preference.
When enabled:
- Remove decorative animations.
- Shorten transitions.
- Preserve essential feedback.
- Avoid parallax.
Usability should remain unchanged.
Accessibility
Motion should never:
- Trigger seizures
- Cause dizziness
- Hide information
- Prevent interaction
Users should always remain in control.
Performance
Animations should maintain 60 FPS whenever possible.
Prefer:
- transform
- opacity
Avoid animating:
- width
- height
- top
- left
- margin
Unless necessary.
Motion Consistency
Every interaction should feel like part of one coherent system.
Users should recognize motion patterns throughout the product.
Motion QA Checklist
Before approving an animation verify:
- Purpose is clear.
- Duration is appropriate.
- Easing is consistent.
- Reduced motion is supported.
- Performance is acceptable.
- Accessibility is maintained.
- Motion reinforces understanding.
AI Motion Rules
AI systems generating interfaces must:
- Reuse existing motion patterns.
- Respect duration scale.
- Respect easing standards.
- Avoid decorative animation.
- Preserve accessibility.
- Optimize performance.
- Never introduce motion without documented purpose.
Final Principle
Motion should feel inevitable.
Every transition should appear to be the natural consequence of user interaction rather than an added visual effect.
The best motion disappears into the experience.