Motion

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. Define --loop once and derive sub-animation durations with integer divisions. Do not mix arbitrary unrelated durations.
3. Frame 0 must be a complete readable still and the animation state at 0% and 100% must close.
4. Use at most two meaning-driven motion patterns for the infographic. A Mascot Pointer replaces another pointer primitive rather than adding a third competing route.
5. Available primitives include Sequential Highlight, Path Particles, Path Draw-On, Orbit, Staggered Reveal, Bar Growth, Typewriter, Glow Pulse, Ambient Micro-Loops, Mascot Pointer, Kinetic Beat Slam, Dynamic Countup/Chart Scrub, Anchored Layout Expand, Spring-Pop Overshoot, Tactile Press, Origin-Aware Popovers, Container Morph, Odometer Roll, and Ballistic Particles.
6. Tie motion to the selected concept's useful payoff. A reveal, state transition, route, or comparison can support creative-payoff; decorative movement that does not change understanding should stay static.
7. Keep changed pixels under control. Large blur, backdrop-filter, large shadow spread, and full-canvas decorative motion are poor choices for GIF encoding.
8. Respect the reverse-delay rule for sequential animation. Verify order by capturing quarter-cycle frames instead of trusting intuition.
9. Keep the outer 48px safe zone static and preserve reduced-motion behavior where the delivery context supports it.
10. Render with verified timing rows:

bash ${CLAUDE_PLUGIN_ROOT}/scripts/render.sh build/post.html build/post.gif --duration 6.0 --fps 12.5

1. Read seam and changed-pixel evidence before approving the motion.

HOLD conditions

Return a HOLD when the still is not approved, frame 0 is incomplete, the loop cannot close deterministically, motion contradicts the approved reading order, the requested effect exceeds the motion budget, or a mascot path lacks a validated exact-SVG component.

Related components

• routing authority: helper/GUIDE.md
• local quality gates: helper/quality-gates.json
• motion recipes: 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-vocabulary.md, and references/animation-opportunities-gate.md
• motion planner: agents/motion-director.md
• implementation worker: agents/motion-engineer.md
• mascot skill: skills/mascots/SKILL.md
• render skill: skills/render/SKILL.md

Research gates

Apply design-dials when resolving motion intensity and bounded-verification when the animated result reaches render/acceptance. structural-originality remains relevant when motion behavior is part of the story fingerprint.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: imMamdouhaboammar
• Source: imMamdouhaboammar/linkedin-animated-infographics
• License: MIT

Install and usage instructions live in the source repository linked above.