Awesome Code Video
Reusable visual styles, shot recipes, and editable templates for making videos with code.
English · 简体中文
Website: https://awesomecodevideo.com/ · Search the resource library · Browse by use case
Browse visual previews, filter resources by framework and type, and open source links with practical reuse notes on the website.
Code video, also called programmatic video or video as code, uses HTML, Canvas, SVG, React, TypeScript, or Python to compose and render moving images. This list focuses on reusable parts: a product-launch film you can adapt, a camera move you can integrate, or a visual style you can use to direct a new film.
Find video templates, motion graphics, product demos, explainers, data stories, and map animations, with specific source links and practical reuse notes. The list contains 267 reusable examples, recipes, and styles, plus a small set of supporting frameworks and workflows. Resources were reviewed through their source files and documentation; inclusion does not mean each project has been installed or render-tested.
Only public, inspectable resources with clear reuse permissions are included. Encrypted or account-bound template source, noncommercial-only restrictions, and unresolved licenses are excluded. Open-source copyright notices do not disqualify a project.
Contents
Claude Fable 5.2
A public gallery of code videos made with Claude Fable 5.2 is on the website at https://awesomecodevideo.com/spotlight/fable-5-2/. These are original public posts, played from their original host. They are not yet in the curated index below, and they are not part of the 267 reusable examples, recipes, and styles.
Start Here
| Make this | Start with | What you reuse |
|---|
| A SaaS or knowledge-product launch | Ink Press | A complete film project with an established sequence and timing. |
| A paper-collage explainer | Paper-Cut | A layered scene and its animation timeline. |
| A travel or location story | Map presets | Configurable location, route, and flight examples. |
| A product feature demonstration | Shot recipes | Individual shots with implementation references. |
| A whiteboard or data explainer | Visual styles | Art direction and production instructions for a new film. |
| A pixel-art narrative | Claude Quest | A worked film project and a retro game engine. |
Project means editable source, often with substantial adaptation. Preset means a parameterized example. Recipe means a shot and implementation you integrate into your own timeline. Style means instructions for creating a new film, rather than a ready-made render project. None of these labels promises one-click output.
Film and Scene Templates
Complete projects and self-contained scenes with editable source.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
