▶ Watch the full trailer in 2560×1440 at 60 fps · It is itself video as code: an AI agent wrote it as HTML and a GLSL deep-space shader, and a zero-dependency script rendered it with headless Chrome and FFmpeg.
Curated tools, agent skills, production workflows, source-available showcases, and research for creating videos with code written or directed by AI agents.
English · 简体中文
Video as code treats executable source as the visual medium: an agent writes HTML, Canvas, SVG, React, TypeScript, or Python, and a browser or rendering engine turns it into video. This list focuses on that inspectable, programmable workflow. Tools that orchestrate pixel-generating video models are included only when their agent or pipeline design is directly useful to video-as-code practitioners.
- Start Here
- Frameworks and Renderers
- Agent Skills and Tooling
- MCP Servers and Integrations
- Production Pipeline
- Showcases
- Research
- Learning
| If you want to… | Start with… |
|---|---|
| Build videos with ordinary HTML, CSS, and JavaScript | Frameworks and Renderers |
| Compose videos as React components | Frameworks and Renderers |
| Create technical or mathematical animation | Frameworks and Renderers |
| Give an agent a specialized video-making workflow | Agent Skills and Tooling |
| Add audio, captions, assets, or automated rendering | Production Pipeline |
| Learn from complete projects with public source code | Showcases |
The core path is brief → agent → executable visual code → deterministic renderer → video file. Generated-video APIs, stock-footage assembly, and screen recording are adjacent paths, not the primary scope of this list.
| Label | Meaning |
|---|---|
| Code-rendered | Code defines the frames or scene graph; a browser or graphics engine produces the pixels. |
| Hybrid | Code assembles ordinary media and may optionally include model-generated assets. |
| Pipeline | Supporting infrastructure for capture, timelines, transcription, encoding, or delivery. |
- Remotion - Code-rendered React framework, Studio, player, and rendering stack for programmatic video; source-available under the Remotion License.
- HyperFrames - Code-rendered HTML video framework with seekable animation adapters and deterministic Chrome-and-FFmpeg rendering.
- Motion Canvas - Code-rendered TypeScript framework and real-time editor for explanatory vector animations synchronized with voice-over.
- Manim Community - Code-rendered Python engine for precise mathematical and technical animations.
- Revideo - Code-rendered TypeScript framework with parameterized templates, a player, and headless rendering for video applications.
- MoviePy - Hybrid Python library for scripted cutting, compositing, effects, titles, and encoding.
- p5.js - Code-rendered creative-coding library for Canvas and WebGL visuals that can be captured frame by frame.
- Three.js - Code-rendered JavaScript 3D engine for WebGL scenes that can be captured by browser-based video renderers.
- Remotion Agent Skills - Code-rendered first-party agent instructions for composition, animation, audio, captions, transitions, and rendering with Remotion.
- HyperFrames Skills - Code-rendered first-party skills for planning, creating, checking, previewing, editing, and rendering HyperFrames projects.
- Claude Code Video Toolkit - Hybrid agent workspace combining Remotion, FFmpeg, browser recording, transcription, voice, music, and generated assets.
- Motion Skills - Code-rendered installable skills for kinetic type, explainers, data visualization, short-form video, WebGL, and Manim.
- Claude Motion Design - Code-rendered skill and examples for creating motion graphics in HTML and rendering them with Playwright and FFmpeg.
- Videowright - Code-rendered coding-agent workflow for assembling animated explainer videos from structured plans and source-controlled assets.
- Pireel - Hybrid timeline editor whose agent plugin lets MCP-capable agents edit cuts, captions, graphics, audio, and exports while a person retains GUI control.
- OpenVidStudio - Hybrid MCP workflow that captures a real application with Playwright and composes product footage with Remotion.
- mimic-mcp - Hybrid MCP server that analyzes a reference reel, scaffolds a Remotion project from supplied footage, renders it, and performs a visual review.
- Blender MCP - Code-rendered community integration that lets language models control Blender scenes and render conventional 3D animation.
- FFmpeg - Pipeline toolkit for encoding, muxing, filtering, audio mixing, probing, and format conversion.
- OpenTimelineIO - Pipeline interchange format and API for editorial timelines, clips, tracks, transitions, and adapters.
- Whisper - Pipeline speech-recognition model and reference implementation for producing transcripts for subtitle workflows.
- WhisperX - Pipeline transcription tool with word-level alignment and optional diarization for caption timing.
- ffmpeg.wasm - Pipeline WebAssembly port of FFmpeg for browser-side media conversion and assembly.
Projects in this section publish source code, prompts, or production notes that reveal how the video was made.
- PDoomVideo - Code-rendered music video project with p5.js and p5.brush source, a storyboard, an animation guide, and a browser renderer.
- ClaudeAnimationBase - Code-rendered starter project with p5.js rendering, a hand-painted character, reusable emotional performances, and coding-agent instructions.
- Lemo Opuscar - Code-rendered collection of short films paired with reusable visual-style prompts and directing guidance.
- Zero to Product Video Hero - Code-rendered Remotion project publishing the composition source, output, production plan, and agent conversation for a product video.
- Manimator: Transforming Research Papers into Visual Explanations - Code-rendered two-stage system that turns papers or prompts into structured scenes and executable Manim code.
- Training and Agentic Inference Strategies for LLM-Based Manim Animation Generation - Code-rendered study of supervised training, reinforcement learning, renderer feedback, documentation retrieval, and evaluation for text-to-Manim systems.
- LLM2Manim: Pedagogy-Aware AI Generation of STEM Animations - Code-rendered human-in-the-loop pipeline using constrained prompts, symbol consistency, targeted regeneration, narration, and expert review.
- PhysicsSolutionAgent - Code-rendered agent that produces multi-minute Manim explanations and iteratively checks them with quantitative rules and visual-model feedback.
- Remotion Documentation - Official introduction to creating React compositions, previewing them in Remotion Studio, and rendering video.
- Remotion Agent Skills Guide - Official guide to Remotion's creation, editing, rendering, captioning, multimedia, and application-building skills.
- HyperFrames Quickstart - Official walkthrough for creating and rendering a deterministic HTML composition with an agent or by hand.
- HyperFrames Prompt Guide - First-party guidance for writing briefs, supplying context, iterating with motion vocabulary, and avoiding common failures.
- Motion Canvas Quickstart - Official introduction to scenes, generator functions, real-time preview, and rendering.
- Manim Example Gallery - Official gallery pairing rendered mathematical animations with the Python source that produced them.
- Awesome Opus 5.5 Videos - Model-specific gallery of prompts, source posts, and live remakes for Claude Opus 5.5 video experiments.
- Awesome Claude 5.5 Videos - Source-linked catalog that records prompts, tools, production evidence, and model variants.
- Awesome Creative Coding - Creative-coding tools, frameworks, books, tutorials, and communities across visual media.
- Awesome Web Animation - Browser animation libraries and learning resources for SVG, CSS, Canvas, JavaScript, and React.
Contributions are welcome. Please read the contribution guidelines before submitting a resource. If this list saved you some searching, a star helps other people find it.