想给一首诗、一个成语、一则寓言做条短片，通常有两条路：要么在剪映里翻模板，翻到最后发现和别人撞了画面；要么让 AI 直接生视频，画面好看，但里面的字经常是歪的、缺笔画的，一首五个字的诗能给你错两个。
有人换了个思路：画面里不放字，字全部交给代码渲染；画面本身拆成一张张白描纸片，叠在一张墨线山水上，再点一枚朱红印章。
remotion-guofeng-starter 是 AllenAI2014 提供的国风纸片动画模板，将可复用组件、视觉规范和 AI 制作流程放在同一个项目中。
它将风格和流程分开组织：风格资产是可以复用的视觉规则，SKILL.md 是给 AI 读的制作流程。你拿到的不是一条做好的片，是一套做新片的方法。
仓库自带两条演示片——《守株待兔》和《江雪》，它们只回答一个问题：这套风格长什么样。真正的用法是换一套分镜、换一批纸片，把你要讲的诗、成语、寓言套进去。
先看清它是什么：一半是资产，一半是流程
仓库里有两半东西，缺一半都跑不起来。
第一半是风格资产，跟具体故事解耦：
| 件 | 位置 | 干嘛 |
|---|---|---|
PaperCollageLayer |
src/components/PaperCollageLayer.tsx |
核心件：一张纸片的入场回弹、呼吸浮动、纸投影，你只填参数 |
FieldPlate |
src/components/FieldPlate.tsx |
背景大图层 + 缓推镜 + 干/暖色调 |
PaperTag |
src/components/PaperTag.tsx |
撕边纸标签（宋体大标题 + 小注） |
StoryCaption |
src/components/StoryCaption.tsx |
底部四向描边字幕 |
guofeng / C |
src/style/palette.ts |
国风色卡 token |
clamp |
src/lib/anim.ts |
interpolate 两端钳住的简写 |
再加上 style/ 里四份文档：design.md（视觉 DNA）、palette.md（色卡）、纸片素材规范.md（素材怎么生、怎么抠）、分镜与图层规范.md（参数怎么填），以及 style/prompts/ 里的三份提示词模板（分镜表、生成纸片、配音脚本）。
第二半是流程：根目录的 SKILL.md 是一份可以直接喂给 Claude Code / Codex 的说明。它教 AI 用上面那套风格，从零搭一条新片，而不是复制演示片。
src/examples/ 里的两条片，是"用这套风格做出来的样子"，不是产品本体。仓库文档把这个区别写得很清楚——你是来用风格做自己的片，不是来拿走这一条。
两条演示片：25.5 秒的成语，88 秒的诗
一条演示片是成语《守株待兔》，765 帧、25.5 秒，1920×1080、30fps，六个镜头讲完"农夫劳作 → 兔子撞桩 → 白捡 → 守株 → 田荒 → 寓意落点"。
另一条是古诗《江雪》，2640 帧、88 秒，讲一个读书人跌进雪景、脚印被雪盖住、江心发现孤舟，最后四句诗一句一句落进画面。
《江雪》这条的节奏值得记一下，因为它说明了"诗句怎么进画面"：
| 帧 | 画面 |
|---|---|
| 72 | 读书人跌入雪景 |
| 500 | 脚印被雪覆盖 |
| 900 | 江心发现孤舟 |
| 1350 / 1450 / 1550 / 1650 | 「千山鸟飞绝」「万径人踪灭」「孤舟蓑笠翁」「独钓寒江雪」四句依次落位 |
| 2485–2610 | 收束：唐 · 柳宗元，《江雪》 |
四句诗不是一次性贴上去的，是每 100 帧落一句，跟配音对齐。这个细节决定了成片是"念诗配画面"，还是"画面跟着诗走"。
风格就六条，记不住别的先记这六条
style/design.md 把视觉 DNA 压成一句话：把一个画面拆成一张张白描纸片，每张单独入场、呼吸、位移，叠在一张墨线山水背景上，点一枚朱红印章——像一幅会动的手工拼贴。
往下是六根支柱：
- 纸片拼贴：人、动物、器物、山、云各是一张透明背景白描 PNG，独立成层。不是一整张图在动，是一叠纸片各飘各的。
- 墨线白描：细墨线勾边、淡赭石/墨色晕染。不要写实照片、不要厚涂、不要 3D。
- 暖纸材质：底色是暖米白纸，带纸纹；纸片边缘撕裂毛边，叠一层硬纸投影（亮边 + 暖褐暗影）。
- 朱红印章：全片唯一的高饱和色是朱红，只用在印章、楷体大字、关键标签——面积小、位置刁，起"敲一下"的作用。
- 横版留白构图：1920×1080，背景满幅加缓推镜；主体纸片错落偏置，左上角贴撕边纸标签，底部居中走字幕。
- 中文靠代码渲染：所有文字用系统字体渲染，不让 AI 把字画进图里。
第六条是这套风格相对 AI 生图的核心优势。文字交给代码渲染，可以避免把错字画进图片；文案、字体和最终画面仍需校对。
色卡只有七个 token，换季、换情绪时改一处就全片跟着变：
| token | HEX | 用途 |
|---|---|---|
red |
#8f2019 |
朱红：印章、楷体重字、最强调的一处 |
redDark |
#591612 |
暗红：背景兜底、收尾场底色、撕纸转场 |
paper |
#efe2c6 |
纸：次级标签底、纸感面 |
paperLight |
#f8efd9 |
亮纸：主标签底、高亮块 |
ink |
#241a14 |
墨：描边、正文字、边框 |
ochre |
#b3833f |
赭石：辅助点缀、暖调过渡 |
dust |
#806a4d |
尘：远景、弱化元素 |
用色规矩也有三条是硬性的：一片只有一个高饱和色；朱红面积要小；描边统一用 ink，不要纯黑。
纸片怎么拆：一张图只放一个语义单位
style/纸片素材规范.md 把素材分成两类：一张背景大图 field-plate，加若干张纸片 layers。
背景大图是一张满幅墨线山水或场景图，尺寸至少 1920×1080（组件会放大到 1980×1140 留推镜余量）。关键限制是：不要把主体人物或动物画死在背景里——主体必须单独做成纸片，才能各自动。
纸片的规矩更细：每张纸片 = 一个语义单位（一个人、一只动物、一件道具、一座山、一团云）；透明背景 PNG、白描线稿、主体居中留边、长边至少 1000px；不带写实阴影（投影由代码统一加）；不带文字。
下面这四张就是仓库里的真实纸片素材，从左到右是持锄的农夫、奔跑的兔子、树桩、江上的渔翁小船：
同一套规范到了《江雪》就换成雪景的冷调版本：
生成到落地的流程是四步，仓库写得很直白：
- 生图：用即梦 / Lovart / MJ 出白描线稿，提示词模板在
style/prompts/02-生成纸片.md。要点是白描、线稿、浅色底、单个主体、无文字、无写实光影。 - 抠透明底：AI 出的图常带底色，用 remove.bg / 即梦自带去背 / PS 抠成透明 PNG，边缘干净、保留白描线。
- 验收：贴到深色背景上看——描边是否连续、有没有残留底色、主体是否完整。
- 命名归位：按语义英文短名放进
public/style/{新slug}/layers/，同一角色多个状态就多做几张（farmer-holding/farmer-waiting）。
数量上不用贪多：一镜通常 2–5 张纸片（1 主角 + 1–2 中景 + 1–2 远景陪衬），整条 5–6 镜的片，10–20 张纸片加 1 张背景就够。宁可复用，别每镜全新。
动起来靠 role：主角、中景、远景三档
这是整套质感的关键，也是新手最容易做塌的地方：如果所有纸片设成同一个 role，画面会"整体平移"，拼贴的纵深就没了。
三档参数的差别写在组件里，也写在规范里：
| role | 位移 | 起始缩放 | 入场时长 | 给谁 |
|---|---|---|---|---|
primary |
大（104px） | 0.84 | 42 帧 | 这一镜的主角 |
secondary |
中（72px） | 0.90 | 36 帧 | 中景、配角 |
tertiary |
小（44px） | 0.95 | 30 帧 | 远景、陪衬 |
入场之外还有三件小事，全部在 PaperCollageLayer 里算好，你只填参数单：
- 呼吸浮动：入场后每张纸片做极缓慢的正弦浮动，不同纸片用
phase错开相位，避免整屏同频。 - 纸投影：亮边 + 暖褐暗影是写死的，所以素材本身不能带阴影，否则会脏。
- 入场方向：
direction取 -1 或 1，主角滑得远、回弹明显，远景几乎原地淡入。
另外三个组件负责剩下的画面：FieldPlate 用 camera 从 0 到 1 缓推（scale 约 1.02→1.045，轻微平移），荒芜或收束段切 mood="dry" 去饱和压暗；PaperTag 是左上角的撕边纸标签，标题用宋体、小注用苹方；StoryCaption 是底部四向描边的字幕。
六步流程：给一首诗，出一条带声的片
SKILL.md 的模式 B 是六步，每一步都给了"可以直接对 AI 说的话"。
1. 读风格。 先让 AI 读 design.md 和 palette.md，用一段话复述视觉与运动规则，确认理解了再往下。
读 style/design.md 和 style/palette.md，用一段话复述这套国风风格的视觉和运动规则，确认你理解了再往下。
2. 分镜。 用 style/prompts/01-分镜表.md 的模板，产出分镜表 + 纸片清单。这一步错了后面全白做。
3. 生成纸片。 按上一节的四步做，一张纸片一个语义单位，命名归位。透明底处理需结合可用工具完成，检查轮廓后再进入合成。
4. 搭 composition。 参照 IdiomShouZhuDaiTu.tsx（成语叙事）或 PoemJiangXue.tsx（古诗意境），在 src/examples/ 新建一个文件，按分镜表每镜一个 <Sequence>，背景用 FieldPlate、纸片用 PaperCollageLayer、每镜配一句 StoryCaption。这一步只搭画面，音频留到下一步。
5. 配音 + 音效。 整理配音脚本 → MiniMax 合成 vo-0x.wav → 放 public/audio/{新slug}/ → 写一个 StoryAudio：环境音打底（音量约 0.12 循环），每句 vo 卡在对应镜的起始帧，转场配 paper-whoosh，撞击或落点配 thump / lock / magnetic，卡在动作帧上。
6. 注册 + 预览 + 出片。 在 src/Root.tsx 加一个 <Composition>（id、component、时长、fps=30、1920×1080），然后 npm run studio 逐帧看，npm run render 出片。
模式 A 是先跑通演示：什么都不改，npm run render 出《守株待兔》，npm run render:jiang-xue 出《江雪》，npm run studio 可以在浏览器里逐帧看两条 composition。
环境、命令，和几个容易卡住的地方
环境要求不复杂，但有一项是真门槛：
- Node.js 18+（建议 20+），
npm install过。 - ffmpeg：只有
npm run finalize/npm run finalize:jiang-xue会调用（render脚本里没有 ffmpeg），想做响度标准化再装。 - 中文字体：宋体
Songti SC、楷体STKaiti、苹方PingFang SC。macOS 开箱即用；**Windows、Linux 或云端缺少这些字体时，会发生字体回退，字号、字形和换行可能变化。**要么装字体，要么在片子里把fontFamily改成你机器上的中文字体。
跑通演示的命令：
npm install
npm run studio # 左侧可选 IdiomShouZhuDaiTu / PoemJiangXue
npm run render # 《守株待兔》，含声音，25.5 秒
npm run render:jiang-xue # 《江雪》，含声音，88 秒
npm run finalize # 可选：守株待兔响度标准化
npm run finalize:jiang-xue # 可选：江雪响度与色彩标准化
还有一组"抽帧截图"脚本，不用等整片渲染就能检查关键画面：
| 命令 | 帧 | 画面 |
|---|---|---|
npm run still:opening |
84 | 农夫耕作开场 |
npm run still:impact |
184 | 兔子撞树桩 |
npm run still:waiting |
430 | 守株等待 |
npm run still:withered |
550 | 田地荒芜 |
npm run still:moral |
680 | 寓意落点 |
npm run still:jiang-xue:poem |
1705 | 四句诗完整落入画面 |
npm run still:jiang-xue:end |
2540 | 柳宗元《江雪》收束 |
两个最常见的坑，仓库里都标了：
- 音频目录别漏。 换素材时容易只顾着换图，忘了把
public/audio/{slug}/整个带上，render会直接报"找不到文件"。 - 别让纸片带字。 纸片图上写字，等于把"零错字"这个优势丢掉；中文一律交给代码渲染。
节奏其实是一张表：30fps，每镜 120 帧起
分镜与图层规范.md 把时间轴写得像施工图：30fps，帧数 = 秒 × 30，总时长是一个常量（示例里 IDIOM_SHOU_ZHU_DAI_TU_DURATION = 765）。一条片 = 若干镜，每镜一个 <Sequence from durationInFrames>，默认 120 帧（4 秒），落点镜可以长些；每个 Sequence 建议 premountFor={30}，提前 30 帧预挂载，避免入场卡顿。
一镜的构成是固定的五层：背景（FieldPlate）→ 纸片（若干 PaperCollageLayer）→ 标签（可选 PaperTag）→ 字幕（StoryCaption）→ 重音（可选：印章、楷体大字、特效，配一声音效卡在动作帧）。
转场也别自己发明：一块朱红撕纸从画面横扫而过，接下一镜。这条规则简单，但它是"手工拼贴"这个质感的一部分。
它适合谁，不适合谁
先说适合的：会用 AI 写代码（Claude Code / Codex），但不想碰剪辑的人。你负责把需求说清楚，AI 去改文件和参数，你在预览里看效果——改的是"需求"，不是一帧帧 K 帧。
三条路的差别，其实不在"谁更先进"，在"你要控制什么"：
| 做法 | 你能控制什么 | 代价 |
|---|---|---|
| 剪辑软件 | 每一帧都能手动调 | 时间花在拖时间轴上，复用靠模板 |
| 生视频模型 | 画面质感、想象力 | 文字容易出错，改一句要重生成 |
| 代码渲染 | 版式、时间轴、文字、颜色都能改参数 | 要先过环境、字体、素材这几关 |
不适合的情况也要说清楚：
- 它不是一键生成器。 分镜、拆纸片、节奏是创意活，AI 帮你落地，替你决定不了。
- 它不保证好看。 统一规范有助于保持风格，叙事和节奏仍取决于分镜与素材。
- 它对素材质量很敏感。 纸片抠得不干净、主体不完整，成片立刻显脏。
素材与许可：代码 MIT，演示素材别直接商用
这一点仓库写得很清楚，照原文口径记一遍：
- 代码（
src/、style/、配置）：MIT。 - 演示素材（
public/下的图与音频、docs/preview*.png）：作者自制，仅供学习本模板用法；做你要对外发布的片子时，按纸片素材规范.md换成自己的素材，别直接商用演示素材。
换句话说：拿这套代码去做商业片是可以的，拿它自带的图音去做商业片不行。 这两件事经常被混在一起，值得单独记一句。
仓库地址：AllenAI2014/remotion-guofeng-starter
如果你正想给一首诗、一个成语、一则寓言做条片子，这套东西的价值不在"帮你省掉剪辑软件"，而在它把"国风纸片"这件事拆成了可以照着填的表：六条视觉规则、七个色值、三档运动参数、六步流程、每镜 120 帧。
剩下真正难的，还是分镜和素材——这两件事，目前还没有哪套模板能替你做完。
模板与演示画面由 AllenAI2014 提供；演示素材仅用于介绍与学习模板，制作对外发布的视频时应使用自己的图片和音频。Remotion 本身及素材生成、配音服务另有许可或费用要求。