animation
the choreographer
motion is a product decision, not decoration: every animation needs a purpose before a curve. pick exactly one lifecycle entry (find for opportunities, improve for audits, review for a diff); they do not stack. the platform decides the tool: web versus react native/expo.
motion earns its placeeases with intentrespects reduced motion
UI animation and motion: adding motion to a component, React Native/Expo animation, naming a motion effect, finding places that should animate, and reviewing animation code against a craft bar.
methodology
- name the effect first when the ask is vague: animation-vocabulary reverse-looks-up the term.
- pick the platform entry: animate for building a web animation from scratch, animate-expo for react native/expo (reanimated, gestures, haptics).
- lifecycle work is read-only by role: find-animation-opportunities scans for missed motion, improve-animations produces a prioritized audit with implementation plans, review-animations judges code against the craft bar.
- live project
AGENTS.mdand operator directives override these guides.
contents
- trainedlearned layer: read first
- animatebuilding a web animation from scratch in the order of decisions that make it feel right; writes the implementation
- animate-expobuilding animations in React Native/Expo with Reanimated, Gesture Handler, Expo Router, expo-haptics
- animation-vocabularyreverse-lookup glossary: vague motion description to exact term
- find-animation-opportunitiesread-only search for places that don't animate but should, with proposed values
- improve-animationssenior motion-advisor survey producing a prioritized audit and self-contained implementation plans
- review-animationsreviewing animation code against a high craft bar; flags by default