/cartoon-short

name: guided-cartoon-short
description: "Cartoon shorts drawn in code: a character you design, acted emotions, drawn turnarounds and boiling linework, as one Helios renderAt(t) page. Covers storyboarding by reads, the character rig, the emotion timeline, closed-form acting helpers (jump, take, spring), transitions and the review loop. Use for animated shorts, mascot-style explainers, story-driven cartoons and character loops."

Cartoon short

A short cartoon where a character wants something, something happens, and they react. Everything is drawn in Canvas 2D inside one `window.renderAt(t)` page, so the [make-video](../../../plugins/helios/skills/make-video/SKILL.md) contract applies: every frame is a pure function of `t`.

The skill has two halves. The **method** (storyboarding by reads, the rig, acted emotion changes, boil that stays deterministic, the review loop) applies to every cartoon. The **look** it documents (flat colour, boiling ink, paper grain) is one default, not a requirement: chalk on a blackboard, cut paper, marker on lined paper, a single-colour brush line or flat poster shapes all work with the same method.

[starter.html](starter.html) is a tested 6-second shot that shows the techniques working together: boil seeding, the paint recipe, `emotions()`, `jump()`, iris transitions. Read it for how each technique is built. Don't reuse its character, meadow, palette or gag; those come from the seed and the user's idea.

0. Seed the idea

Before you design anything, draw a random seed so this cartoon doesn't come out like the last one. If an **apply-randomness** skill is available, use it. Otherwise:

LC_ALL=C tr -dc 'A-Za-z0-9' < /dev/urandom | head -c 256; echo

Find a few verifiable patterns in the string (a digit run, a repeated fragment, a cluster of capitals, a symmetry) and let them choose between options you write down first: three character silhouettes, three worlds, three loglines, and two or three looks (the ink-and-paint default among them). Keep what the user asked for fixed; the seed only decides what they left open. Put the seed and a one-line pattern → choice map at the top of `STORYBOARD.md`.

Code-drawn characters are a deliberate style: simple, iconic shapes with boiling ink. They don't replace a real illustration. If the brief needs a detailed or realistic character, say so and ask for artwork.

The three goals

• **Handmade.** Lines that boil, flat 2D, a small palette, a surface underneath (paper, board, card). No vector-perfect shapes, no 3D projection.
• **Alive.** Something always moves. Faces act and never snap. The character is big enough to feel.
• **One piece.** One short film with an arc, not a pile of clips. Plan it before you draw it, and link every shot to the next.

Underneath all three, the viewer has to follow it. Timing is what generated animation gets wrong most often.

Design your own character

Never reuse an existing mascot or a well-known character, even a "simplified" one, and don't reuse the starter's bean. Design one for this video, with the seed choosing between your silhouettes:

• A silhouette that reads when filled solid black: one main shape (a teapot, a moth, a stack of books, a pebble with legs), a few parts (eyes, arms, legs).
• A size unit `u`. Every coordinate in the rig is a multiple of `u`, so the same function draws a wide shot and a close-up.
• A two- or three-colour body: base, a lighter pool, a darker settle. No pure black or white anywhere; use a dark ink like `#2b2233` and a cream like `#fff5e2`.

See [references/rig.md](references/rig.md) for the rig contract, face drawers, a views table for turnarounds, and a model sheet page.

1. Storyboard first, timed by reads

Write `STORYBOARD.md` before any scene code:

Logline: <character> wants ___, but ___, so ___.
World: setting, 4–6 colours, light, and how the colour changes across the video.
Motif: the thing that recurs and pays off.
Arc: the emotion keys across the whole video.
Shots:
  A  0.0–4.2  [in: iris from paper]  what's seen · EVENT · reaction · camera
     reads: 0.4–1.6  bored character in a meadow
            1.9–2.6  something pops behind them (eye is led there by a look)
            2.6–3.6  surprise → delight
  B  4.2–7.0  [match cut on the jump]  ...
  [out: iris to the character's face]

A **read** is one thing the viewer must understand. Each needs time to be found, understood and registered before the next starts.

• **One read at a time.** Put a cause and its reaction in sequence, never on top of each other.
• **Fast actions, slow meanings.** A move can be quick if it's anticipated; what it means needs a hold.
• **Lead the eye.** Before an important read, a character looks at it, the camera moves to it, or it moves first.
• **Let reads set the length.** Lengthen a shot or cut a read; never squeeze. The last read needs time to land before the end.

A worked example of fixing a rushed ending, from ~1.3 s to ~4 s: throw 0.15 s, flight 0.8 s, payoff 0.45 s, reaction 0.6 s, wave 0.45 s, reply 0.4 s, iris and hold 1.2 s.

Check the storyboard: an event in every shot, time for every read, a transition at every seam, no text, and an ending that rhymes with the opening (same place, pose or motif, changed).

2. Rules

1. **Every shot has an event.** Something changes between its first and last frame. "Character stands in a meadow being cute" is not a shot. 2. **No text.** No captions, labels, signs or speech-bubble words. Reactions are painted marks: `!`, `?`, sweat drops, hearts, a bulb, a rain cloud. A sign that repeats the story is the classic failure. If the brief truly needs a word, paint it into the scene once. 3. **Flat 2D only.** Turns go through drawn key views (front, ¾, side, back), never a 3D rotation. Depth comes from overlap, scale and colour: farther is smaller, bluer and paler. 4. **Nothing is ever still.** Every emotion has an idle; cameras drift or push; grass sways; lines boil. A frozen frame re