motion-foundations

Topics in the source

• Motion Foundations
• When to Activate
• Outputs
• Principles
• Rules
• Decision Guidance
• Choosing a duration
• Choosing a spring

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. 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 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 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. These are non-negotiable. They apply to every component in the system. 1. Use motion/react only. Never import from framer-motion. Never mix the two in the same tree. 2. initial must match server output. If the s

This is an excerpt. Refer to the complete source and its current requirements.