Motion Foundations

Motion Foundations

The base layer of the motion system. Defines every value, constraint, and rule that downstream skills (motion-patterns, motion-advanced) inherit. Load this skill before any animation work begins.

When to Activate

• Starting any animated component from scratch
• Setting up tokens, spring presets, or easing values
• Implementing prefers-reduced-motion support
• Debugging hydration mismatches from animation initial states
• Evaluating whether an animation should exist at all

Outputs

This skill produces:

• A shared motionTokens object (duration, easing, distance, scale)
• A shared springs preset map (5 named configs)
• A shouldAnimate() gate used by all components
• Accessibility-compliant animation defaults via useReducedMotion
• SSR-safe initial states with zero hydration warnings

Principles

Motion must do at least one of the following or it must be removed:

• Guide attention
• Communicate state
• Preserve spatial continuity

Responsiveness always outranks smoothness. A 60 fps animation that causes input delay is worse than no animation.

Rules

These are non-negotiable. They apply to every component in the system.