# html-anime-camera

Adopt this skill: https://proskills.md/skills/other/blixvip-html-anime-skills-html-anime-camera

Page: https://proskills.md/skills/other/blixvip-html-anime-skills-html-anime-camera
This document is the public skill bundle for that page. It contains SKILL.md and every helper file the catalog carries. No login is required.

## File: skills/html-anime-camera/SKILL.md
size: 1361
sha: 9048b1c007ebe6d3a693e0aef1b739a7322f5e2f
upstream: https://github.com/blixvip/html-anime/blob/main/skills/html-anime-camera/SKILL.md

```text
---
name: html-anime-camera
description: Frame and cut a code-drawn anime — wide, close, look room, and where type sits in 16:9 or 9:16. Use when choosing an html-anime shot size, placing a face, or cutting between drawings.
---

# Camera

Cut on the action. The settle is the first frames of the next shot, not the tail of this one.

## Sizes

- Establish is wide. The world is the subject. The figure is small or absent.
- Sakuga is a medium or a tight action. The body reads in silhouette.
- Button is a close-up, or a return to the wide, plus the line.

Get closer by cutting. The only zoom is the 100% to 106% hold described in `skills/html-anime-timing/SKILL.md`.

## Placement

Eyes sit on a third. Leave room in front of the gaze. Do not center every face.

The brightest shape is one of: the moon, the blade, the practical light. On the close-up the iris may match that light, using the `iris` hex from the sheet.

## Frame

- 16:9 is 1920×1080. Letterbox bars are part of the frame if you want them. Keep faces out of the bars.
- 9:16 is 1080×1920, composed tall. Head in the upper half. Type in the lower fifth. Do not crop a wide picture into a portrait frame.

## Depth

Back to front is sky, far silhouette, mid figure, rain, close figure, type. Rain may sit between the world and a close figure so the close-up feels nearer than the weather.
```

## File: README.md
upstream: https://github.com/blixvip/html-anime/blob/main/README.md

````text
<h1 align="center">html-anime</h1>

<p align="center">
  <b>Prompt an anime. Your coding agent draws it in code.</b>
</p>

<p align="center">
  <a href="https://github.com/blixvip/html-anime/stargazers"><img src="https://img.shields.io/github/stars/blixvip/html-anime?style=flat-square&color=e8434b" alt="GitHub stars"></a>
  <a href="https://blixvip.github.io/html-anime/"><img src="https://img.shields.io/badge/site-blixvip.github.io%2Fhtml--anime-111?style=flat-square" alt="Site"></a>
  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-111?style=flat-square" alt="MIT license"></a>
  <img src="https://img.shields.io/badge/render-HyperFrames-111?style=flat-square" alt="HyperFrames">
  <img src="https://img.shields.io/badge/agents-Claude%20%C2%B7%20Codex%20%C2%B7%20Cursor%20%C2%B7%20Grok-111?style=flat-square" alt="Claude, Codex, Cursor, Grok">
  <a href="https://discord.gg/zEB4VjmfSb"><img src="https://img.shields.io/badge/Discord-Join%20the%20community-5865F2?style=flat-square&logo=discord&logoColor=white" alt="Discord"></a>
</p>

<p align="center">
  <a href="https://blixvip.github.io/html-anime/"><img src="media/city.jpg" width="860" alt="A moon over the night city, a still from Kokuyō"></a>
</p>

<p align="center">
  <sub>A still from <i>Kokuyō</i>, drawn entirely in HTML. <a href="https://blixvip.github.io/html-anime/">Watch it on the site</a> · <a href="media/film.mp4">media/film.mp4</a></sub>
</p>

An anime, written as HTML. You write a scene. [The site](https://blixvip.github.io/html-anime/) 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](https://github.com/heygen-com/hyperframes). Nothing here calls a video model.

## The film

Kokuyō. Watch it on [the site](https://blixvip.github.io/html-anime/) or open [media/film.mp4](media/film.mp4).

<table>
  <tr>
    <td width="50%"><img src="media/moon.jpg" alt="A cracked moon falling through rain"></td>
    <td width="50%"><img src="media/fight.jpg" alt="Two figures crossing blades in front of the moon"></td>
  </tr>
  <tr>
    <td width="50%"><img src="media/helm.jpg" alt="A dark helm with a red crescent"></td>
    <td width="50%"><img src="media/ren.jpg" alt="A close-up washed in white light"></td>
  </tr>
</table>

## 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):

```js
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](https://discord.gg/zEB4VjmfSb) for questions, help, feedback, and updates.

<!-- more-from-blixvip:start -->
## More from blixvip

| Project | What it does |
| --- | --- |
| **[GenMotion](https://github.com/blixvip/GenMotion)** | Type an idea, get a finished motion-graphics video. Top Western + Chinese image models, your own API keys. |
| **[NullMotion](https://github.com/blixvip/NullMotion)** | Play a finished motion-graphics ad in sync with the rough drafts it grew from. Export the breakdown as MP4. |
| **[MotionClone](https://github.com/blixvip/MotionClone)** | Rebuild any reference video as an editable HyperFrames project and compare it against the original. |
| **[easyedit](https://github.com/blixvip/easyedit)** | Type a movie name, get a fan edit: captioned speech cut, then a montage cut to the beat. |
| **[stick](https://github.com/blixvip/stick)** | Free, open-source stick figure animation software for Windows, Linux and the web. |
| **[thumbnail-studio](https://github.com/blixvip/thumbnail-studio)** | A minimal Windows workspace for YouTube thumbnails: ChatGPT beside your references. |
| **[blixtrade](https://github.com/blixvip/blixtrade)** | Open-source core of BLIX, the AI memecoin terminal for Solana, with a public API and MCP server. |

<sub>If one of these helped you, a ⭐ helps other people find it. Follow [@waselyyy](https://x.com/waselyyy) for new drops.</sub>
<!-- more-from-blixvip:end -->

## License

[MIT](LICENSE). The reference film's font keeps its own license: see [films/roof/fonts/NOTICE.txt](films/roof/fonts/NOTICE.txt).
````