SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsguofeng-paper-video

guofeng-paper-video

Design & creation

View repository

Updated 10-16 04:59

About this skill

Chinese-Style Paper-Cutout Animation · Production Workflow Skill

This repository has two halves:

  • Style assets（style/ + src/components、src/style、src/lib) — the Chinese-style visual DNA decoupled from any specific story, color palette, paper-cutout specs, layer motion presets, prompt templates. This is the "reusable" part.
  • This SKILL.md— teaches the AI to use the style set above to build from scratch anewfilm's workflow.

src/examples/ The "Waiting by a Stump for a Hare" indemowas made with this style set, and is not the "product itself". You're not here to take this one film, you're here to use this style set to make your own film.

When to use

The user gives you a poem / an idiom / a fable / a small concept to tell, and wants it made into a short video in the "Chinese-style paper-cutout collage" style, anddoesn't want to edit(fully code-rendered, no going into CapCut).

Prerequisites

  • Node 18+ (20+ recommended),npm install passed.
  • Chinese fonts: Songti / Kaiti / PingFang (built into macOS; Windows / cloud need to install them, otherwise Chinese text gets distorted).
  • First read style/design.md and style/palette.md to absorb the style —don't skip this step, all later decisions are based on it.

Reusable parts list (use directly when building a film, don't rewrite)

Part Location What it does
PaperCollageLayer src/components/PaperCollageLayer.tsx ★Core: a paper cutout's entrance bounce + breathing float + paper shadow, you just fill in the spec
FieldPlate src/components/FieldPlate.tsx Background large layer + push-in + dry/warm tones
PaperTag src/components/PaperTag.tsx Torn-edge paper label (Songti large title + small note)
StoryCaption src/components/StoryCaption.tsx Bottom four-direction stroked subtitles
guofeng / C src/style/palette.ts Chinese-style color palette tokens
clamp src/lib/anim.ts Shorthand for interpolate clamped at both ends

Mode A · First run the examples (get the hang of it in 10 minutes)

Don't change anything, first produce a film to feel this style. The two cases respectively show idiom narrative and ancient poem mood:

npm run render                # → 《守株待兔》（带声，25.5 秒）
npm run render:jiang-xue      # → 《江雪》（带声，88 秒）
npm run studio                # 打开可视化预览，逐帧查看两条 composition

When doing idioms and fables, prioritize referring to src/examples/IdiomShouZhuDaiTu.tsx 's storyboard structure; when doing ancient poem moods and characters entering the frame, refer to src/examples/PoemJiangXue.tsx 's long timeline, snowy atmosphere, and vertical poem lines. What the two films share is the style and layering method, not the same template that automatically applies after changing a few parameters. Once you're familiar, move on to Mode B.

Mode B · Given a poem / an idiom, produce a new film

Six steps. Each step gives "things you can say directly to Claude Code / Codex".

1. Read the style

读 style/design.md 和 style/palette.md，用一段话复述这套国风风格的视觉和运动规则，确认你理解了再往下。

2. Storyboard

Use style/prompts/01-分镜表.md 's template, producestoryboard table + paper cutout list. Confirm the storyboard before continuing — if the storyboard is wrong, everything after is wasted.

3. Generate paper cutouts

Use style/prompts/02-生成纸片.md 's image prompts, produce one by one white-line transparent paper cutouts + one large background image, cut out the edges, name them according to style/纸片素材规范.md and put them into public/style/{新slug}/。

Which image generation tool to use depends on you:Codex can generate images directly (built-in image generation), the least hassle;Claude Code It doesn't generate images itself; you have to connect another image generation API, or use Jimeng / Lovart / MJ to generate them and then bring them in. The transparent-background cutout step still has to be run manually through a tool (remove.bg / Jimeng background removal / PS); an Agent can't run it for you.

4. Build the composition

根据内容类型参照 src/examples/IdiomShouZhuDaiTu.tsx 或 src/examples/PoemJiangXue.tsx，在 src/examples/ 新建 {新slug}.tsx。
按分镜表，每镜一个 Sequence（120 帧/4 秒起）：
- 背景用 FieldPlate（src 指向新片的 field-plate）
- 每张纸片用 PaperCollageLayer，按 style/分镜与图层规范.md 填 spec：
  主角给 role='primary'、远景给 'tertiary'，delay 错开入场
- 每镜配一句 StoryCaption 旁白，需要说明的地方加 PaperTag
颜色只用 src/style/palette.ts 里的 token。总时长常量 = 帧数（秒×30）。

For details, see style/分镜与图层规范.md。Only build the visuals; audio is the next step.

5. Voiceover + sound effects

Use style/prompts/03-配音脚本.md: organize the voiceover script → MiniMax synthesize vo-0x.wav → place into public/audio/{新slug}/ → in the new piece write a StoryAudio(ambient bed + each vo line timed to the shot + transition/impact sound effects).

6. Register + preview + export

在 src/Root.tsx 里给新片加一个 <Composition />（id、component、durationInFrames、fps=30、1920×1080）。
然后 npm run studio 预览逐帧调，npm run render 出片。

If something's off in the preview, go back to the previous step, change one requirement, and re-render.What you change is the "requirement," not keyframe by keyframe.

Mode C · Distill a new style from a reference film (advanced, optional)

If you want to migrate this "paper cutout collage" approach toanother art style(such as Dunhuang, ink wash, paper-cutting): don't copy the reference film's characters and plot, just distill thereusable visual grammar——

看这几张参考图 / 这条参考片，只提炼可复用的东西，别抄具体内容：
1. 一份色卡（HEX + 用途），覆盖 src/style/palette.ts
2. 构图 / 镜头 / 材质规则，更新 style/design.md
3. 纸片该长什么样，更新 style/纸片素材规范.md 和生图提示词
把参考片里的角色、剧情、专有元素列进一份「不要照搬」清单。

What's produced is a new style/，src/components That set of motion components stays the same and can be reused as is.

Pitfalls (all learned the hard way)

  • Fonts: In non-macOS environments, Chinese will fall back and get distorted; first install Songti / Kaiti / PingFang, or change fontFamily。
  • Don't forget the audio: When swapping assets, it's easy to focus only on swapping images and miss the audio directory;render will report "file not found." Bring the entire audio directory along.
  • Don't put text on the paper cutouts: Leave Chinese to code rendering (zero typos); writing text on the paper cutout images = throwing away this advantage.
  • Don't use one role throughout: If all paper cutouts share the same role, the image will pan as a whole with no depth. Main character primary, distant scenery tertiary.
  • This is not a one-click generator: Storyboarding, breaking down paper cutouts, and pacing are creative work; AI helps you execute but can't decide for you. What it gives you is a reusable style + a process you can copy.