Videos made of code, with Claude

Ask Claude for your first scene

Open a chat on claude.ai, copy this prompt and fill in the brackets.

Create a single index.html file that plays like a vertical video (1080x1920), about [your topic, e.g. "3 tips to get more clients"].

- Use GSAP, loaded from a CDN, in the same file.
- Build the whole animation as one GSAP timeline, paused at the start.
- Add a function window.seek(t) that moves the timeline to t seconds, so every frame depends only on time.
- Add a Play button that plays it in real time, and hide it while playing.
- Dark background, one accent color, big bold text, short sentences that appear one by one.
- Total length: about 20 seconds.

Claude shows the result next to the chat. Press Play to watch it.

Why "every frame depends on time"? It means the video always plays exactly the same way. That's what lets you export it cleanly, frame by frame.

Make it look premium

Once the base works, add motion and a character. One request at a time.

Make it feel premium: smooth entrances (titles slide up, words pop in one by one), a slow camera zoom, soft glowing shapes in the background, and a small "pop" on each new scene. Keep the text readable on a phone.

Add a small cute 3D mascot made with Three.js (loaded from a CDN) at the bottom of the screen. It bobs gently, blinks, and waves when a new scene starts. Its movements must also follow window.seek(t).

If a detail bothers you, say it in your own words: "the text is too small", "the robot is too big", "slower".

Add a voice (optional)

Write a short script (or ask Claude for one), then turn it into a voice with a text-to-speech tool like ElevenLabs. Save the audio file as voice.mp3.

Here is my voiceover script with the second each sentence starts:
[0.0] ...
[3.2] ...
[7.5] ...
Time each scene of the animation to these moments, and show the sentence being said as big captions at the bottom.

The voice and the animation stay separate: you put them together when you export, or in your editing app.

Export it to MP4

The easiest way: download the file Claude made, open it in your browser in full screen, press Play, and record your screen.

• Mac: Cmd + Shift + 5, then "Record selected portion".
• Windows: Win + Alt + R (Xbox Game Bar) or the Snipping Tool's video mode.

Then add your voice and post it in CapCut or your usual editing app.

The clean way: HyperFrames, an open-source tool from HeyGen, turns HTML into a real video file, frame by frame. Follow its README. It asks for a bit more setup.