Use this skill before adding substantial motion to a website or app.
Workflow
- Identify the brand, route, audience, and first user task.
- Define the first read before animation.
- Name the motion job: orient, reveal, explain, confirm, compare, express brand, or convert.
- Pass the still-frame gate.
- Write a beat sequence: setup, trigger, primary move, secondary support, hold, final state.
- Choose the lightest runtime that preserves the intent.
- Specify reduced motion in the same pass.
- Implement only after the spec is clear.
- Verify with browser screenshots, mobile, reduced motion, and video/frame proof.
- Score with the excellence gate.
Runtime Rules
- Use CSS for simple state changes, hover/focus, skeletons, and low-risk reveals.
- Use Motion for React for component choreography, layout transitions, presence, and React scroll work.
- Use GSAP ScrollTrigger for pinned, scrubbed, snapped, SVG/canvas, or complex authored timelines.
- Use Rive for interactive vector state machines.
- Use Lottie/dotLottie for portable non-interactive vector loops.
- Use Three.js only when 3D is central and visually verified.
- Use Remotion for rendered video, social variants, product explainers, and exact text/layout in media.
- Use Grok/imagegen/Veo/Sora/Luma/Runway/Higgsfield only as source generation, then finish and QA in context.
Taste Rules
- Motion is hierarchy over time.
- Do not animate a weak still frame.
- Make one object the hero.
- Use stillness as contrast.
- Keep repeated task motion short and quiet.
- Do not bake exact product text into generated images or videos.
- Treat mobile as separate choreography.
- Never ship meaningful motion without reduced-motion behavior.
Required Spec
Use templates/site-motion/SITE_MOTION_SPEC.md for substantial site motion.
Use rubrics/site-motion-excellence-gate.md before handoff.
Output Shape
Return: motion thesis, first-read diagnosis, still-frame verdict, motion map, runtime choice, reduced-motion plan, implementation tasks, QA proof required, and excellence score.