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

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 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

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.