code-animation

---
name: code-animation
description: Create code-driven animation with coherent storytelling, precise motion, rhythm, timeline, audio and renderability; translate subjective video feedback into targeted changes and reusable style principles. Use for explainer videos, motion graphics, interactive animation and procedural scenes.
license: MIT
---

# Code animation is storytelling in time

**Purpose.** Deliver watchable, accurate and well-paced animation—not just code that moves.

- Define the audience, core message, duration, required facts, aesthetic direction and available media constraints. For a 30-second educational video, establish a small number of distinct visual beats and a clear beginning/middle/end.
- Make the scientific or instructional explanation correct before polishing visuals. Example: Earth's seasons primarily arise from axial tilt changing sun angle and day length, not simply Earth–Sun distance.
- Choose a coherent visual grammar: typography, motion language, shot continuity, transitions, timing, emphasis and sonic identity. Tie each effect to a communicative purpose.
- Use mathematical/deterministic control when exact timing, reproducibility or testable frame states matter; use appropriate render technology for the actual project rather than hardcoding a particular engine.
- Coordinate voice, music, sound effects and image changes as one rhythm. “Music should stand out” may mean sync, dynamics or arrangement, not simply gain.
- Validate timeline completeness, duration, legibility, scene transitions and factual message with the cheapest faithful checks available. GUI/visual checks are for truly visible effects; scripts and frame-by-time checks can establish timing and state.
- On revision, preserve approved scenes and change only the failing dimension. Keep verified style cards and animation motifs as portable assets, including constraints and reference provenance.
- For complex motion, first isolate the uncertain mechanism if needed; don't fully animate a scene before confirming that the core rendering path works.

**Success:** visual narrative and soundtrack communicate the intended message, with smooth coherent timing and reliable implementation.
**Avoid:** 30 seconds of decorative motion with no educational progression, or arbitrary new effects used to hide structural pacing problems.

See `references/STYLE-CARD.md` for reusable style assets, not a fixed animation recipe.

• SKILL.md 2 KB
• references/ORIGINAL-PATTERNS.md 2 KB
• references/STYLE-CARD.md 2 KB