ai-video-render

---

name: ai-video-render description: Render a short video with deterministic code-drawn animation: pure function of time, fixed seeds, style selection, per-shot still checks, headless frame capture and ffmpeg assembly. Runs after ai-video-script, before voiceover.

ai-video-render: 代码动画渲染

When to use

film.json exists and the style is picked. This skill turns the storyboard into pictures: a render page, frame captures, and a silent video. No voiceover work happens here.

The determinism contract (non-negotiable)

• Every picture is a pure function of time: window.render(t) draws any moment's frame. No requestAnimationFrame, no setTimeout, no CSS transition, no saved state between frames for export.
• All randomness uses fixed seeds. Never use an unseeded random source or a real clock in the render path.
• Reset canvas state at the start of every frame.
• The page exposes window.seek(t), window.render(t), and window.ready = true after the first successful render.
• Same timestamp rendered twice must produce the same frame. Check this with scripts/determinism-check.js before a full render.

1. Pick a style (user picks, hard gate)

Recommend 1 style plus 2 different alternatives, with visual differences, reasons, and limits, in style-options.md. Wait for the user to pick. "Just run it" is not authorization to pick.

Style catalogs (fetch from upstream yourself; prompt files and demo sources are not in this repo):

• Flat flowchart, hand-drawn notes, retro newspaper, retro paper-cut, surreal collage, 3D cartoon, black-background tech (7 sets, dashi-animationstyle).
• 15 MG styles: flat vector, line art, isometric 2.5D, 3D render, shape morph, sticker explainer, cyberpunk HUD, collage, aurora glass, Bauhaus, synthwave, pixel art, liquid motion, frame-by-frame line boil, variety captions.
• 36 art style recipes (huashu-art-motion) and lemo-opuscar styles: impasto oil, watercolor, Chinese ink wash, ukiyo-e, whiteboard explainer.

Rules for style use:

• One film uses one style, one theme, and at most 2 animation grammars.
• Learn the method from a style's prompt or demo, then remake the content for the new topic. Never copy a demo's composition, characters, or assets into the film.
• When a style prompt says "do not change signature features", only change the creative seed (story, brand, copy, palette) or the output (for example vertical 1080x1920, duration).
• Do not use blue-purple gradients, dark purple starry skies, or neon cyan-purple (reads as obvious AI flavor) unless the user explicitly asks for them.
• Code never draws a realistic human face. Use AI-generated footage only for green-screen character shots, composited into code-built scenes; without image generation ability, show only hands and backs.

2. Build shot by shot

• Write the render page from templates/render-page.html and templates/render.js. Stage 1920x1080 by default (vertical: 1080x1920 with re-laid-out composition and subtitles, never a scaled horizontal frame).
• Build one shot at a time. Render 3 still frames per shot (start, middle, end) and check text overflow, overlap, subject size, and on-screen duration. Fix the shot before moving on.
• For films over 30 seconds, render a low-resolution sample without motion blur first, confirm it, then render the full version.
• 3D-render style is the exception: render pictures in Blender, add words and grain on the web page.

3. Render and assemble

• Headless Chrome captures one screenshot per frame at the film fps. Assemble with ffmpeg (H.264, CRF 16). Keep the audio track out here; voiceover is mixed in the next skill.
• Keep one timeline for sound and picture: cuts and key actions sit on the beat grid or the voiceover timeline.
• Verify with ffprobe: H.264, 1920x1080 (or 1080x1920), 30 fps, frame count matches film.json duration times fps.

Output contract

• render-page.html + render.js (the film's render page).
• frames/ (per-frame captures).
• film.mp4 (silent picture).
• render-report.md (resolution, fps, frame count, determinism check result).

Rules

• A check that was not run is written as "not run". Never claim a render passed a check that did not happen.
• Do not present an HTML page, a silent intermediate file, or a prompt as the finished film.
• Reference images are the user's own or licensed; the finished film never contains the original image.