javascript-animationlisted

This skill should be used when the user asks to "draw every frame in JavaScript", "make an animation with no image assets", "animate this in code / on a canvas", "make a hand-drawn style animated video", "turn this into a short animated film", "make an animated explainer drawn in code", "make an animated story / picture book of my photos", or "make a zero-asset animation like the Opus 5.5 ones". Produces a single self-contained HTML file whose frames are computed on an HTML canvas (seekable, deterministic), renders it to MP4, and self-checks the result. Pairs with the soundtrack skill for code-synthesized music. NOT for charts from data (use chart-animation), pure text motion (use kinetic-typography), or 3D/WebGL (use threejs-animation / shader-glsl from webgl-animation-skills).
iart-ai/javascript-animation-skills · ★ 6 · Web & Frontend · score 81

Install: claude install-skill iart-ai/javascript-animation-skills

# JavaScript Animation (every frame drawn in code) Make short animated films where every pixel is computed: no images, no fonts to load, no libraries. One HTML file holds the whole piece; a headless browser seeks it frame by frame into an MP4. ## Model Built and tested with Claude Opus 5.5; drawing quality depends heavily on the model. The self-check below needs image input: if the current model can't see images, say so to the user and treat visual verification as not done. Other models are untested; if the result looks crude, say that a stronger model is likely to help rather than claim it's the best possible. ## Default flow: don't stop to ask Run straight through. Pick sensible defaults and mention alternatives at delivery. Ask *before* starting only if there is no subject at all (e.g. "make an animation", nothing else). 1. **Read the brief.** Infer the form (story, explainer, poem, loop, interactive page), length (default 30-45 s) and aspect (default 1080x1080) from what the user said. On-screen text is in the language the user wrote the brief in; make it bilingual only if they ask or the audience clearly is. `references/forms.md` has a short structure for each form. 2. **Write a look and sound brief from the subject and the audience.** Decide each of these explicitly, with one line of why: style (ingredients in `references/techniques.md`), palette (3-5 colours with one lead), line (outlined or not, `LOOK.wobble`), ground (`LOOK.ground`), boil, type (`LOOK.font`, `L