What Videos and Games Can Claude Build by Writing Code? A Breakdown of 10 Open-Source Projects

Charlie Hills curated a list of community projects built around Claude Opus 5.5, spanning 10 open-source repositories from motion graphics to full web games.

In this list, code is used both to produce animated videos and to directly build interactive web games: animation projects typically involve the model writing drawing logic, rendering frame by frame in a browser, and compressing the output into MP4 video; game projects run directly in the browser frontend, with player input driving state machines and visual rendering in real time. Along this production route, Claude is primarily responsible for writing executable frontend and graphics code, while the browser renders the visuals; other projects also invoke external image and video models.

Claude Writes Code, and the Browser Draws the Visuals

The projects in this list follow a programmatic path: the model writes frontend drawing and logic code, which the browser executes to render the output:

1. Time-driven and state machine modeling: In animated shorts, the model designs storyboards and timelines, using HTML5 Canvas, SVG, WebGL, Three.js, or p5.js to organize visual elements as functions of time; in game projects, the visuals are not purely functions of time, but are driven by player keyboard and mouse inputs alongside real-time state. Deterministic time-based rendering facilitates visual reproducibility and local code modifications, but it does not guarantee that the code itself is free of logic or rendering errors.
2. Virtual clock and frame-by-frame capture: Animation projects typically orchestrate headless Chrome in Node.js, driving the rendering by injecting a virtual timeline and capturing image sequences frame by frame.
3. Audio alignment and compression export: Audio sources for animations vary, coming from user-provided existing songs (for example, PDoomVideo uses an existing song), royalty-free sample libraries, or TTS voice synthesis; the rendered image sequence is then aligned with audio and compressed into MP4 using ffmpeg. Note that while source code files themselves are lightweight, the temporary image sequences exported across multiple frames and the final MP4 still require corresponding disk space.

Among the 10 projects listed by Charlie Hills, they diverge into five archetypes across technical architecture and application goals.

Group 1: Hand-Drawn Watercolor Animation and Scaffolding

This genre focuses on using p5.js and the p5.brush library to generate 2D character animations with watercolor textures and hand-drawn line art.

1. PDoomVideo: Code-Driven Hand-Drawn Music Video

• Project Link: JohnHeibel/PDoomVideo
• What it does: This is a music video (MV) created for an existing song, "I'm Upping My P(doom)" (using an existing audio source). Every storyboard shot, character movement, and brush effect in the video was generated via code written by Claude Opus 5.5 inside Claude Code, without manual specification of concrete storyboard concepts.
• How it works: The author provided requirements to use the Clawd mascot character and align scene transitions with the lyrics. Opus 5.5 generated a storyboard plan (STORYBOARD.md) and style specification guide (ANIMATION_GUIDE.md), invoking subagents to collaborate on writing code. The full video is divided into 9 chapters, with each frame rendered via p5.brush in studio.html, and headless Chrome and ffmpeg handling rendering and audiovisual composition.
• Use case: Demonstrates the implementation mechanism of using frontend drawing code for long-form storytelling and musical visual presentation.

2. ClaudeAnimationBase: Standardized Animation Scaffolding

• Project Link: JohnHeibel/ClaudeAnimationBase

• What it does: After completing PDoomVideo, author John Heibel analyzed the model's performance characteristics and distilled reusable modules into a general starter kit for animation.

• How it works: The kit includes built-in multi-angle views, emotional expressions, limb components, and camera helper modules for the protagonist Clawd. After cloning the repository, users enter a prompt into a coding Agent:

  Read ANIMATION_GUIDE.md, then make a 15-second video of Clawd trying to catch a butterfly.

  The model first generates a storyboard, writes code shot by shot, and renders contact sheets composed of shot thumbnails to inspect the visuals before finally exporting the video. If running in an environment without a dedicated GPU, because watercolor fills in p5.brush compute slowly, the author recommends switching to flat fills to improve rendering speed.

• Difference between the two: PDoomVideo is a finished repository tied to a specific existing song and storyboard; ClaudeAnimationBase is an abstracted, reusable scaffolding and general rule base.

Group 2: Multi-Style Short Film Studios and Modular Skill Libraries

This group of projects expands visual aesthetics to dozens of visual styles, packaging production workflows into reusable skills for Claude Code.

3. Lemo-Opuscar: Production Framework for 43 Cinematic Styles

• Project Link: lemomo-ai/lemo-opuscar
• What it does: Collects 43 visual and cinematic styles, each accompanied by a code-rendered demonstration short. The special showcase piece, "OPUSCAR 98" (6 minutes and 25 seconds), takes the character Clawd through 98 movie themes, redrawing scenes according to each film's visual style.
• How it works: Tuned and built by the author using Opus 5.5, it features a three-part documentation system:
  • DIRECTOR.md: Establishes narrative, pacing, camera direction, and self-inspection workflows;
  • TECHNIQUE.md: Guides Canvas/WebGL frame-by-frame rendering, royalty-free sample music scoring, and TTS voiceover narration mixing;
  • styles/<风格>/STYLE.md: Provides granular rules for each style, including crayon, ink wash, halftone, Swiss typography, and others.
  • Can be installed as a Claude plugin. According to the author, generating a single film takes approximately 30–60 minutes and consumes a substantial amount of tokens; environment dependencies include Node 20+, ffmpeg, and Python 3.11+.
• Use case: Provides systematic storyboard guidance and parameter reference specifications for multi-style code-driven short films.

4. opus-video-skills: Skill Plugins Packaged by Style

• Project Link: tuzhechen2005/opus-video-skills
• What it does: Packages specific visual styles into standalone Claude Code skill plugins, emphasizing drawing visuals through code and programmatically synthesizing sound.
• How it works: Includes two core skills:
  • painted-animation (hand-drawn watercolor animation): Builds on the ClaudeAnimationBase mechanism, enhancing character body movements, supporting beat-matched editing, and animated karaoke subtitles (such as the 31-second "Small Town Girl" demo);
  • kinetic-reel (kinetic typography reel): Combines 2D type with Three.js layers (particle terrains, fluid marble, etc.), synchronizing visual transitions with procedurally synthesized sound effects.
• Difference from the former: Lemo-Opuscar provides a unified multi-style guideline framework; opus-video-skills delivers one standalone skill plugin per style.

Group 3: From Standalone Creativity to Commercial Applications and Hybrid Generation

Video generation can not only produce artistic shorts, but also evolve into automated products serving real-world business needs, or develop into complex systems orchestrating multiple models.

5. shipvideo (LaunchVideo): URL to Product Launch Video

• Project Link: diggerhq/shipvideo
• What it does: Packages code-driven video generation into a web application (launchvideo.io), taking a website URL or description to generate a 20- to 40-second product launch video.
• Operating mechanism and limitations:
  1. Deployment and environment: Relies on the OpenComputer runtime environment and API key (OPENCOMPUTER_API_KEY). When initializing in a new microVM session for the first time, it needs to install Playwright dependencies, ffmpeg, and fonts (taking around 1 minute);
  2. Page extraction and code writing: After the Agent extracts website text, colors, and fonts, it writes a single-file HTML animation. To ensure deterministic rendering, the tool explicitly forbids elements like <video>, <audio>, <iframe>, CSS transitions, Math.random, and external images;
  3. Virtual clock rendering: By injecting the __seek(t) virtual clock to take over rAF and timers, Playwright captures frames and pipes them to ffmpeg for encoding and export. The 30–40 seconds noted by the author refers only to the rendering phase of a 30-second video; time spent on model code writing, pre-initialization, and validation is not included.
• Use case: Demonstrates an implementation approach for packaging frontend motion generation and headless browser compression into an automated service.

6. motion-graphics-music-video-skill: Multi-Model Hybrid Orchestration Plugin

• Project Link: makevoid/motion-graphics-music-video-skill
• What it does: This is a Claude Code plugin that takes music and creative descriptions as input and outputs a motion graphics music video integrated with external generative models.
• Operating mechanism and cost reference:
  • Uses a multi-model hybrid pipeline: Opus 5.5 is responsible for planning storyboards, prompts, and scripts, connecting to Fal.ai via MCP to invoke the image models listed in the README to generate characters, and calling MiniMax H3 to generate green-screen action clips;
  • Local toolchain coordination: Uses Python for audio analysis, stem separation, and mixing, while utilizing p5.js and macOS Swift Core libraries to add visual effects;
  • Cost example: In a reference example of an approximately 3-minute video provided by the author, it consumed around $30 in Fal.ai credits and approximately 3 million Opus 5.5 tokens (this is the author's specific sample expense, not a fixed total cost).
• Use case: Demonstrates a hybrid pipeline where a coding Agent acts as a central hub orchestrating external image/video models and local code effects.

Group 4: Games Must Respond to Players, Not Just Output a Video

In Charlie Hills' list, two accomplishments go well beyond the scope of "short videos," stepping directly into complex interactive 3D application development.

7. claude-opus-5-5-demo: Single-Session 3D Web Game Real-World Test

• Project Link: riba2534/claude-opus-5-5-demo

• What it does: According to the author's self-report, the test used a single-sentence requirement prompt for each of three 3D web games, completing authoring and deployment to Cloudflare Pages within a single session. Here, "a single sentence" refers to the brevity of user requirements; within the same session, the Agent still goes through a multi-step execution process including online information retrieval, project scaffolding, code writing, headless browser testing, issue fixing, and build deployment.

• Three generated game modules:

  1. Pelican Riding a Bicycle (pelican-bike/, 11 JS modules): A pelican wearing sunglasses and a scarf rides along the coast catching fish, featuring cloth physics simulation for the scarf, a day-night cycle, ocean wave simulation, 14 achievements, 5 camera perspectives, and synthesized sound effects.
  2. CrossFire: Transport Ship (cf-transport-ship/, 18 JS modules): FPS gameplay where the model first retrieved map layout walkthroughs to verify deck, cabin, and container structures, implementing ballistic recoil, computer bot combat, and kill announcements.
  3. QQ Speed (qq-speed/, 15 JS modules): Recreates controls such as Shift drift and Ctrl nitro, with scripts pre-generating top-down track views to verify corners, including four built-in tracks such as Eleven City.

• Original one-sentence prompts used by the author (preserved verbatim):

  Pelican Riding a Bicycle: 生成一个鹈鹕骑自行车的 3D 页面，尽可能把你所有的能力全部都用上. 然后上传到 CDN 上, 把访问链接给我

  CrossFire: Transport Ship: 尽可能真实的还原穿越火线中的运输船地图，我需要一个真实的枪战游戏，生成一个3d页面，尽可能发挥你的所有能力 做完之后上传到 CDN 上 把链接发给我

  QQ Speed: 尽可能真实地还原 QQ 飞车中的游戏地图。我需要一个真实的 QQ 飞车游戏，包括游戏的各种键位以及漂移玩法,生成一个3D 页面，尽可能发挥你的所有能力。 做完之后上传到 CDN 上 把链接发给我

• Troubleshooting and fix process: The model ran a 320-second headless browser soak test within the session, and subagents reviewed and fixed some of the issues. An intermittent black screen that occurred after launch was traced by injecting test values to NaN contamination propagation when the Bloom shader encountered invalid pixels; a cleanup pass was subsequently added before Bloom, and root causes such as ocean Fresnel calculations were fixed before redeployment.

• Use case: Demonstrates the real-world process of a coding Agent handling self-directed retrieval, closed-loop testing, and deployment operations in a single session.

8. tidewater: WebGPU Island Fishing Game

• Project Link: dgreenheck/tidewater
• What it does: An island fishing browser game built on WebGPU and WGSL, constructed using the project's own small bespoke rendering engine (without generic third-party frameworks).
• Technical features and asset sources:
  • Water and environment: 4-cascade FFT water surface simulation (based on the Tessendorf spectrum), featuring shallow water breaking waves, boat wakes, and underwater caustics; atmospheric scattering model simulating day-night cycles, volumetric clouds, and Tyndall rays;
  • Fishing gameplay: Features 18 species of fish, tension-controlled reeling mechanics, fish trading, and fishing gear/fuel restocking;
  • Third-party asset integration: Integrates Poly Haven CC0 scene scans, Microsoft Rocketbox character models, and Freesound CC0 ambient recordings.
• Hardware and runtime requirements: Requires a modern browser with WebGPU support and a compatible graphics card; the first load requires compiling hundreds of shader scripts, which can take over a minute, while subsequent visits are accelerated by browser caching.
• Use case: Provides an engineering reference example for combining custom shaders, complex physical water bodies, and third-party assets in a WebGPU environment.

Group 5: One for Finding Inspiration, One for Understanding Production Pipelines

The final two repositories both collect community examples, but serve different purposes: one makes it easy to find visual styles and public prompts, while the other makes it easy to trace which tools and assets were used in a video.

9. awesome-opus5-5-videos (yihui-dev Maintained Version): Curated Showcase and Prompts

• Project Link: yihui-dev/awesome-opus5-5-videos

• What it does: Collects 475 video examples. When creators share their prompts publicly, prompts are included; when not shared, links to the original posts are provided. Examples cover motion graphics, explainers, 3D scenes, and mini-games.

• Core features: The companion showcase site (Skillry) provides selected prompts for user testing, and supports comparing original post videos side-by-side with code-rerun results.

• Use case: Serves as a reference library for discovering visual inspiration and prompt crafting techniques.

10. awesome-opus-5-5-videos (athemeroy Maintained Version): Source Classification and Sample Research Catalog

• Project Link: athemeroy/awesome-opus-5-5-videos
• What it does: This is a research catalog analyzing the sources of community video samples. The project crawls relevant candidate posts and deduplicates downloaded MP4 files using SHA-256 hashes. A total of 1119 files are labeled by the classifier as yes or likely, which indicates only classified tendencies of model involvement, not verified confirmation that all 1119 files are pure Opus 5.5 creations; in addition, 168 typical post cases were selected for non-random in-depth review.
• Categorized roles and production pipelines:
  1. Four roles of model involvement: Writing rendering code, rewriting and converting existing assets (Figma/stock footage), orchestrating external video models, or developing web applications followed by manual screen recording;
  2. Seven production pipelines: Code-drawn 2D, knowledge explainers, 3D/real-time graphics, existing asset conversion, external video model pipelines, application or game screen recordings, and hybrid/undetermined pipelines.
• Difference between the two: yihui-dev focuses on showcasing examples and collecting creators' public prompts or original posts; athemeroy focuses on source attribution, verifying production pipelines, and distinguishing the actual role of the model during creation.

Where to Start Across the Ten Projects

If you already have a project in mind, you can find the corresponding starting point based on the outputs and prerequisites below:

When Choosing a Project, Clarify What You Need to Deliver First

These ten projects illustrate the practical scope of generative AI when combined with code engineering:

1. Code as an alternative path for visual presentation: For geometric graphics, kinetic typography, flat hand-drawn styles, and interactive scenes, generating code via LLMs and executing it in a browser enables deterministic rendering through version control and parametric adjustments, or direct deployment as real-time interactive applications.
2. Distinguishing concept demonstrations from engineering delivery prerequisites: Whether producing automated short films or constructing games in a single session, success hinges on explicit environment specifications (such as virtual clock overrides and script rule constraints), multi-round self-testing audits, or coordinated orchestration of external assets and external models. Understanding each project's environment dependencies, compute costs, and asset provenance is the prerequisite for practical reproduction and selection.