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 15-20 s; longer only when the subject cannot be told in that time) and aspect (default 1920x1080) 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. Plan the look and sound from the subject and the audience, in your own words: what the film is, how it looks and sounds, and why that fits this subject and this audience. There is no list to fill in; references/techniques.md has ingredients, and the starter's values are placeholders, not a house style. Never reuse the look or sound of a previous piece by default: two different subjects should not come out looking or sounding alike. If the user points at someone else's piece ("like that viral one"), borrow its techniques, never its characters, story or compositions.
3. Beat grid, storyboard and blocking, as data (references/storyboard.md). Tempo and sections first; then a shot list with a pace that fits the form (pace table in references/storyboard.md; each shot with framing, camera move, action, the beat it lands on, its sound, its transition); then the blocking (for a story or an explainer, the tracks of one continuous world). These go into the page as BPM, SECTIONS, SHOTS, EVENTS: the scenes, camera and soundtrack all read them, so picture and sound line up by construction. For a story or an explainer, check the logic: every beat caused by the one before, the metaphor visible in the picture.
4. Build from templates/starter.html. It is already storyboard-driven: one world drawn in world coordinates, withCamera per shot, claim() for every piece of text and every key object. Replace the placeholder palette and the demo world. Keep the contract: draw(frame) is a pure function of the frame number. Use rng(seed) / hash2(), never Math.random or Date.
5. Self-check, then render (next section). Fix and re-check until clean.
6. Deliver: the MP4 and the HTML (it plays live in a browser; clicking starts the sound). Then, in one or two lines, offer what can change: another look, AI music instead of synthesized, different length.