How Claude Opus 5.5 painted a hand-drawn music video in code
X user NotinReality handed the lyrics and audio to Claude Opus 5.5, which wrote the JavaScript that paints all 156.6 seconds frame by frame.

Key takeaways
- X user NotinReality made the 156.6-second hand-drawn music video I'm Upping My P(doom) with no image or video generation model, using Claude Opus 5.5 to write JavaScript that paints every frame with p5.js and p5.brush.
- The video took two generations in Claude Code: Opus 5.5 at Medium reasoning for a flat Flash-style first pass, then a second round at higher reasoning with brush strokes and scene transitions that ran about 45 minutes, according to the XiaoHu explainer.
- Opus split the song into 9 chapters with one code file each, wrote STORYBOARD.md and ANIMATION_GUIDE.md, and briefed parallel subagents that each edited one chapter; render.mjs painted the frames in headless Chrome and ffmpeg encoded the MP4.
- NotinReality open-sourced the pipeline as ClaudeAnimationBase, an MIT-licensed starter kit with p5.brush, the Clawd character and 31 acted emotions; the maker warns that watercolor fills render in seconds per frame without a dedicated GPU.
How Claude Opus 5.5 painted a hand-drawn music video in code
The music video runs 156.6 seconds and no image or video generation model made any of it. X user NotinReality handed the lyrics and the audio to Claude Opus 5.5, which wrote JavaScript that paints every frame onto a web canvas with the p5.brush library, according to the XiaoHu explainer. A background Chrome captured each frame and ffmpeg stitched them into an MP4 with the song.
The finished film is on YouTube as Claude Pop - I'm Upping My P(Doom), posted to the channel OtherReality. The song is not the story here, because it is not the maker's. The pipeline is the story, and it is the thing a creator can copy: NotinReality open-sourced the whole thing as a starter template.
What is this pipeline?
It replaces "prompt a model for clips" with "prompt a coding model for a program." The program draws the animation on an HTML canvas using p5.js, a JavaScript library for canvas sketching, plus p5.brush, which adds watercolor fills and brush strokes that mix like pigment. The repo's own README describes studio.html as "the page every frame is painted in, using p5.js and p5.brush."
Nothing is sampled from weights. The animation is a function of time, so the second at 1:20 looks the same every time it is rendered. That is a different promise from a video model, which answers a prompt with a fresh clip and no guarantee of a second take.
Why painted code is different from a video model
A text-to-video model generates pixels from noise. This pipeline generates pixels from arithmetic. The maker's storyboard makes the difference concrete: it says every shot has to have something happening, and every drawing is placed by code rather than dreamed up per frame.
The trade is control for photorealism. You get a look that is drawn by construction, not a photoreal shot the model guessed at. The maker's template README adds the practical version of the same point: in testing, the model "can do a lot with very little, but it's also quite accurate when you give it more requirements," and the reasoning level "corresponds to how 'extravagant' and detail-oriented the model makes the scene."
The two-round workflow
According to the PDoomVideo README, the video "took two generations, both in Claude Code." The first, kept in the repo's legacy/ folder, used Opus 5.5 at Medium reasoning. The XiaoHu explainer describes that pass as flat solid-color shapes, thick outlines, and text labels and speech bubbles (it names "AGI?", "LOSS" and "don't eat me!"), close to 2000s-era Flash.
The second round changed four things, per the same explainer: reasoning turned up to xhigh, p5.brush added for watercolor and brush strokes, a standing requirement that every scene contain something worth watching, and a transition from every scene into the next. That round ran about 45 minutes, the explainer reports.
The lesson survived into the template guide. Its first medium rule tells the model never to use plain p5 shapes (rect, ellipse, fill()) because they "look like 2000s Flash," and to paint everything through the brush functions instead.
Nine chapters, one file each, and parallel subagents
The README lists nine chapters under src/ch/, one file each. The maker's README says ANIMATION_GUIDE.md "was written by Opus to brief the subagents it ran in parallel." The XiaoHu explainer gives the rule those subagents worked under: each one edits only its own chapter, and if it finds a bug in a shared file it reports the bug instead of fixing it, which stops nine writers from colliding in the same file.
STORYBOARD.md, also written by Opus, casts the whole film as a stage show that goes off the rails. It opens and closes on a painted theater curtain. Clawd, the AI character, grows from a doodle on a monitor into a planet-sized superintelligence that drags its creator, the Researcher, through every AI-doom meme in the lyrics. The last line, "Was it all for show?", pulls the camera back to reveal the apocalypse was a play: the giant Clawd is a costume holding three small Clawds, and the basilisk is a puppet. A painted P(doom) thermometer is pumped higher at every chorus, 8 to 34 to 61 to 86 to 99.9.
The render step: a browser paints, ffmpeg encodes
The repo's render.mjs "renders frames in headless Chrome and encodes the MP4 with ffmpeg," the README states. Two commands do the work. The first paints frames and can be resumed if it stops:
node render.mjs --frames=0:156.6 --workers=4
node render.mjs --encode --out=out/pdoom.mp4
You need Node.js, Google Chrome and ffmpeg. The song ships in the repo at assets/pdoom.mp3, so the whole thing is self-contained once those three are installed.
The open template
ClaudeAnimationBase is the starter kit, published under the MIT License and created on GitHub on September 23, 2026. It bundles p5.js and p5.brush, the Clawd character, 31 acted emotions, and a guide for the model. The maker describes the kit as built from the music video's code and from an analysis of what the model did and did not do well. The entry point is one sentence to a coding agent: "Read ANIMATION_GUIDE.md, then make a 15-second video of Clawd trying to catch a butterfly."
The model storyboards first, builds shot by shot, renders contact sheets to check its own work, and writes out/video.mp4. The guide sets three goals, handmade, alive and one piece, and the rules that serve them: brush strokes and flat 2D only, never a 3D projection, linework that "boils" because the randomness is reseeded 12 times a second, and a transition on every cut. To try it, clone the repo, run npm install, and render the built-in 11-second demo with node render.mjs --clip --out=out/video.mp4. Open studio.html in Chrome to scrub through it.
What it costs and how long it takes
The second round ran about 45 minutes, per the XiaoHu explainer, and then the render begins. The template README warns that without a dedicated GPU, p5.brush's watercolor fills "make render times fairly slow, measured in seconds per frame," and suggests asking the model to drop the fills on integrated graphics.
A second creator pushed the technique further. Donald Jewkes posted a brief telling the model to build a style sheet with the image models available through fal, generate Seedance 2.5 video as base assets, and then draw the JavaScript animation over the top so, in his words, "we don't even see the base assets." He allowed "roughly two grand" in fal credits. The HandDrawnAI showcase reports that run took 12 hours. NotinReality's version used no image or video model at all, which is what makes the look its own.
The limits
No image or video model means no photoreal footage. You get drawn animation, and the guide fixes the look on purpose: brush strokes, flat 2D, boiling lines. Render time scales with the frame count times the seconds each frame takes, and the watercolor fills are the slow part. The hardware floor is Node.js, Chrome and ffmpeg, and a dedicated GPU cuts the per-frame time substantially. It is also still code: a non-coder drives it through a coding agent like Claude Code, which is exactly how the maker says he ran it.
The maker's own advice is the practical move to copy: ask for the storyboard before any code, keep instructions broad or very specific and compare, and ask the model to run subagents on the chapters. Every test video listed in the template README was made with Opus 5.5 on xhigh reasoning inside Claude Code, so that is the setting to copy.
Clone PDoomVideo to see the finished pipeline end to end, or start from ClaudeAnimationBase and ask for a 15-second clip; you need Node.js, Google Chrome and ffmpeg installed first.
Sources
- github.com - source repo: two generations, nine chapters, render commands, credits
- github.com - open-source starter template: license, assets, hardware and render notes
- raw.githubusercontent.com - the maker's own storyboard: stage-play idea, cast, P(doom) meter
- raw.githubusercontent.com - the maker's style rules: handmade, alive, one piece, boiling linework
- youtu.be - the finished video: title and channel confirmed
- best.xiaohu.ai - XiaoHu explainer: two-round workflow, reasoning levels, 45-minute second round, subagent rule
- x.com - Donald Jewkes' own production brief to the model
- handdrawnai.com - HandDrawnAI showcase: reports the 12-hour run