Video in Code.Read the first three lessons.

Lesson 1

Why make a video out of code

An AI video generator gives you a different result every time, garbles text and charges per try. A video written as a web page does the opposite: the text is exact, every run is identical, and changing one word takes ten seconds.

You do not write the code. You describe the scene, Claude writes the page, your browser plays it, and you export it as an MP4. It suits what short videos are mostly made of: titles, numbers, lists, screens, comparisons.

What it is not for: realistic people and filmed scenes. Use a camera or a video model for those, and code for everything around them.

Lesson 2

The one rule: every frame depends on the time

Ask for a page where one function, seek(t), draws the whole picture for a given second. Give it 2.5 and you see the frame at 2.5 seconds. Nothing moves on its own.

That single rule is what makes everything else possible. You can pause, go back, fix one moment without breaking the rest, and export frame by frame with no stutter.

Left to itself, a model uses CSS transitions and timers. Those look fine in the browser and fall apart at export. So the rule goes in every request.

Build a single HTML file, no external libraries, for a 1080x1920 vertical video animation.

Rules:
- Everything sits in a #stage div of exactly 1080x1920.
- Write a function window.seek(t) that draws the whole frame for time t (seconds).
  The frame must depend ONLY on t: no setTimeout, no CSS transitions, no animation that runs on its own.
- Set window.DURATION to the length in seconds.
- In the browser it plays in a loop; with ?export=1 in the URL it stays still at t=0.
- Keep text inside a safe zone: 120 px from the left and right edges, 250 px from the top, 380 px from the bottom.
- Text big enough to read on a phone: titles 80 px or more, body 40 px or more.

The animation: [describe the start, the end, and what moves first].
Colors: [your colors]. Font: [your font, or Inter].

Lesson 3

The stage: size, safe zones, type

A vertical video is 1080 by 1920 pixels. Build to that size and never to "the screen".

• Safe zone. Keep text 120 px from each side, 250 px from the top and 380 px from the bottom. Instagram and TikTok cover the bottom with the caption and the buttons.
• Type. Titles at 80 px or more, body at 40 px or more. If you have to squint on your phone, it is too small.
• One idea per screen. A title and one supporting element. If you need a third thing, it is another scene.
• Two colours and one accent. A background, a text colour, and one colour you keep for what matters.