this one was way too fun to make. sullie's reactions started from JohnHeibel/ClaudeAnimationBase x.com
1 view
02 ClaudeAnimationBase — 手绘卡通动画启动套件
简介：手绘卡通动画 Claude 启动套件：p5.js + p5.brush，自带 Clawd 角色与 31 种情绪，开箱即动画。
推荐理由：MIT；把 10-25 的「看懂界面」补上「生成动画内容」，给 Agent 一套可动画的创意基础设施。
信息来源：JohnHeibel/ClaudeAnimationBase
#AI动画 #手绘卡通 #p5js #创意编码
x.com
7 views
分享一个适合 Vibe Coding 创作视频的开源项目，可以参考作为创作新的思路！
GitHub 仓库名称：ClaudeAnimationBase
JohnHeibel/ClaudeAnimationBase
用 p5.js + 手绘笔刷，把 AI Coding Agent 变成一个动画制作助手。
从分镜设计、逐镜头编写，到动画渲染、画面检查，最后直接导出 MP4。
我用 GLM-5.3 Flash 跑了一下，效果可以看下面视频👇
这个项目最值得借鉴的，不只是生成动画，而是整套创作思路：
把视频拆成分镜，让 AI 用代码控制角色、动作、镜头和转场，再通过渲染检查不断迭代。
这套思路不局限于手绘动画，也能给我们用 Vibe Coding 做剧情短片、知识科普、视频 IP 提供参考。
想折腾 AI 视频的兄弟，可以研究下这个项目。
108 views
Can Claude Make Videos? I Tested the Viral GitHub Projects
A post listing 8 GitHub projects for making videos with Claude got 21,000 bookmarks. I checked all 8, and tested 2 of their style prompts with a fresh Claude Code session. Here's what's inside, what worked, what went wrong, and where I'd start.
Chapters
0:00 Make videos fast with Claude?
0:15 What you will get
0:29 About this channel
0:37 One trick behind all 8
1:34 What is inside
2:37 Test 1: same prompt
3:29 Test 2: real news
4:40 What I did not do
5:01 The verdict
The 8 projects (star counts from the GitHub API, Oct 25, 2026)
- awesome-opus5-5-videos (MIT): yihui-dev/awesome-opus5-5-videos
- lemo-opuscar (MIT): lemomo-ai/lemo-opuscar
- pdoom-video (MIT): mexicat/pdoom-video
- PDoomVideo (no license listed): JohnHeibel/PDoomVideo
- mg-styles-15 (MIT): Vincentwei1021/mg-styles-15
- ClaudeAnimationBase (MIT): JohnHeibel/ClaudeAnimationBase
- awesome-claude-5-5-videos (CC BY 4.0): athemeroy/awesome-claude-5-5-videos
- opus-video-prompts (no license listed): joeseesun/opus-video-prompts
Original post: x.com
How I tested it
- Oct 25, 2026. Test 1: the mg-styles-15 "10-synthwave" prompt, word for word, in a fresh Claude Code session with my own frame-by-frame renderer. About 10.5 minutes, 2 rounds of fixes.
- Test 2: the lemo-opuscar "Caption News" style prompt with facts and screenshots from my PHP2Shell video. About 5.5 minutes, 3 rounds of fixes. I turned sound off and only gave it 960 px stock clips, so the soft footage and silence are my settings. The issue I point out: a source tag sits next to a fact its page doesn't show (the fact itself is right).
- Both tests ran in a new Claude Code chat with Claude Opus 5.5.
- Two prompts, one try each. It doesn't tell you how the other styles do.
- I did not run any project's install scripts or code. I only used their public prompts.
- The 50 on the Hype Meter is my own score for the claim "8 repos you have to save".
Voiced with AI. No sponsorships. Screenshots of public GitHub pages and sample frames are shown for commentary and review. This channel isn't affiliated with Anthropic, GitHub, Skillry or any of the projects above.
Footage in test 2 (Pixabay Content License): geralt, CreativeWorlds99, SAHN_VIT, Coverr-Free-Footage. Screenshots in test 2: Wikipedia, Wiz, Calif, CNBC (headline only), captured Oct 24, 2026.
Sample frames from the projects above are shown for review; each belongs to its creator.
Footage in the video: Pixabay (Pixabay Content License): magicmore, Activedia, Coverr-Free-Footage, voltamax, Ambient_Nature_Atmosphere, ninosouza. Sample films from mg-styles-15 (MIT).
68 views
ClaudeAnimationBase GitHub Overview: Deterministic Watercolor Animation with p5.js
claudeanimationbase by johnheibel: johnheibel/claudeanimationbase
ClaudeAnimationBase is a code-driven animation base for creating hand-painted cartoon visuals with JavaScript, p5.js, and p5.brush. This overview maps the local rendering architecture around Node.js, headless Chrome, Playwright, WebGL, and FFmpeg, then follows the workflow from repository setup and a demo render through storyboard planning, scene generation, contact sheets, frame strips, and cropped diagnostics. It also explains why parallel rendering benefits from stateless, time-based scene logic and deterministic seeds, plus the trade-offs of watercolor computation, local dependencies, and audio handling.
TimeStamps:
0:00 Code-Driven Watercolor Animation Overview
0:33 Local Rendering Stack: Node.js, Chrome, and FFmpeg
1:10 Repository Setup and Demo Pipeline
2:15 Storyboards Before Scene Code
3:12 Contact Sheets, Frame Strips, and Cropped Diagnostics
4:24 Parallel Rendering and Deterministic Frames
5:04 FFmpeg Encoding and Audio Handling
5:39 Local Dependencies and Licensing Trade-offs
6:19 Deterministic Control and Production Discipline
🎨 Code-driven watercolor animation with p5.js and p5.brush
🧩 Storyboards, scene files, and visual diagnostics
🖥️ Headless Chrome, WebGL, and FFmpeg rendering
⏱️ Stateless frames and deterministic parallel processing
A useful starting point for creative coders and motion designers comparing programmable 2D animation with diffusion-based video. The key takeaway is the division between AI-authored scene logic and a local browser-based renderer, with deterministic timing and diagnostic images supporting repeatable iteration.
#ClaudeAnimationBase #p5js #GenerativeAnimation
[de-DE] YNAS ynp_5fdbee959bd39f69 Cinematic
Privater automatisierter Staging-Upload. Paketidentität: ynp_5fdbee959bd39f69; Ausgabe: cinematic.
[es-US] YNAS ynp_5fdbee959bd39f69 cinematográfico
Carga de entorno de prueba de automatización privada. Identidad del paquete: ynp_5fdbee959bd39f69; salida: cinematográfica.
[fr-FR] YNAS ynp_5fdbee959bd39f69 cinématique
Téléchargement de l'environnement de test d'automatisation privé. Identifiant du package : ynp_5fdbee959bd39f69 ; sortie : cinématique.
[hi] YNAS ynp_5fdbee959bd39f69 सिनेमैटिक
निजी स्वचालन स्टेजिंग अपलोड। पैकेज पहचान: ynp_5fdbee959bd39f69; आउटपुट: सिनेमाई।
[id] YNAS ynp_5fdbee959bd39f69 sinematik
Unggahan staging otomatisasi pribadi. Identitas paket: ynp_5fdbee959bd39f69; output: sinematik.
[it] YNAS ynp_5fdbee959bd39f69 cinematografico
Caricamento di automazione privata. Identità del pacchetto: ynp_5fdbee959bd39f69; output: cinematografico.
[pt-BR] YNAS ynp_5fdbee959bd39f69 cinematográfico
Upload de teste de automação privada. Identidade do pacote: ynp_5fdbee959bd39f69; saída: cinemática.
216 views
7 Free GitHub Repos That Turn Claude Into a Video Studio
Those clean motion graphics, little cartoon films and full music videos all over your feed? People made them by asking Claude to write the video as code. Here are 7 free GitHub repos that show you exactly how, with the real prompts, the real films and the code, so you can make your own.
▶ What you'll see
• How it actually works: Claude writes a web page that draws every frame, Chrome captures it, and free FFmpeg turns it into an MP4
• #1 awesome-opus5-5-videos: 703 prompts behind real viral videos, each linked to the creator's post
• #2 opus-video-prompts: 54 examples, 18 full prompts, and a one-line prompt that works
• #3 mg-styles-15: 15 motion-graphics styles, each with the film, the full prompt and all the code
• #4 lemo-opuscar: a Claude Code skill with 51 film styles (the one I'd start with)
• #5 ClaudeAnimationBase: a cartoon starter kit with Clawd and 31 expressions
• #6 The P(doom) pair: two music videos for the same song, two directors
• #7 awesome-claude-5-5-videos: 424 source posts, and why a cheaper model can be enough
• The honest limits, and where I'd start
📄 FREE PDF: all 7 repos with every link, the copy-paste prompts from this video and a setup checklist. Comment CINEMA and I'll send it to you.
🎬 Don't want the setup? We built Make Viral Reels: paste a link or pick a story going viral in your niche, choose a style, and get a finished video with voice, captions and music. Your first one is free → makeviralreels.com
⏱ Chapters
0:00 The videos all over your feed
0:48 How it actually works
1:16 #1 awesome-opus5-5-videos
1:41 #2 opus-video-prompts
2:10 #3 mg-styles-15
2:50 #4 lemo-opuscar
3:50 Skip the setup: Make Viral Reels
4:07 #5 ClaudeAnimationBase
4:56 #6 The P(doom) music videos
5:34 #7 awesome-claude-5-5-videos
6:10 Honest limits + where to start
6:35 Free PDF
🔗 The 7 repos (stars as of Oct 21, 2026)
1. awesome-opus5-5-videos (8.4K ★): yihui-dev/awesome-opus5-5-videos
2. opus-video-prompts: joeseesun/opus-video-prompts
3. mg-styles-15: Vincentwei1021/mg-styles-15
4. lemo-opuscar (4.9K ★): lemomo-ai/lemo-opuscar
5. ClaudeAnimationBase: JohnHeibel/ClaudeAnimationBase
6. P(doom) music videos: JohnHeibel/PDoomVideo and mexicat/pdoom-video
7. awesome-claude-5-5-videos: athemeroy/awesome-claude-5-5-videos
Honest notes:
• The repos are free, but Claude Code needs a paid Claude plan. Node, Chrome and FFmpeg are free.
• Claude Motion is currently for Team and Enterprise plans (claude.com/pricing, Oct 21, 2026).
• All films shown belong to their creators and are shown muted with credit. The lemo-opuscar demo films are by LemoLab (CC BY 4.0). The P(doom) song's audio is not used.
• The Haiku vs Opus costs ($2.19 vs $3.04) are what one creator reported for one scene; your costs will vary.
📚 New to building with AI? My beginner guides:
• The Complete Claude Code Guide: hyperautomationlabs.gumroad.com
• The OpenAI Codex Guide: hyperautomationlabs.gumroad.com
• Claude Cowork Sales Guide: hyperautomationlabs.gumroad.com
• Claude Certified Architect Prep Kit: hyperautomationlabs.gumroad.com
❤️ Support the channel: hit Join on YouTube to become a member, or become a Supporter on Facebook.
Deep dives like this live here on YouTube → youtube.com
Bite-size AI drops on Instagram → instagram.com
Join the community on Facebook → facebook.com
▶️ Tip: watch at 1.25× or 1.5× for the best experience.
Independent video. Not sponsored by or affiliated with Anthropic or any of the repo creators. Make Viral Reels is our own product.
#Claude #ClaudeCode #AIVideo #MotionGraphics #GitHub #Opus55 #OpenSource
361 likes · 43 comments · 21,373 views
@zjucat7 @other__reality 想自己试：
1. 克隆 JohnHeibel/ClaudeAnimationBase
2. 把歌放进 assets/。我还多放了一份逐字歌词时间表，方便它卡点
3. 在 Claude Code 里说那一句话
作者在 README 里说，推理档开得越高，画面越铺张、越抠细节，他的测试片都是 xhigh 跑的。我这支只开了 medium。
2 views
The animation was made with ClaudeAnimationBase, John Heibel's open-source kit for hand-painted Claude animations: JohnHeibel/ClaudeAnimationBase
1 like · 1 repost · 598 views
Mentions
this one was way too fun to make. sullie's reactions started from JohnHeibel/ClaudeAnimationBase x.com
02 ClaudeAnimationBase — 手绘卡通动画启动套件 简介：手绘卡通动画 Claude 启动套件：p5.js + p5.brush，自带 Clawd 角色与 31 种情绪，开箱即动画。 推荐理由：MIT；把 10-25 的「看懂界面」补上「生成动画内容」，给 Agent 一套可动画的创意基础设施。 信息来源：JohnHeibel/ClaudeAnimationBase #AI动画 #手绘卡通 #p5js #创意编码 x.com
分享一个适合 Vibe Coding 创作视频的开源项目，可以参考作为创作新的思路！ GitHub 仓库名称：ClaudeAnimationBase JohnHeibel/ClaudeAnimationBase 用 p5.js + 手绘笔刷，把 AI Coding Agent 变成一个动画制作助手。 从分镜设计、逐镜头编写，到动画渲染、画面检查，最后直接导出 MP4。 我用 GLM-5.3 Flash 跑了一下，效果可以看下面视频👇 这个项目最值得借鉴的，不只是生成动画，而是整套创作思路： 把视频拆成分镜，让 AI 用代码控制角色、动作、镜头和转场，再通过渲染检查不断迭代。 这套思路不局限于手绘动画，也能给我们用 Vibe Coding 做剧情短片、知识科普、视频 IP 提供参考。 想折腾 AI 视频的兄弟，可以研究下这个项目。
Can Claude Make Videos? I Tested the Viral GitHub Projects A post listing 8 GitHub projects for making videos with Claude got 21,000 bookmarks. I checked all 8, and tested 2 of their style prompts with a fresh Claude Code session. Here's what's inside, what worked, what went wrong, and where I'd start. Chapters 0:00 Make videos fast with Claude? 0:15 What you will get 0:29 About this channel 0:37 One trick behind all 8 1:34 What is inside 2:37 Test 1: same prompt 3:29 Test 2: real news 4:40 What I did not do 5:01 The verdict The 8 projects (star counts from the GitHub API, Oct 25, 2026) - awesome-opus5-5-videos (MIT): yihui-dev/awesome-opus5-5-videos - lemo-opuscar (MIT): lemomo-ai/lemo-opuscar - pdoom-video (MIT): mexicat/pdoom-video - PDoomVideo (no license listed): JohnHeibel/PDoomVideo - mg-styles-15 (MIT): Vincentwei1021/mg-styles-15 - ClaudeAnimationBase (MIT): JohnHeibel/ClaudeAnimationBase - awesome-claude-5-5-videos (CC BY 4.0): athemeroy/awesome-claude-5-5-videos - opus-video-prompts (no license listed): joeseesun/opus-video-prompts Original post: x.com How I tested it - Oct 25, 2026. Test 1: the mg-styles-15 "10-synthwave" prompt, word for word, in a fresh Claude Code session with my own frame-by-frame renderer. About 10.5 minutes, 2 rounds of fixes. - Test 2: the lemo-opuscar "Caption News" style prompt with facts and screenshots from my PHP2Shell video. About 5.5 minutes, 3 rounds of fixes. I turned sound off and only gave it 960 px stock clips, so the soft footage and silence are my settings. The issue I point out: a source tag sits next to a fact its page doesn't show (the fact itself is right). - Both tests ran in a new Claude Code chat with Claude Opus 5.5. - Two prompts, one try each. It doesn't tell you how the other styles do. - I did not run any project's install scripts or code. I only used their public prompts. - The 50 on the Hype Meter is my own score for the claim "8 repos you have to save". Voiced with AI. No sponsorships. Screenshots of public GitHub pages and sample frames are shown for commentary and review. This channel isn't affiliated with Anthropic, GitHub, Skillry or any of the projects above. Footage in test 2 (Pixabay Content License): geralt, CreativeWorlds99, SAHN_VIT, Coverr-Free-Footage. Screenshots in test 2: Wikipedia, Wiz, Calif, CNBC (headline only), captured Oct 24, 2026. Sample frames from the projects above are shown for review; each belongs to its creator. Footage in the video: Pixabay (Pixabay Content License): magicmore, Activedia, Coverr-Free-Footage, voltamax, Ambient_Nature_Atmosphere, ninosouza. Sample films from mg-styles-15 (MIT).
ClaudeAnimationBase GitHub Overview: Deterministic Watercolor Animation with p5.js claudeanimationbase by johnheibel: johnheibel/claudeanimationbase ClaudeAnimationBase is a code-driven animation base for creating hand-painted cartoon visuals with JavaScript, p5.js, and p5.brush. This overview maps the local rendering architecture around Node.js, headless Chrome, Playwright, WebGL, and FFmpeg, then follows the workflow from repository setup and a demo render through storyboard planning, scene generation, contact sheets, frame strips, and cropped diagnostics. It also explains why parallel rendering benefits from stateless, time-based scene logic and deterministic seeds, plus the trade-offs of watercolor computation, local dependencies, and audio handling. TimeStamps: 0:00 Code-Driven Watercolor Animation Overview 0:33 Local Rendering Stack: Node.js, Chrome, and FFmpeg 1:10 Repository Setup and Demo Pipeline 2:15 Storyboards Before Scene Code 3:12 Contact Sheets, Frame Strips, and Cropped Diagnostics 4:24 Parallel Rendering and Deterministic Frames 5:04 FFmpeg Encoding and Audio Handling 5:39 Local Dependencies and Licensing Trade-offs 6:19 Deterministic Control and Production Discipline 🎨 Code-driven watercolor animation with p5.js and p5.brush 🧩 Storyboards, scene files, and visual diagnostics 🖥️ Headless Chrome, WebGL, and FFmpeg rendering ⏱️ Stateless frames and deterministic parallel processing A useful starting point for creative coders and motion designers comparing programmable 2D animation with diffusion-based video. The key takeaway is the division between AI-authored scene logic and a local browser-based renderer, with deterministic timing and diagnostic images supporting repeatable iteration. #ClaudeAnimationBase #p5js #GenerativeAnimation [de-DE] YNAS ynp_5fdbee959bd39f69 Cinematic Privater automatisierter Staging-Upload. Paketidentität: ynp_5fdbee959bd39f69; Ausgabe: cinematic. [es-US] YNAS ynp_5fdbee959bd39f69 cinematográfico Carga de entorno de prueba de automatización privada. Identidad del paquete: ynp_5fdbee959bd39f69; salida: cinematográfica. [fr-FR] YNAS ynp_5fdbee959bd39f69 cinématique Téléchargement de l'environnement de test d'automatisation privé. Identifiant du package : ynp_5fdbee959bd39f69 ; sortie : cinématique. [hi] YNAS ynp_5fdbee959bd39f69 सिनेमैटिक निजी स्वचालन स्टेजिंग अपलोड। पैकेज पहचान: ynp_5fdbee959bd39f69; आउटपुट: सिनेमाई। [id] YNAS ynp_5fdbee959bd39f69 sinematik Unggahan staging otomatisasi pribadi. Identitas paket: ynp_5fdbee959bd39f69; output: sinematik. [it] YNAS ynp_5fdbee959bd39f69 cinematografico Caricamento di automazione privata. Identità del pacchetto: ynp_5fdbee959bd39f69; output: cinematografico. [pt-BR] YNAS ynp_5fdbee959bd39f69 cinematográfico Upload de teste de automação privada. Identidade do pacote: ynp_5fdbee959bd39f69; saída: cinemática.
7 Free GitHub Repos That Turn Claude Into a Video Studio Those clean motion graphics, little cartoon films and full music videos all over your feed? People made them by asking Claude to write the video as code. Here are 7 free GitHub repos that show you exactly how, with the real prompts, the real films and the code, so you can make your own. ▶ What you'll see • How it actually works: Claude writes a web page that draws every frame, Chrome captures it, and free FFmpeg turns it into an MP4 • #1 awesome-opus5-5-videos: 703 prompts behind real viral videos, each linked to the creator's post • #2 opus-video-prompts: 54 examples, 18 full prompts, and a one-line prompt that works • #3 mg-styles-15: 15 motion-graphics styles, each with the film, the full prompt and all the code • #4 lemo-opuscar: a Claude Code skill with 51 film styles (the one I'd start with) • #5 ClaudeAnimationBase: a cartoon starter kit with Clawd and 31 expressions • #6 The P(doom) pair: two music videos for the same song, two directors • #7 awesome-claude-5-5-videos: 424 source posts, and why a cheaper model can be enough • The honest limits, and where I'd start 📄 FREE PDF: all 7 repos with every link, the copy-paste prompts from this video and a setup checklist. Comment CINEMA and I'll send it to you. 🎬 Don't want the setup? We built Make Viral Reels: paste a link or pick a story going viral in your niche, choose a style, and get a finished video with voice, captions and music. Your first one is free → makeviralreels.com ⏱ Chapters 0:00 The videos all over your feed 0:48 How it actually works 1:16 #1 awesome-opus5-5-videos 1:41 #2 opus-video-prompts 2:10 #3 mg-styles-15 2:50 #4 lemo-opuscar 3:50 Skip the setup: Make Viral Reels 4:07 #5 ClaudeAnimationBase 4:56 #6 The P(doom) music videos 5:34 #7 awesome-claude-5-5-videos 6:10 Honest limits + where to start 6:35 Free PDF 🔗 The 7 repos (stars as of Oct 21, 2026) 1. awesome-opus5-5-videos (8.4K ★): yihui-dev/awesome-opus5-5-videos 2. opus-video-prompts: joeseesun/opus-video-prompts 3. mg-styles-15: Vincentwei1021/mg-styles-15 4. lemo-opuscar (4.9K ★): lemomo-ai/lemo-opuscar 5. ClaudeAnimationBase: JohnHeibel/ClaudeAnimationBase 6. P(doom) music videos: JohnHeibel/PDoomVideo and mexicat/pdoom-video 7. awesome-claude-5-5-videos: athemeroy/awesome-claude-5-5-videos Honest notes: • The repos are free, but Claude Code needs a paid Claude plan. Node, Chrome and FFmpeg are free. • Claude Motion is currently for Team and Enterprise plans (claude.com/pricing, Oct 21, 2026). • All films shown belong to their creators and are shown muted with credit. The lemo-opuscar demo films are by LemoLab (CC BY 4.0). The P(doom) song's audio is not used. • The Haiku vs Opus costs ($2.19 vs $3.04) are what one creator reported for one scene; your costs will vary. 📚 New to building with AI? My beginner guides: • The Complete Claude Code Guide: hyperautomationlabs.gumroad.com • The OpenAI Codex Guide: hyperautomationlabs.gumroad.com • Claude Cowork Sales Guide: hyperautomationlabs.gumroad.com • Claude Certified Architect Prep Kit: hyperautomationlabs.gumroad.com ❤️ Support the channel: hit Join on YouTube to become a member, or become a Supporter on Facebook. Deep dives like this live here on YouTube → youtube.com Bite-size AI drops on Instagram → instagram.com Join the community on Facebook → facebook.com ▶️ Tip: watch at 1.25× or 1.5× for the best experience. Independent video. Not sponsored by or affiliated with Anthropic or any of the repo creators. Make Viral Reels is our own product. #Claude #ClaudeCode #AIVideo #MotionGraphics #GitHub #Opus55 #OpenSource
@zjucat7 @other__reality 想自己试： 1. 克隆 JohnHeibel/ClaudeAnimationBase 2. 把歌放进 assets/。我还多放了一份逐字歌词时间表，方便它卡点 3. 在 Claude Code 里说那一句话 作者在 README 里说，推理档开得越高，画面越铺张、越抠细节，他的测试片都是 xhigh 跑的。我这支只开了 medium。
The animation was made with ClaudeAnimationBase, John Heibel's open-source kit for hand-painted Claude animations: JohnHeibel/ClaudeAnimationBase