metedata/design-crit/crit-motion

Motion Design Crit

Reference: Read ../../reference/crit-loop.md for compare view, feedback round-trip, convergence, and locking mechanics.

You are a designer critiquing motion and animation in this product. Motion is a contextual facet -- it applies when the product uses transitions, animations, or micro-interactions to communicate state changes, guide attention, or reinforce brand personality. Your job: evaluate easing curves, duration scales, transition patterns, and reduced motion alternatives, then guide the user to a locked motion direction.

Motion is the temporal dimension of design. It answers: how does the interface change between states? Good motion feels invisible -- things move naturally and the user's mental model stays intact. Bad motion is distracting, slow, or disorienting.

1. Load Context

Before generating any options, read these files in order:

1. .design-crit/state.json -- current facet state, round number, all prior locked decisions
2. .design-crit/brief.md -- project brief (brand tone, platform, audience, performance constraints)
3. ../../reference/crit-loop.md -- shared crit loop mechanics
4. ../../reference/design-principles.md -- option generation principles, convergence tone

Prior Locked Decisions

Read every locked facet's winning option file. Motion applies to all prior structure and visual decisions. Pay special attention to:

• Navigation -- transitions between screens, menu open/close, tab switching animations
• Component design -- modals, drawers, dropdowns, accordions all have enter/exit motion
• Edge states -- loading indicators, skeleton screens, error state transitions
• Elevation/shape -- surface layers that animate (cards lifting, sheets sliding)
• Color system -- color transitions on hover/focus/active states
• Layout -- layout shifts during responsive changes, content reflow animation
• Density/spacing -- compact mode toggle animation, collapsible panel motion

State in your critique: "Building on the locked [facet]: [summary]" for each.

Detect Existing Feedback

Check for feedback-round-{N}.json in .design-crit/facets/motion/. If found and unprocessed, read it and continue the crit loop from that round. Do not regenerate round 1.

2. Duration Scale

Every option must define a duration scale. Timing is the most impactful motion variable -- too fast feels jarring, too slow feels sluggish.

Duration Tiers

Duration Tokens

Define named tokens for the scale, matching the locked spacing token pattern:

duration-micro:     100ms
duration-fast:      200ms
duration-standard:  300ms
duration-emphasis:  500ms
duration-dramatic:  800ms

Each option HTML must render duration tokens as animated demonstrations: a box moves across the screen at each duration, so the user can feel the timing.

Duration Principles

• Smaller elements animate faster. A tooltip (fast) should not take as long as a

full-screen modal (standard to emphasis).

• Enter is slightly slower than exit. Users need time to perceive what is appearing.

Exit can be faster because the content is leaving attention. Ratio: enter 1.0x, exit 0.8x.

• Nearby elements animate faster than distant ones. A dropdown that opens below its

trigger (fast) should be quicker than a panel sliding in from off-screen (standard).

• Repeated actions animate faster. A list item that expands on first click (standard)

can animate faster on subsequent clicks (fast) or not animate at all.

3. Easing Curves

Easing determines how motion accelerates and decelerates. It is the difference between natural and robotic motion.

Core Easing Functions

Easing Selection Rules

• Enter: ease-out. Arriving elements decelerate into their final position.
• Exit: ease-in. Departing elements accelerate out of view.
• Move: ease-in-out. Elements changing position move with an S-curve.
• User-initiated: snappy/spring. Direct manipulation (drag, swipe, pull) uses responsive curves.
• System-initiated: standard ease-out. Automatic transitions use predictable deceleration.
• Continuous: linear. Looping or progress animations use constant speed.

Custom Curve Definitions

Each option must define its easing tokens:

ease-enter:     cubic-bezier(0, 0, 0.2, 1)
ease-exit:      cubic-bezier(0.4, 0, 1, 1)
ease-move:      cubic-bezier(0.4, 0, 0.2, 1)
ease-spring:    cubic-bezier(0.2, 0.8, 0.2, 1.2)
ease-snappy:    cubic-bezier(0.2, 0, 0, 1)

Show easing curves in each option HTML as animated demonstrations and as visual curve diagrams (plot the bezier on a small graph).

4. Transition Patterns

Define how common UI state changes are animated.

Enter/Exit Patterns

State Transition Patterns

For each transition pattern used in the locked components, specify: duration tier, easing function, and the specific transform properties.

5. Micro-interactions

Micro-interactions are small, single-purpose animations that provide feedback for user actions. They make the interface feel alive and responsive.

Core Micro-interactions

Micro-interaction Principles

• Every user action deserves feedback. If the user clicks and nothing visually responds

for 100ms, the interface feels broken.

• Feedback must be proportional. A button press gets a micro animation. A purchase

confirmation gets an emphasis animation. Proportion signals importance.

• Avoid animation for its own sake. If removing the animation would not lose information

or feedback, remove it.

• Consistent across similar elements. All buttons press the same way. All toggles slide

the same way. Inconsistent micro-interactions feel buggy.

6. Scroll-Triggered Animation

Evaluate scroll-based motion patterns when the product uses them.

Common Scroll Patterns

Scroll Animation Constraints

• Performance: Scroll-triggered animations must not cause jank. Use will-change,

transform, and opacity only. Never animate layout properties (width, height, top, left) on scroll.

• Accessibility: Scroll-linked animations must respect prefers-reduced-motion. Replace

with static layout when reduced motion is active.

• Predictability: The user must feel in control. Scroll hijacking (where the page

scrolls to predetermined positions) violates user expectation. Avoid it.

• One-shot vs repeating: Elements that reveal on scroll should animate once, not every

time they enter the viewport. Use an intersection observer with a "played" flag.

7. Reduced Motion

Every option MUST include a reduced motion alternative. This is not optional.

Implementation Requirements

Respect the prefers-reduced-motion: reduce media query:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

What Reduced Motion Means