Product Motion Design

Use motion to explain hierarchy, causality, state, and spatial relationships. Do not animate a page merely to make it look expensive.

Workflow

1. Identify the user task, focal action, state changes, and moments where motion can improve comprehension.
2. Define a motion hierarchy: page entrance, section reveal, component transition, feedback, and ambient motion.
3. Choose the lightest mechanism that fits: CSS for simple states, the existing React animation library for component lifecycle, GSAP for coordinated timelines or scroll, and Three.js only for a real 3D requirement.
4. Establish duration, easing, distance, stagger, interruption, and reduced-motion rules before implementation.
5. Scope animation selectors to component roots. Register plugins once and clean timelines, observers, listeners, frames, geometries, materials, textures, and renderers on teardown.
6. Keep layout stable. Animate transform and opacity where possible; avoid perpetual main-thread work and broad transition: all.
7. Adapt density and choreography for touch, narrow containers, low-power devices, and hidden tabs.
8. Verify real pixels, interaction, resize behavior, and nonblank canvas output at mobile and desktop widths.

Motion Rules