📈 GH Trending Explorer 🎲 Surprise me

← all repos

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)

2026-10-20 · 75 ★ 2026-10-23 · 135 ★
LanguageHTML
LicenseMIT
Created2026-09-27 (26d ago)
Last push14d ago
Watchers0
OwnerUser

GitHub topics

Links

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.