05 / 05

Start.

Ask your agent

Make a 20-second video with the kamishibai npm package.

Or by hand. Teach your agent with the skill first, if you like.
npx skills add reearth/kamishibai --skill kamishibai
npm i kamishibai react react-dom
GitHubDocsLexicon of motion
MIT · Node.js 20+ · ffmpeg on PATH
04 / 05

Cheap to render,
cheap to redo.

capturedcopied from the frame beforerenders 26 of 32 frames

A frame depends only on its time, so the reel is cut into chunks, each captured by its own page of a headless Chrome. A frame that doesn't change is copied, not captured, and with --incremental an edit re-captures only the frames it changed.

Render again after editing one scene of an 86-second reel
kamishibai -i25.0 s
Remotion48.1 s
HyperFrames51.3 s
Median of 3 runs on an Apple M1. How it was measured
03 / 05

Write. Watch. Render.

  1. Write a page

    It draws the state at time ms. Plain DOM, React, canvas or WebGL.

    reel.tsx
  2. Watch it

    A player drives the page through seek alone: scrub, step frames, hear the sound, read the subtitles.

    npx kamishibai dev reel.tsx
  3. Render it

    Chrome captures each moment, and ffmpeg puts the stills, the sound and the subtitles into out.mp4.

    npx kamishibai render reel.tsx
02 / 05

Nothing to learn.

The whole contract is one global with two fields. No timeline, no component library, no project format. Your agent writes the page the way it writes any page, and anything a browser can draw ends up in the video.

window.kamishibai = {
  meta: { fps: 30, durationMs: 6000,
          width: 1920, height: 1080 },
  seek(ms) {
    // build the still for this moment
  },
};
01 / 05

If your agent can write a web page, it can make a video.

kamishibai turns a page that draws any moment into an MP4. It is only the mechanism: it seeks the page to each moment and captures it, and leaves how you draw to you.

Scroll to pull the page
seek(0ms) · playingframe 00 / 31 · capture
Hover a frame to seek to it. Every frame is drawn from its time alone.