/flow

Intentional Motion Framework

Purpose: Use this reference when planning motion for a page or view. Limits motion to 2-3 intentional types per view to avoid the "everything animates" anti-pattern.

2026 platform default = motion-rich. Both Material 3 Expressive (Android 16, spring-based physics on every default transition) and Apple Liquid Glass (iOS 26, depth-aware materials reacting to context and motion) make the platform itself motion-rich out of the box. The 2-3 Motion Rule below now means "2-3 team-authored motion types on top of whatever the platform is already animating" — not "2-3 motion types total". When the platform contributes a spring on every interaction, team-authored decorative motion needs to clear a higher bar; the budget below tightens, it does not relax.

Contents

Reduced-Motion-First Design Philosophy

The design order is inverted: design reduced-motion first, then add full motion.

Critical rule: Never disable ALL animation under prefers-reduced-motion. Functional feedback (loading spinners, error shakes, success checks) must persist. Only decorative and large-displacement motion should be removed.

/* Base: reduced motion (functional feedback only) */
.button:active { scale: 0.97; }
.toast { opacity: 1; }

/* Enhancement: full motion */
@media (prefers-reduced-motion: no-preference) {
  .button:active { scale: 0.97; transition: scale 0.1s ease; }
  .toast { animation: slide-up 0.3s ease-out; }
}

Purposeful Motion Manifesto

Every animation must answer ONE of these questions:

1. Where am I? — Spatial orientation (page transitions, navigation feedback)
2. What changed? — State communication (toggle, form validation, data update)
3. What should I do? — Attention guidance (onboarding spotlight, CTA pulse)
4. What's happening? — Process feedback (loading, progress, async operations)

If an animation answers none of these, it is decorative and should be the first to go under reduced-motion or performance constraints.

• The 2-3 Motion Rule
• Motion Slot System
• Slot Definitions
• Reduced Motion Requirements
• Motion Audit Process
• Common Slot Configurations

The 2-3 Motion Rule

Every view should have at most 2-3 distinct motion types. More than 3 creates visual chaos and reduces the effectiveness of each animation.

"Distinct motion type" = a unique combination of purpose, timing, and trigger. Two buttons with identical hover effects count as one type. A hover effect and a scroll reveal count as two types.

Motion Slot System

Each view has 3 motion "slots." You must choose which slots to fill. Leaving a slot empty is often the right choice.

Slot Rules

• Fill Slot 3 first (interaction feedback is highest priority)
• Slot 1 is optional (many views don't need a hero entrance)
• Slot 2 is the most dangerous (scroll animations easily become distracting)
• Never fill all 3 slots with heavy animations

Slot Definitions

Slot 1: Hero Entrance (300-600ms)

The first thing the user sees when entering a view. Use for brand moments and primary content reveal.

Reduced motion: Replace with instant opacity fade (150ms) or no animation.

Slot 2: Scroll-Linked (Continuous or 200-400ms)

Animations triggered or driven by scroll position. These are high-risk for distraction.

Reduced motion: Remove parallax entirely. Keep scroll fade-in as instant appearance. Keep functional indicators.

Slot 3: Interaction Feedback (150-250ms)

Micro-interactions that confirm user actions. These are the highest-priority motion type.

Reduced motion: Keep hover color changes. Remove scale transforms. Keep focus indicators. Reduce duration to 100ms or instant.

Reduced Motion Requirements

Every motion slot requires a reduced-motion fallback. No exceptions.

Implementation Pattern

/* Default: full motion */
.hero-title {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-enter 400ms ease-out forwards;
}

/* Reduced motion: instant or no animation */
@media (prefers-reduced-motion: reduce) {
  .hero-title {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

Reduced Motion Decision Guide

Motion Audit Process

Per-View Audit

For each view or page, document the motion types in use:

## Motion Audit: [View Name]

### Active Slots
| Slot | Motion Type | Duration | Purpose | Reduced Motion |
|------|-------------|----------|---------|---------------|
| 1 | [type or empty] | [ms] | [purpose] | [fallback] |
| 2 | [type or empty] | [ms] | [purpose] | [fallback] |
| 3 | [type or empty] | [ms] | [purpose] | [fallback] |

### Motion Count
- Total distinct motion types: [N] (must be ≤ 3)
- Reduced motion coverage: [complete / gaps identified]

### Violations
- [ ] No slot exceeds its duration range
- [ ] No decorative-only animations
- [ ] All slots have reduced-motion fallbacks
- [ ] Total distinct types ≤ 3

Red Flags

Common Slot Configurations

Landing Page (Recommended)

App Dashboard

Settings / Admin

Editorial / Blog