motionlisted

# Motion ## Purpose Add meaning-driven motion to an already approved still. Motion should clarify sequence, hierarchy, route, state change, reveal, or the selected creative payoff. It is not a substitute for weak structure. Read `helper/GUIDE.md` first. Rendered infographic animation is seeked frame-by-frame, not screen-recorded in real time. ## Use when Use when choosing or implementing Motion Patterns, writing keyframes, animating routes or state changes, integrating mascot motion, debugging a loop, or diagnosing an oversized/jittery GIF caused by animation behavior. ## Inputs - approved `build/still.png` and `build/post.html` - selected creative concept and aha mechanic when present - `build/story-brief.json` - `build/layout-spec.json` - `build/motion-direction.json` when produced by the motion director - optional mascot motion contract - target duration/fps from verified timing options ## Outputs Return or support the animated `build/post.html`, resolved Motion Patterns, timing rationale, loop/motion-budget notes, and any HOLD that prevents deterministic capture. ## Procedure 1. Read `references/animation-recipes.md`, `references/hyperframes-motion-recipes.md`, `references/emil-craft-animation-rules.md`, `references/emil-complete-recipes.md`, `references/css-keyframe-patterns.md`, `references/impeccable-motion-craft.md`, `references/mblode-transition-recipes.md`, `references/animation-opportunities-gate.md`, and active helper gates. 2. Use one loop clock. Defin