Motion System: Microsoft Fluent Design System

Category: Enterprise / Productivity Calm, purposeful motion grounded in depth and materials — motion that guides without distracting.

Motion Philosophy

Fluent motion is designed for the workplace. Users spend hours each day inside Microsoft products — Word, Teams, Outlook, the Windows shell — and motion must respect that context. Every animation should reduce cognitive load, not add to it. Motion communicates state changes, establishes spatial relationships, and confirms that the system has responded to input. It does not celebrate, entertain, or draw attention to itself.

The system is built around a Z-axis metaphor inherited from the Fluent Design language. Surfaces exist at different depths, and transitions between them should convey that spatial logic. A dialog that opens should feel as though it is rising toward the user. A panel that dismisses should recede. This depth model is expressed through subtle scale, opacity, and shadow changes rather than dramatic movement — the effect is felt more than seen.

Accessibility is a non-negotiable first principle. Microsoft's products serve hundreds of millions of users, many of whom rely on assistive technologies or have vestibular disorders. prefers-reduced-motion is respected strictly: when set, all transitions collapse to instant crossfades at most. Duration tokens are intentionally conservative — the system errs toward brevity because a slow animation in a productivity tool is a tax paid on every interaction.

Duration Scale

The doubling rhythm (approximately ×2 between tokens) creates a consistent perceptual hierarchy. 83ms and 167ms were chosen so that two fast transitions in sequence feel like a single normal-duration event.

Easing

The fluent-standard curve (0.1, 0.9, 0.2, 1) is the signature Fluent ease. The steep early deceleration means elements appear to snap toward their destination while settling smoothly — it reads as confident and responsive on Windows hardware where 60fps is not guaranteed.

Spring Configs (Framer Motion)

Fluent's web layer primarily uses CSS transitions rather than spring physics, but the following configs apply to Fluent UI React components where spring behavior is appropriate:

• Soft (panel overlays, dialogs): stiffness: 200, damping: 30, mass: 1
• Control (toggles, sliders, checkboxes): stiffness: 350, damping: 35, mass: 0.8
• Depth (cards lifting on hover in Windows contexts): stiffness: 300, damping: 28, mass: 1
• Reduced (prefers-reduced-motion fallback): stiffness: 1000, damping: 100, mass: 1 — resolves immediately

No bouncy or underdamped springs. All spring configs must reach equilibrium without oscillation, consistent with the calm, productive register of the system.

Stagger Patterns

• Command bar items: no stagger — all items appear simultaneously at duration-fast
• List rows (initial load): 16ms between each row, capped at 8 rows (remaining rows appear instantly)
• Card grid: 24ms between each card, capped at 6 cards
• Navigation flyout items: 20ms between each item
• Notification stack: 40ms between each notification to make them individually readable

Stagger is only applied on initial render or after a filter/search change, never during scroll or reorder operations.

Enter / Exit Patterns

Fade + Slide (dialogs, panels, task panes)

enter: opacity 0→1, translateY 8px→0, duration: duration-normal (333ms), ease: fluent-decelerate
exit: opacity 1→0, translateY 0→4px, duration: duration-fast (167ms), ease: fluent-accelerate

Scale Emerge (menus, dropdowns, context menus)

enter: opacity 0→1, scale 0.98→1 (transform-origin: top), duration: duration-fast (167ms), ease: fluent-standard
exit: opacity 1→0, scale 1→0.98, duration: duration-ultra-fast (83ms), ease: fluent-accelerate

Slide from Edge (side panels, navigation rail, Teams sidebar)

enter: translateX -100%→0, duration: duration-normal (333ms), ease: fluent-decelerate
exit: translateX 0→-100%, duration: duration-fast (167ms), ease: fluent-accelerate

Acrylic Reveal (Windows-native backdrop blur surfaces)

enter: opacity 0→1 with backdrop-filter blur 0→20px, duration: duration-ultra-slow (833ms), ease: fluent-standard
exit: opacity 1→0, duration: duration-normal (333ms), ease: fluent-accelerate

Depth Transition (navigating between surfaces in Teams, SharePoint)

enter: opacity 0→1, scale 0.97→1, duration: duration-normal (333ms), ease: fluent-standard
exit: opacity 1→0, scale 1→1.02, duration: duration-fast (167ms), ease: fluent-accelerate

Interaction States

• Hover: Background fill transition at duration-ultra-fast (83ms) fluent-standard. Reveal effect (radial gradient following cursor) is CSS-only and appears instantly. No scale changes on hover.
• Press/Active: Background darkens at 50ms linear. No transform scale — Fluent avoids physical depression metaphors in favor of color state changes, keeping the interface feeling flat and controlled.
• Focus: Focus ring appears at duration-ultra-fast (83ms) fluent-standard. In high-contrast mode, focus ring appears at 0ms with no transition — accessibility contexts never wait for animation.
• Drag (Fluent lists, SharePoint): Dragged row opacity drops to 0.6 at 83ms, a shadow elevation appears. Drop target highlights with a 2px accent-colored line that fades in at duration-fast (167ms).
• Loading / Skeleton: Shimmer animation using CSS gradient sweep, 1600ms duration, linear, infinite. Progress bars use fluent-linear easing. Spinner is circular, 16 or 20px, 750ms linear rotation.
• Toggle/Switch: Thumb translates with fluent-standard at duration-fast (167ms). Track color crossfades simultaneously.

Rules

• Respect prefers-reduced-motion strictly. When active, all transforms are removed and opacity transitions are capped at 83ms maximum. Loops (spinners, shimmer) are stopped entirely and replaced with static indicators.
• Never animate width, height, top, left, or padding directly. Use transform: translate and opacity for all motion. Use max-height transitions only as a last resort and only with linear easing.
• Exit animations must always be shorter than enter animations. Clearing the screen is always more urgent than filling it.
• Depth transitions should be directional — navigating forward should feel like moving into the screen (scale up), navigating backward should feel like retreating (scale down). Never reverse this relationship.