动画视频制作

Motion Video

You are the director and the programmer. The video is one HTML file whose picture and sound are pure functions of time t. scripts/render.py drives a headless Chromium to draw every frame, synthesizes the audio offline and muxes an MP4 with ffmpeg. No Node.js, no network, no external JS libraries.

<skill_dir> below is the directory containing this SKILL.md; always call scripts by absolute path. Never write inside <skill_dir>: build each video in its own project directory in the working directory, e.g. videos/<short-slug>/.

0. Environment (once per machine)

Run the setup script once (shell timeout >= 900s; skip it if it already succeeded in this conversation):

• Windows (cmd): "<skill_dir>\scripts\setup.cmd"
• macOS / Linux: sh <skill_dir>/scripts/setup.sh

It finds or fetches everything below, verifies a real browser launch, and ends with READY and a line PYTHON <path>. Use exactly that interpreter for every later command - it is written python below, but on a machine that had no Python it is a private one that is not on PATH. If Python is already known to work, python <skill_dir>/scripts/setup.py --install does the same.

Needs	How it is found or fetched
Python 3.8+, no packages	any Python on PATH; else the official embeddable Python (Windows, ~11 MB) or a standalone build (macOS/Linux, ~25 MB)
Chromium-family browser	installed Chrome or Edge (Edge ships with Windows), or one another app already downloaded; else a headless Chromium (~100-125 MB)
ffmpeg with libx264	ffmpeg on PATH; else a static build (~21-30 MB)
CJK font (Linux only)	fonts-noto-cjk via apt/dnf when running as root

Downloads go to ~/.motion-video (no admin rights, nothing else on the system changes; delete the folder to uninstall), each from the fastest of the official servers and public mirrors. Only Linux system libraries and fonts need root; the script prints the exact sudo command when it is not root. Stop and ask the user only for that, or when the network blocks every source. Do not switch to another rendering stack.

1. Direct before you code - this is where quality comes from

Read <skill_dir>/references/direction.md and <skill_dir>/references/styles.md (once per conversation), then write STORYBOARD.md in the project dir:

• the one idea (feel / remember / visual world), format, rhythm, direction of travel
• a style preset with palette hex, fonts, texture stack, motion energy, sound
• a beat sheet where every beat has picture (BG / MG / FG), motion verbs + camera, exact text, an object-level transition, and a sound cue

Think on paper: start writing STORYBOARD.md soon and refine it with edits, instead of composing the whole film silently in your head first - a long silent deliberation is slow, and some networks drop a request that produces no output for about two minutes. The same goes for code: write a scene, then the next.

Decide yourself; do not interview the user about taste. Ask only for things only they can provide (brand assets, a product name, a song they want). Aim for a film someone would share, not an animated slide deck: a continuous visual metaphor, a moving camera, motivated transitions, texture, and one big moment set up by a beat of stillness. <skill_dir>/references/craft.md has the rules and the lazy defaults to avoid.

2. Build

Start the project from the template: python <skill_dir>/scripts/render.py --new videos/<slug>. It has two files:

• motion.js - the helper library: camera rig with parallax, film finish (paper, vignette, grain), glow, hand-drawn sketch lines with draw-on, revealText, loadImage, synthesized music() and SFX, the render contract and the live preview. Use it as is; do not rewrite or re-read it - the helper list is in techniques.md.
• index.html - a 12s demo film (palette C, CUES, CAMERA, shots, draw(t), __audio) showing how the helpers combine. Replace its content with your film; keep the structure.

<skill_dir>/references/techniques.md has recipes for light, depth, brush strokes, morphs, transitions, 3D projection and sound.

Keep every single write call under ~400 lines: one huge tool call takes minutes to stream and a dropped connection loses all of it. For longer films keep palette, CUES, CAMERA, draw and __audio in index.html and put shots in scenes/01-intro.js, scenes/02-....js (plain <script src>, no modules), one write per file. Fix things afterwards with targeted edits; never rewrite a whole file.

Keep every scene's start in one master timeline object in index.html, and write every time inside a scene, captions included, relative to that start (T.c3 + 4.5, never 28.4). Lengthening one scene then only means moving the later starts; everything after it, picture, captions and sound, shifts with them.

3. Self-review with a contact sheet

You cannot watch the video, but you can look at stills:
python <skill_dir>/scripts/render.py videos/<slug>/index.html --sheet 12
Then look at preview/sheet.jpg once with your image-viewing tool, and judge it against the checklist at the end of craft.md (overlapping or clipped text, contrast, empty frames, tofu boxes, off-canvas elements, whether each frame is dressed and reads as intended). Use explicit times (--sheet 3.2,3.6,4.0) to inspect a transition, --shots 5.5 for a full-size frame. Fix and re-check at most twice; do not loop on taste.

4. Render

python <skill_dir>/scripts/render.py videos/<slug>/index.html (shell timeout >= 600s). About 1s of 1080p renders per 1-2s of wall time with 4 workers. Add --motion-blur 4 to the final render when the film has fast moves (whip pans, slams, fast slides); it roughly doubles render time. For films over ~3 minutes, run it in the background and poll. Output: videos/<slug>/index.mp4 (or --out), roughly 3-5 MB per 10s at the default quality; pass --crf 18 only when the user wants a master-quality file.

5. Deliver

Send the MP4 to the user with your file-sending tool (or give its path if there is none), plus 2-3 lines: what the film shows, its length, the world/style you chose with two alternative directions they could ask for, and that the editable source is index.html (open it in a browser to preview with sound; space = pause, arrows = seek).

Render contract (must hold, or frames will flicker or differ)

window.VIDEO  = { width: 1920, height: 1080, fps: 30, duration: 30 };
window.__ready = Promise;                // resolve after fonts/images are loaded
window.__seek  = (t) => draw(t);         // draw the exact frame at t seconds; may be async
window.__audio = async (ctx) => {...};   // optional: schedule sound on an OfflineAudioContext

• Every pixel is computed from t alone: no Date.now(), performance.now(), timers, requestAnimationFrame state, CSS animations/transitions, or state carried between frames. Frames are rendered out of order by several workers.
• Randomness only through the seeded rng(seed) helper, generated once at load.
• No network: no CDN scripts, web fonts or remote images. Use the local font stacks (SANS, SERIF, KAI, MONO). Download images into the project dir first and load them with loadImage('relative/path.png').
• Canvas 2D is the default. Inline SVG/DOM is fine if styles are set from t inside __seek. WebGL only if the environment check reported webgl yes.
• Keep one CUES object of named times and use it in both the scenes and __audio, so picture and sound stay locked together.

Sound

The template synthesizes a music bed (pad, bass, plucks, soft kick) and effects (SFX.pop, tick, whoosh, riser, boom, kick) with Web Audio, rendered offline into the MP4. Adapt key, tempo, chords and timbre to the mood; put an effect on every major visual hit via CUES; a riser into the pre-climax hold; duck the bed under important moments; fade in and out. render.py prints the peak level - keep it below about -1 dBFS.

External audio (a song the user supplied, a narration file) is mixed with --audio path[@start_seconds][*gain], repeatable:
python <skill_dir>/scripts/render.py index.html --audio song.mp3*0.8 --audio voice.mp3@1.5
When a song drives the film, run python <skill_dir>/scripts/render.py --beats song.mp3 first: it prints the tempo, the first beat and the bar starts. Land cuts and big hits on bar starts and smaller accents on beats (put them in CUES), save the strongest reveal for the song's drop, trim VIDEO.duration to a bar boundary, and pass --no-synth-audio if the template music should not play. Use only music the user supplied; never download copyrighted songs. Narration needs a TTS service the user has configured; without one, use on-screen text and say so.

Cost control

• Plan once, write once, edit surgically. Do not read the HTML back after writing it, and do not cat render logs - render.py prints only what matters.
• One contact sheet per review round (one image look), not individual frames.
• Prefer one complete, polished 20-45s film over a long rough one, unless the user asks for length.