blixvip / html-anime
git clone https://github.com/blixvip/html-anime.git
Turn a scene prompt into a shot sheet, then have a coding agent draw the film in HTML. No video model.
+28
stars, 24h · #1,329
+~140
stars, 7 days · #1,547
+135
stars, 30 days · #5,479
135
★ total · +140% this week
25
forks · 2 open issues
Star history (as recorded here)
LanguageHTML
LicenseMIT
Created2026-09-27 (26d ago)
Last push14d ago
Watchers0
OwnerUser
GitHub topics
Links
- GitHub: github.com/blixvip/html-anime
- Homepage: https://blixvip.github.io/html-anime/
- Releases · Issues · Hacker News mentions
README excerpt
html-anime Prompt an anime. Your coding agent draws it in code. A still from Kokuyō , drawn entirely in HTML. Watch it on the site · media/film.mp4 An anime, written as HTML. You write a scene. The site turns it into a shot sheet: holds, one expensive shot, a closed color script. Paste that sheet into Claude, Codex, Cursor, or Grok. The agent draws the frames. The pictures are HTML, timed for HyperFrames. Nothing here calls a video model. ## The film Kokuyō. Watch it on the site or open media/film.mp4. ## Start [code] Open the folder in the agent you already use and paste a sheet as the first message. The site builds the sheet in the browser. `harness/compile.js` builds the same sheet in Node. Serve the site from this folder, then open the address it prints: [code] Opening `index.html` as a file shows that same instruction. The sheet will not run until the folder is served. Or build a sheet in Node (no dependencies): [code] | Agent | What it reads | Open | | --- | --- | --- | | Claude Code | `CLAUDE.md` | `claude` | | Codex | `AGENTS.md` | `codex` | | Cursor | `.cursor/rules/html-anime.mdc` | `cursor .` | | Grok | `AGENTS.md` | `grok` | ## What is in the repo - `index.html` — the site - `skills/html-anime-direct/SKILL.md` — which shots exist - `skills/html-anime-cel/SKILL.md` — how a frame is painted - `skills/html-anime-timing/SKILL.md` — twos, holds, the smear - `skills/html-anime-camera/SKILL.md` — the cut and the frame - `skills/html-anime-render/SKILL.md` — the HyperFrames file - `harness/compile.js` — logline to sheet - `media/film.mp4` — Kokuyō, the film - `media/city.jpg`, `media/moon.jpg`, `media/fight.jpg`, `media/helm.jpg`, `media/ren.jpg` — stills from it - `films/roof/` — an 8 second reference. File shape and the color-dip cut, not a film to remix - `AGENTS.md` — the contract ## Test [code] Checks that every runtime sums exactly and has one sakuga shot, and that the sheet carries the size, frame count, and dialogue. ## Render the reference [code] Lint before you trust a new film: [code] ## Sheet rules the agent is not allowed to break - Shot times sum to 8, 12, or 20 seconds - One sakuga shot. The others stay on three drawings - Acting on twos. Rain and a blade on ones - Only the hexes printed on the sheet - The line you wrote, verbatim, or no dialogue at all ## Community 💬 Join the Discord for questions, help, feedback, and updates. ## License MIT. The reference film's font keeps its own license: see films/roof/fonts/NOTICE.txt.