Skip to main content
AI tutorials

Render the “I’m Upping My P(doom)” Claude-Generated Music Video

Learn how this Claude Opus 5.5-generated animation project is organized, install its dependencies, render frames through headless Chrome, and combine them with the included song using ffmpeg.

Render the “I’m Upping My P(doom)” Claude-Generated Music Video

Project overview

I’m Upping My P(doom) contains the source code for a music video generated with Claude Opus 5.5 in Claude Code. You can watch the completed I’m Upping My P(doom) music video on YouTube.

The animation was produced in two generations. The first, created with Claude Opus 5.5 at the Medium setting, is preserved in legacy/. The second generation makes up the rest of the repository.

According to the project documentation, everything in the repository was generated by the model. The creative direction was limited to using the Clawd character design and giving each lyric interesting visuals and transitions. No individual scene ideas were specified.

How the animation works

The video is divided into nine chapters, with one source file for each chapter. Frames are painted in a browser page using p5.js and p5.brush. A Node.js rendering script opens that page in headless Chrome, captures the frames, and uses ffmpeg to encode them with the included audio track.

Important files and directories

  • src/ch/ contains the nine chapter files.
  • src/ contains shared code for Clawd, guest characters, props, lyrics, and the timeline.
  • studio.html is the page in which every frame is painted with p5.js and p5.brush.
  • render.mjs renders frames through headless Chrome and invokes ffmpeg to create the MP4.
  • assets/pdoom.mp3 is the included song.
  • STORYBOARD.md contains the model-generated shot-by-shot plan.
  • ANIMATION_GUIDE.md contains the style and coding guidance written for the parallel subagents.
  • legacy/ preserves the first generation of the project.

Prerequisites

Before rendering the video, install the following tools:

  • Node.js for installing dependencies and running render.mjs.
  • Google Chrome for painting frames in a headless browser.
  • ffmpeg for combining the rendered frames and song into an MP4.

Make sure Node.js and ffmpeg are available from your command line. Chrome should be installed at its default Windows location unless you plan to provide its path explicitly.

Install the project

Open a terminal in the repository root and install the Node.js dependencies:

npm install

The repository already includes the song at assets/pdoom.mp3, so the documented workflow does not require downloading a separate audio file.

Render the animation frames

Run the rendering script with the documented frame range and four workers:

node render.mjs --frames=0:156.6 --workers=4

This paints the video’s frames into out/frames. The frame-rendering process is resumable, which is helpful because generating an entire music video can take time.

The --workers=4 option configures the command to use four rendering workers. If you change this value, choose a worker count appropriate for your computer’s available resources.

Encode the final MP4

After the frames have been rendered, combine them with the included song:

node render.mjs --encode --out=out/pdoom.mp4

This uses ffmpeg to join the rendered frames and audio, then writes the completed video to out/pdoom.mp4.

Use a custom Chrome path

If Chrome is not installed at the default Windows path, add the --chrome option to the rendering command:

node render.mjs --frames=0:156.6 --workers=4 --chrome=<path to chrome>

Replace <path to chrome> with the path to your Chrome executable.

Explore and modify the production

Start with the storyboard

Read STORYBOARD.md before changing scenes. It describes the shot-by-shot plan created after the first generation, when Claude was instructed to use P5 brushstrokes, keep every scene visually interesting, and transition each scene into the next.

Follow the animation guide

Use ANIMATION_GUIDE.md as the project’s style and implementation reference. Claude Opus wrote this file to brief the subagents it ran in parallel, making it the most relevant guide for maintaining consistency across chapter files.

Edit chapters independently

The nine files in src/ch/ divide the video into manageable sections. When changing a particular part of the video, identify its chapter first, then consult the shared timeline, lyric, character, and prop code under src/.

Compare both generations

The legacy/ directory provides the first generated version. Comparing it with the current source can help you understand how the visual direction, P5 brushstroke guidance, and scene transitions evolved during the second generation.

Advanced workflow tips

  • Preserve resumable output: Because rendered frames are written to out/frames and the process is resumable, avoid deleting that directory when continuing an interrupted render.
  • Separate rendering from encoding: Complete the frame-generation command before running the encoding command. This makes it easier to resume expensive frame rendering without unnecessarily repeating the final encoding step.
  • Review shared code before broad changes: Characters, props, lyrics, and timeline behavior are shared under src/. A change there may affect several chapters.
  • Use the newer base for other projects: The author recommends ClaudeAnimationBase as a more reliable and general foundation for creating new Claude animations with Claude Opus 5.5.

Credits and references

The project was inspired by a post on X. The README attributes the song, as far as the author could determine, to a 2024 YouTube video.

Conclusion

This repository offers both a finished generative animation and a complete view of its model-created production structure. With Node.js, Chrome, and ffmpeg installed, you can render the frames, encode the included audio, inspect the storyboard and animation guide, and explore how nine p5.js chapters combine into the final music video.