This is not a template library. What's written here ishow to use code to get a style right: what makes each style recognizable at a glance, the specific parameters of the key techniques, the places where it's easiest to mess up, and how to check your work when done. After reading, write your own code based on the user's theme and make a new film.
The stronger the model, the better the result; but as long as you follow the process and use the scaffolding well, even an average model can achieve something "decent."
First, determine which path you're on
- Can write code and run commands(Claude Code, Codex, Cursor, domestic agents with code execution, etc.): follow the "complete process," write the visual code yourself, and export MP4 with the scaffolding.
- Can only chat, cannot run code: still follow the process to write the complete code (a single HTML folder), and tell the user how to open and export it (see
references/02-渲染与导出.mdthe last section). Do not say "the video has been generated."
Then determine your capability tier (if unsure, assume "average"):
- Strong: read the full contents of the general craft + style cards; you can design your own shots, write shaders, and make complex characters.
- Average: only read
references/05-一般模型怎么做.mdand the "minimum viable approach" of the corresponding style card; directly modify the skeleton instarter/,use only 2–3 techniques at a time and execute them cleanly, which is far better than piling up a bunch of half-finished work.
Complete process (do not skip any step)
- Ask clearly: theme, who it's for, which one sentence you want the audience to remember, duration (default 10–20 seconds), landscape or portrait, whether there are brand names or assets (photos, logo),one style or several combined into a collection. For anything the user didn't specify, use the default values and explain them at delivery.
- Choose a style: see
references/styles/00-选风格.md. If the user names one, use the named one; if not, give 2–3 candidates, each with a one-sentence reason. To make a collection (one segment per style, then stitched together), first readreferences/08-单风格与合集.md: make each segment as its own short film, run steps 3–8 below for each segment, and stitch them together at the end. - Write a beat sheet(still no code): write out hook → build → climax → ending by the second. For each beat write: what's in the frame, what changes, what text is on screen, what sound. Rules see
references/00-工作流程.md。 - Read the style card：
references/styles/<风格>.md。First read the section "the most likely reasons it turns out unlike the style"— that's a summary of the layout, parts, and drama compared against the original; build the skeleton by following it; then map the "essential elements" one by one onto the beat sheet, and add whatever is missing. Better to have more parts and a full frame than a few elements floating in emptiness. - Make still frames first: set up the page with the scaffolding, and make only the still images for 4–6 key moments; screenshot them and look yourself. Only add animation once composition, font size, color scheme, and whitespace all pass.
- Then do the animation: according to
references/01-通用手艺.mdeasing, stagger, anticipation, and rebound parameters, moving only one subject at a time; then followreferences/07-动画手艺进阶.mdto add three-layer motion, camera, entrances and exits, and transitions between segments (the tool is instarter/lib/motion.js）。 - Add sound: use the scaffold's synthesizer to write music and sound effects, hitting the beat points of the visuals.
- Checkup, export, self-review: first run
node tools/check.mjs(font size, contrast, platform occlusion, text overlap, frozen frames, pacing, loudness); fix the issues in the report before exporting the MP4; then followreferences/04-自查与评审.mdfor another pass, fix the issues, and then deliver. - Delivery: MP4 + source code folder + a write-up (what style was used, at which second each required element appears, known shortcomings, and a source list for fonts / images / music).
File map
| What you want to do | Read |
|---|---|
| Don't know how to start | references/00-工作流程.md |
| General craft like pacing, easing, typography, and color | references/01-通用手艺.md |
| Make animations look better: three-layer motion, camera, entrances and exits, keyframes, text motion techniques, transitions between segments | references/07-动画手艺进阶.md |
| A single-style video, or several styles each as a segment stitched into a compilation | references/08-单风格与合集.md |
| Build pages, render frame by frame, export MP4, synthesize music | references/02-渲染与导出.md + starter/ |
| Pitfalls others have hit | references/03-踩坑清单.md |
| How to check your work and how to score it | references/04-自查与评审.md + starter/tools/check.mjs |
| Safe approaches when the model isn't very strong | references/05-一般模型怎么做.md |
| Whether fonts, images, and music can be used, and what to watch out for when publishing | references/06-版权与素材.md |
| The know-how of a particular style | references/styles/<风格>.md |
| See how the complete code is written | examples/(Reference works: learn the techniques, don't copy the content) |
Bottom line
- Originality: the style must be learned properly—layout, components, pacing, and texture all follow the style card; this is not copying. But the subject, copy, characters, specific composition, and music must be your own. Use the user's own brand name; if there isn't one, make one up.
- Legal assets: use only commercially usable fonts, images, and audio (OFL, CC0, public domain, the user's own); for Chinese fonts, put the OFL
"Noto Sans SC"at the very front; do not include other people's trademarks or IP characters. Attach a source list on delivery; see details inreferences/06-版权与素材.md。 - Determinism: each frame is determined only by time t (don't use
Date.now(), don't use random numbers without a seed), otherwise the export will jitter and won't line up. - Honesty: if the export didn't succeed, say it didn't succeed; style features you couldn't achieve go into "known shortcomings".