HAMMAD YOUSUF

FREE RESOURCE · FROM THE "VOXEL" REEL

Make 3D voxel cartoon reels with Claude Code (5 steps + 7 prompts)

By · 7 November 2026

What you are making

A 3D cartoon reel where every character is built out of blocks in Three.js code that Claude Code writes. No AI video model: the video is a web page rendered frame by frame.

Before you start

  • Claude Code on a paid Claude plan (Pro from $20/mo; the free plan has no Claude Code).
  • ElevenLabs: Starter ($6/mo) for your own cloned voice and commercial use.
  • Node 22+, ffmpeg.

The 5 steps

  1. Script (prompt 1)

  2. Voices + word timings (prompt 2)

  3. The voxel world (prompt 3)

  4. Sync mouths, cameras and captions (prompts 4-5)

  5. Render frame by frame (prompt 6)

Then just tell Claude what to change (prompt 7).

The 7 copy-paste prompts

Paste them into Claude Code, in order.

1. The script

prompt 1 of 7
Write a 40-second Instagram reel as a dialogue between me (HAMMAD) and you (CLAUDE). Hook in the first 3 seconds, one idea per line, under 12 words a line, end with 'Comment VOXEL'. Output as JSON lines: {id, who, text}.

2. The voices

prompt 2 of 7
Write a Python script that sends each line of script.json to the ElevenLabs text-to-speech API (my voice for HAMMAD, a library voice for CLAUDE), saves one WAV per line, and gets word timestamps for each line. Read the API key from .env, never hard-code it.

3. The world

prompt 3 of 7
In one HTML file with Three.js, build a voxel version of me (dark swept hair, short beard, black tee) and a small orange block character with ^ ^ eyes, standing on a tile platform on a deep-blue neon grid with soft bokeh. Everything is boxes. 1080x1920.

4. The sync

prompt 4 of 7
Load words.json and drive everything from time t only: open each character's mouth while their words play, cut the camera to whoever is talking, and show 1-3 word captions that pop in on each word, key words in yellow.

5. The panels

prompt 5 of 7
Add a top label pill and one UI card per step (script editor, two voice waveforms, code editor, sync timeline, render counter), each timed to its line. In step 3, empty the stage and fly every block back into place.

6. The render

prompt 6 of 7
Make the page seekable frame by frame (no requestAnimationFrame clock) and render it to MP4 at 30 fps with HyperFrames, then mix the voice with a quiet music bed at -14 LUFS.

7. The edit

prompt 7 of 7
make my t-shirt yellow

Real numbers from my reel

1,340 frames, 1080x1920 at 30 fps, rendered in about 7 minutes on an Apple M1 Pro.

Sources checked

The facts on this page were checked against the sources below. Prices and plans change, so treat each official page as the final word.

  • Claude Code needs a paid plan; free claude.ai has no Claude Code. Source ↗
  • Claude Pro $20/mo. Source ↗
  • ElevenLabs cloning from Starter $6/mo; free tier not commercial. Source ↗
  • ElevenLabs returns word/character timestamps. Source ↗
  • Three.js MIT. Source ↗
  • HyperFrames Apache-2.0, renders HTML frame by frame. Source ↗
  • 1,340 frames in 6 min 59 s, from this reel's own render log (Apple M1 Pro 16 GB).

About the video: the reel that sent you here is a voxel cartoon of Hammad Yousuf built in code, with AI voices (his cloned voice and a library voice for Claude).

Keep going