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
git clone https://github.com/blixvip/html-anime.git
cd html-anime
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:
python -m http.server
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):
import { compileBrief } from "./harness/compile.js";
const sheet = compileBrief({
logline: "On a roof in the rain, a red moon opens and a line of light falls.",
seconds: 8, // 8, 12, or 20
aspect: "16:9", // or "9:16"
script: "indigo", // indigo, eclipse, noon, or festival
dialogue: "The rain hid the sound of the blade.",
});
console.log(sheet.ok ? sheet.markdown : sheet.error);
| 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 siteskills/html-anime-direct/SKILL.md — which shots existskills/html-anime-cel/SKILL.md — how a frame is paintedskills/html-anime-timing/SKILL.md — twos, holds, the smearskills/html-anime-camera/SKILL.md — the cut and the frameskills/html-anime-render/SKILL.md — the HyperFrames fileharness/compile.js — logline to sheetmedia/film.mp4 — Kokuyō, the filmmedia/city.jpg, media/moon.jpg, media/fight.jpg, media/helm.jpg, media/ren.jpg — stills from itfilms/roof/ — an 8 second reference. File shape and the color-dip cut, not a film to remixAGENTS.md — the contract
Test
npm test
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
cd films/roof
npx hyperframes preview
Lint before you trust a new film:
npx hyperframes lint
npx hyperframes validate
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.
More from blixvip
| Project | What it does |
|---|
| GenMotion | Type an idea, get a finished motion-graphics video. Top Western + Chinese image models, your own API keys. |
| NullMotion | Play a finished motion-graphics ad in sync with the rough drafts it grew from. Export the breakdown as MP4. |
| MotionClone | Rebuild any reference video as an editable HyperFrames project and compare it against the original. |
| easyedit | Type a movie name, get a fan edit: captioned speech cut, then a montage cut to the beat. |
| stick | Free, open-source stick figure animation software for Windows, Linux and the web. |
| thumbnail-studio | A minimal Windows workspace for YouTube thumbnails: ChatGPT beside your references. |
| blixtrade | Open-source core of BLIX, the AI memecoin terminal for Solana, with a public API and MCP server. |
If one of these helped you, a ⭐ helps other people find it. Follow @waselyyy for new drops.
License
MIT. The reference film's font keeps its own license: see films/roof/fonts/NOTICE.txt.
