Blog post #93

AI-generated illustration.

---

My kid came home with four word problems in math. They were already solved in the notebook, with pencil boxes, a set diagram and an answer at the bottom. I wanted to see if I could turn each one into a short film the teacher could show the class when they go through the homework. The idea is to explain the problem after the child has worked it out, not before.

It ended up as four films and one page with written solutions.

---

What shipped

• Four narrated films, 27 to 76 seconds each, in the same graph-paper style as the notebook:
  1. Two horses ate 6 and twice as many apples, 3 are left. How many were there from the start? 6 + 6 = 12, then 12 + 6 + 3 = 21 with a column addition and a carried ten that flies over to the tens column.
  2. 4 red bikes and three times as many blue ones. The red box is copied into three blue boxes, the same bar model my kid drew. 4 + 4 + 4 = 12, then 4 · 3 = 12.
  3. Nova adds 6 eggs to a box and now there are 28. x + 6 = 28, so x = 28 − 6 = 22.
  4. Marja has 56 hens, 32 are white and the rest brown. 32 + x = 56, then 56 − 32 = 24 with a column subtraction.
• A page for the teacher with each film next to a written step-by-step solution, the column layouts, the answer and one question to ask the class, such as “Why does it become minus when Nova is adding eggs?”
• The voice is my own cloned voice in ElevenLabs. Every scene is generated with word timestamps, so each number pops up on screen when it is said.

What I changed after the first version

The hen film went through three rounds, all from my own viewing:

• No gaps in the hens. I first placed the hens by place value: three white rows of ten, then a separate row of ones with two white and four brown. When the white hens faded away, it left a hole in the middle of the brown ones. Now they simply come in reading order: 32 white, then 24 brown.
• The missing step. The film went straight from 32 + x = 56 to x = 56 − 32. I wanted the step in between, where you take minus 32 on both sides. Now 32 + x − 32 = 56 − 32 appears, the two 32s are crossed out in red as the voice says they cancel out, and only then x = 56 − 32.
• Make the answer visible. After x = 24, four brown hens drop down to fill the bottom row. You then see two full rows of ten and four left over: 2 tens and 4 ones, the same thing the column subtraction just said.

Decisions made

• Follow the child’s own method. The bikes film uses the bar model from the notebook, the apples film uses 6 + 6 for “twice as many”, and the hen film keeps the labels white, brown, all under 32 + x = 56. The film should look like a cleaner version of what the kid already did, not a new method.
• No notebook photo in the class films. The first hen film ended on a photo of the notebook page, “just like in your notebook!”. For films shown to the whole class I left that out of the new ones.
• Claude artifact instead of Vercel. I first published the page as a private Claude artifact, then tried it as a normal website on Vercel. The Vercel address was easy to open but also easy to guess, and anyone with the link could see everything. The artifact has a long random ID and only opens for people I share it with. I deleted the Vercel project and kept the artifact.

Tooling & process

• HyperFrames for the films: each one is a single HTML file with a GSAP timeline, rendered to MP4. The hens, apples, horses and bikes are small inline SVG drawings.
• ElevenLabs eleven_v4 with my voice clone for the narration, one audio file per scene, and the scene start times decide everything else.
• Most of the time went into timing: making sure “six minus two is four” shows up exactly when it is said.

---

— Stefan