{"slug": "cinecode-a-skill-that-lets-claude-code-make-whole-films-from-code", "title": "cinecode: A Skill That Lets Claude Code Make Whole Films From Code", "summary": "The sarpstar/cinecode repository, a skill for coding agents such as Claude Code that plans a film, writes code to draw every frame in headless Chrome, designs sound and returns a finished MP4, gained about 2,500 GitHub stars in its first ten days after being created on November 3, 2026. The MIT-licensed skill had roughly 2,506 stars and 430 forks at the time of writing, runs on Node.js 22 or newer, Python 3.9 or newer, ffmpeg and Chrome, Chromium or Edge, and produces films from 15-second clips to over ten minutes, with quick mode handling up to about 3 minutes. The README notes long films consume substantial agent time and usage, and Film mode needs several GB of disk per film.", "body_md": "The [sarpstar/cinecode](https://github.com/sarpstar/cinecode?ref=explainx) repository gained about **2,500 GitHub stars** in its first ten days. It was created on November 3, 2026 and was last pushed on November 12. It is not a video model. It is a **skill for coding agents** that asks you for an idea, plans a film, writes the code that draws every frame in headless Chrome, designs the sound, and gives back a finished MP4.\n\nThe pitch on its README, in the English version, is \"films made with code\". You bring the idea and the taste. The agent does the scripting, building and mastering. If you already use [agent skills](https://explainx.ai/blog/what-are-agent-skills-complete-guide) in Claude Code, this one is a large, opinionated example of what a skill can package: a whole production process, not a single prompt.\n\n## TL;DR: what people ask first\n\n| Question | Answer | \n|---|---|\n| What is it? | A skill kit that makes films, ads, explainers and music videos from code | \n| Which agent? | Claude Code is recommended. Cursor is supported. Users report Codex and Antigravity | \n| Is it free? | Yes, MIT license. No paid video service is required. You pay for your agent usage | \n| What does it run on? | Node.js 22 or newer, Python 3.9 or newer, ffmpeg, Chrome, Chromium or Edge, and a GPU Chrome can use | \n| How long can a film be? | From a 15-second clip to films over ten minutes. Quick mode handles up to about 3 minutes | \n| How popular is it? | About 2,506 stars and 430 forks at the time of writing, with 11 open issues and pull requests combined | \n| Biggest catch? | Long films take a lot of agent time and usage, and Film mode needs several GB of disk per film | \n\n## What does cinecode actually do?\n\nThe README splits the skill into five kinds of work. Each one has its own defaults, checks and questions.\n\n- **Short films.** You write one sentence. The agent pairs your idea with a real thing drawn from the world, such as a museum object, an animal, an old invention or a historic place. The aim is to avoid the first, most obvious film everyone would make. It also compares each suggestion with films you already made, so it does not offer the same one twice.\n- **Long YouTube videos.** Documentaries and video essays over ten minutes, built in acts and chapters. The README promises a researched script with sources for every claim about a real person or event, a narrator, archive photos and maps from open archives, and code-drawn maps and counters where no picture exists.\n- **Ads and product films.** You supply product, colours, fonts, logo and call to action. The skill builds the product in detail, lights it like a studio shot, and exports 9:16, 1:1 and 16:9 versions with safe areas. A \"specificity test\" is meant to stop the film from fitting any other brand.\n- **Social explainers.** Vertical films of 30 to 60 seconds with a question in the first second, kinetic type and diagrams that build line by line.\n- **Music videos.** You bring a song. The skill measures its beat grid, puts cuts on bars and hits on beats, and gives each lyric line a picture.\n\nThere are three extras. It can match the form of a video you like (cuts, tempo, light and colour are measured, and the film is rebuilt from scratch, \"never from its frames\"). It can edit your own footage from a word-timed transcript, trimming pauses. And it can save a film's format so the next episode follows it.\n\nA laptop outline with a seedling growing from it, standing for a coding agent growing a film from a single idea in cinecode\n\nThe image above is a generic illustration from our library, not a frame from the project. The repository's own stills and reel are in the README, and we have not copied them here.\n\n## How does a film get made?\n\nThe README describes the same five steps for every film.\n\n1. **You say the idea.** One sentence is enough. A full brief goes straight to work.\n2. **The agent asks a few questions.** They cover how the idea is read, what the film is made of, length and format, the look, and sound and music. Each has a recommended answer marked with a star.\n3. **It shows a plan as text.** That is the beats second by second, plus a \"director card\" you can change line by line. Then it renders two scenes as stills for your approval before building the rest.\n4. **It renders a draft and checks it.** Checks cover motion from the first frame, loudness, legibility and repeats. The README says an independent viewer watches the draft cold, and your notes change only what they touch.\n5. **The final render** is full size, mastered to −14 LUFS, with a credits file for your video description.\n\nThis is the part that separates it from a one-shot prompt. The approval gates cost you a few minutes of reading, but they stop the agent from spending an hour of rendering on the wrong idea.\n\n## Quick mode or Film mode?\n\nThe agent asks this first and recommends one. The README's own comparison is the clearest summary.\n\n|  | Quick mode | Film mode | \n|---|---|---|\n| Output | One self-contained `film.html` | Per-shot three.js renders | \n| Best for | Under a minute, social clips, explainers, ads, up to about 3 minutes | Documentaries, narrated pieces, festival shorts | \n| Approvals | About 3 | About 6 to 8 stage by stage, or about 3 straight through | \n| Picture | Canvas 2D or three.js and WebGL | three.js with eight look presets | \n| Sound | Built in the same file with Web Audio, rendered offline | Layered beds, foley, voice and music | \n| Agents | One main chat builds, renders and revises | Helpers work in parallel on sound, narration, research and review | \n\nYou can start in Quick mode and promote the film to Film mode later. The beats become the roadmap.\n\nA cream pair of scissors trimming a green section from a filmstrip, representing the cut and revision step when you make films with code\n\n## What do you need to install it?\n\nThe skill is a folder. Per the README, you tell Claude Code to install the skill from the repo, or clone it into `~/.claude/skills/cinecode`. The README also gives setup steps for Cursor and other agents. For the Claude Code side of this workflow, our [Claude Code commands reference](https://explainx.ai/blog/claude-code-commands-complete-reference-guide-2026) covers the slash commands you will use to run it.\n\nRequirements from the README:\n\n- Node.js 22 or newer.\n- Python 3.9 or newer.\n- ffmpeg.\n- Google Chrome, Chromium or Edge. Frames are rendered in headless Chrome.\n- A GPU that Chrome can use. Software rendering will be slow.\n- Several gigabytes of disk per film in Film mode.\n\nA starter prompt that matches the flow it describes:\n\n```\nUse the cinecode skill. Make a 45-second vertical explainer about why the sky is blue.\nQuick mode. Kinetic type, no voice-over, calm music. Show me the plan and two stills first.\n```\n\nNo paid service is required. Voice-over is optional: you can bring your own Gemini key (it has a free quota), ElevenLabs, or use a free Turkish voice. The README is Turkish first, and some defaults, such as the Turkish-checked font pairings for explainers, reflect that. English, Chinese and Japanese READMEs are in the repo.\n\n## How is it different from other video skills?\n\nWe have covered several agent-driven video tools, and they sit at different points on the same spectrum.\n\n- [claude-animated-shorts](https://explainx.ai/blog/claude-animated-shorts-remotion-threejs-agent-skill-github-trending-guide-2026) packages one fixed look, ink-outline characters in a painted 3D world, on Remotion. cinecode is broader and has its own render pipeline with eight presets.\n- [HyperFrames](https://explainx.ai/blog/hyperframes-heygen-html-to-video-ai-agents-2026) turns HTML into video for agents. cinecode also leans on HTML and Chrome, but adds planning, approvals and sound design on top.\n- [Video Use](https://explainx.ai/blog/video-use-claude-code-ai-video-editor-guide-2026) edits footage you already have. cinecode can do that too, but its main job is creating the footage from nothing.\n- [OpenMontage](https://explainx.ai/blog/openmontage-agentic-video-production-claude-code-2026) orchestrates generative video tools. cinecode avoids video models and draws everything in code.\n- [rea-video](https://explainx.ai/blog/rea-video-reverse-engineer-any-video-shot-by-shot-agent-skill-live-ai-code-apache-2026) reverse-engineers a video shot by shot. cinecode's \"like a video you love\" mode measures the form of a reference in a similar spirit, but rebuilds it new.\n\nThe common thread is that none of them needs a text-to-video model. The tradeoff is a look: code-drawn films read as graphic, typographic, miniature or illustrated. The README's gallery fits this. Titles include a linocut mail train, a watch ad with a skyline engraved on a movement, a paper city under falling code, and a 5-minute documentary. Do not expect photoreal people.\n\n## What are the limits and risks?\n\nWe read the README and repository files. We have not rendered a film with it, so we cannot report speed or quality from our own runs. Based on what the README says:\n\n- **Time and usage scale with length.** The README itself warns that the longer the film, the more time and usage it takes. On a metered plan, a documentary run may be expensive. Check your plan's limits before starting.\n- **Hardware matters.** Headless Chrome needs a usable GPU, and Film mode eats disk.\n- **Research claims need your eyes.** The skill promises sourced scripts for real people and events. An agent can still get a fact wrong. Read the script at the approval stage before it is rendered into a video with your name on it.\n- **Reference-based mode and rights.** \"Like a video you love\" measures form, not frames. The README also mentions a licensing record for outside assets. You are still responsible for the music, fonts and archive material you ship.\n- **Young project.** The repo is about ten days old, with 11 open issues and pull requests. Expect fast changes and rough edges. Pin a commit if you depend on it for client work.\n- **Skills run code on your machine.** Any skill that installs tools and executes scripts deserves a read-through of`SKILL.md` and the`scripts` folder before the first run. The same advice applies to every[agent skill](https://explainx.ai/blog/what-are-agent-skills-complete-guide) you install.\n\n## Who should try it this week?\n\nIt fits a few jobs well.\n\n- **Founders and marketers** who need a 15-second ad or a 45-second explainer in three aspect ratios, and are happy with a designed, graphic look.\n- **Educators** who want vertical explainers with diagrams that build line by line.\n- **Developers** who like film.html as an output: one self-contained file, scenes as functions of time, inspectable and diffable.\n- **Musicians** who want a lyric-synced visual without a video model.\n\nIt fits poorly if you need photorealistic footage, a face, or an exact brand video from a style guide you cannot hand over. For that you still want a generative model or a camera.\n\n## What to do next\n\n1. Read `SKILL.md` and`README.en.md` in the repo before installing.\n2. Start in Quick mode with a 15 to 45 second clip. Judge the plan and two stills before you approve a render.\n3. Watch your agent usage on the first run. Move to Film mode only if the first result is good.\n4. Keep a note of fonts, music and archive sources for the credits file.\n\nThe larger point is the pattern. A skill can carry a full creative process, with questions, gates, checks and defaults, so that an agent does repeatable work instead of a lucky single generation. cinecode is an early, fast-growing example, and its star count shows how many people want that.\n\n## Related reading\n\n- [claude-animated-shorts: Remotion and three.js story shorts](https://explainx.ai/blog/claude-animated-shorts-remotion-threejs-agent-skill-github-trending-guide-2026)\n- [HyperFrames: HTML to video for AI agents](https://explainx.ai/blog/hyperframes-heygen-html-to-video-ai-agents-2026)\n- [Video Use: Claude Code as a video editor](https://explainx.ai/blog/video-use-claude-code-ai-video-editor-guide-2026)\n- [OpenMontage: agentic video production](https://explainx.ai/blog/openmontage-agentic-video-production-claude-code-2026)\n- [rea-video: reverse-engineer a video shot by shot](https://explainx.ai/blog/rea-video-reverse-engineer-any-video-shot-by-shot-agent-skill-live-ai-code-apache-2026)\n- [What are agent skills? A complete guide](https://explainx.ai/blog/what-are-agent-skills-complete-guide)\n- Official: [three.js](https://threejs.org/?ref=explainx) and[ffmpeg](https://ffmpeg.org/?ref=explainx) , the rendering and assembly tools cinecode relies on, and the repo's[English README](https://github.com/sarpstar/cinecode/blob/main/README.en.md?ref=explainx)\n\n*Repository details, star counts and requirements are accurate as of November 15, 2026 and may change.*", "url": "https://wpnews.pro/news/cinecode-a-skill-that-lets-claude-code-make-whole-films-from-code", "canonical_source": "https://explainx.ai/blog/cinecode-claude-code-skill-films-from-code-three-js-ffmpeg-mit-github-trending-2026?utm_source=rss&utm_medium=feed&utm_campaign=blog", "published_at": "2026-11-15 00:00:00+00:00", "updated_at": "2026-11-15 01:52:31.695912+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "generative-ai"], "entities": ["cinecode", "sarpstar", "Claude Code", "Cursor", "Codex", "Antigravity", "GitHub"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/cinecode-a-skill-that-lets-claude-code-make-whole-films-from-code", "markdown": "https://wpnews.pro/news/cinecode-a-skill-that-lets-claude-code-make-whole-films-from-code.md", "text": "https://wpnews.pro/news/cinecode-a-skill-that-lets-claude-code-make-whole-films-from-code.txt", "jsonld": "https://wpnews.pro/news/cinecode-a-skill-that-lets-claude-code-make-whole-films-from-code.jsonld"}}