divyanshu-iitian 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
- Identify the user task, focal action, state changes, and moments where motion can improve comprehension.
- Define a motion hierarchy: page entrance, section reveal, component transition, feedback, and ambient motion.
- 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.
- Establish duration, easing, distance, stagger, interruption, and reduced-motion rules before implementation.
- Scope animation selectors to component roots. Register plugins once and clean timelines, observers, listeners, frames, geometries, materials, textures, and renderers on teardown.
- Keep layout stable. Animate transform and opacity where possible; avoid perpetual main-thread work and broad
transition: all. - Adapt density and choreography for touch, narrow containers, low-power devices, and hidden tabs.
- Verify real pixels, interaction, resize behavior, and nonblank canvas output at mobile and desktop widths.
Motion Rules
- Interaction feedback is immediate; decorative motion yields to input.
- Scroll animation must preserve reading order and usable content without JavaScript.
- Repeated lists use restrained stagger and a cap; they do not replay on every tiny scroll.
- 3D scenes cap pixel ratio, pause when hidden, resize from the actual container, and provide a static reduced-motion frame.
- Theme changes must update 3D materials and backgrounds without making the focal object disappear.
- Do not add cursor-following effects to touch-only experiences or controls requiring precision.
Delivery Contract
Return or implement:
- Motion intent - what each animation communicates.
- Choreography - triggers, sequence, timings, and interruption behavior.
- Implementation - scoped code using the existing stack.
- Performance contract - cleanup, device adaptation, and rendering budget.
- Accessibility - reduced-motion and no-JavaScript behavior.
- Proof - browser observations or screenshots at relevant states and viewports.
Reference
Read references/motion-checklist.md before shipping GSAP, scroll-linked, or Three.js work.