纸拼贴动画胶片 / paper-collage-film

paper-collage-film（纸拼贴动画胶片）

一部拼贴电影 = 一段连续的、通过撕纸实现的定格动画摄像机旅程，配合音乐、以标题结尾，并通过页撕过渡到Logo和行动号召。除照片剪影外，所有内容均通过代码生成。`assets/template/` 提供了一个完整的10秒示例（kaye.creatives YouTube启动视频），可直接渲染，请基于该模板进行修改，而不是从零开始。

使用本技能的用户期望（请参阅 references/lessons.md）

• 先看参考。 打开发送的每个链接，以12fps提取帧，并阅读相关文档。如果有多个参考，找出用户最喜爱的一个。
• 参考中提取技法，故事基于品牌。 复制运动的语法，但永远不要直接复制情节（不要将猫鼬一对一映射）。
• 代码优先；仅生成照片剪影。 不要生成背景、人物或AI角色，除非用户明确要求；也不要生成视频。
• 通过渲染的选项表进行选择，而非猜测：标题字体 → `tools/font_sheet.sh`，颜色 → `tools/palette_sheet.sh`；用户通过选项编号回复。
• 快速且可见：尽早发送节奏表、剪影表和初稿，给出具体完成时间，并使用并行代理（请参阅 references/agent_workflow.md）。
• 使用用户的母语进行交流；屏幕上文字使用英语，除非用户另有要求。避免全屏闪烁（光敏性）。

0 · 信息收集（仅一次，在一则消息中，只询问无法推断的信息）

确切的品牌/用户名拼写及所有屏幕文字 · 时长 · 格式（见下方） · 屏幕文字语言（西里尔字母会改变字体） · CTA（订阅/关注/访问） · Logo文件或文字Logo · 音乐：合成音轨或用户自有音轨 · 是否愿意花费约 N×2 个信用点用于剪影。

格式。 拼贴布局仅针对 1920×1080 设计（collage.js和scenes.js使用绝对坐标）。如需制作9:16的Reels而不重新布局：将16:9的影片以全宽（1080×608）放置于1080×1920的页面上，并在上下添加撕纸装饰条，装饰条中包含标题、用户和CTA。真正的竖屏影片需要重新放置每个坐标——这将被计为额外时间。

1 · 项目（1分钟）

<skill>/scripts/new_project.sh <output_root> <slug>             # 新品牌：调色板关闭（使用原始纸张颜色）
<skill>/scripts/new_project.sh <output_root> <slug> --example   # 复现已配送的kaye.creatives影片（夜间调色板）
cd <project>                                                    # 以下命令均在项目目录下执行（代理：每次调用前加上 \`cd <project> &&\`）

创建 comp/、audio/score.html、tools/（已编译的 extract/encode/mux/greenkey）、cutouts/、refs/、review/ 目录。需要 macOS（Swift、AVFoundation、afconvert）、Chrome/Brave、Node ≥ 22（`NODE_BIN=/path/to/node` 可强制指定Node；如果已链接备用版本，请使用 `export PATH="/tools/bin:$PATH"` 以便直接调用 `node` —— tools/*.sh 已自动处理）。需要互联网连接以获取 Google Fonts。 缺失的剪影将渲染为带标签的灰色卡片，因此可在生成任何剪影前生成草稿。示例加载了以下剪影：cam_side cam_front car helmet phone plane_front plane_side clap reel laptop headphones midi phone_gimbal cassette cloud_1..4 rocks_a/b/c tree_a/b grass_strip。

2 · 参考（10–15分钟）

下载参考视频（Pinterest：解析 pin.it 链接 → pin页面 → `v1.pinimg.com/videos/…/720w.mp4` 或 `/mc/720p/` H.264 URL；GIF：使用 ImageIO/Swift 分割帧——不要使用 ffmpeg）。使用 `tools/extract ref.mp4 refs/f 12 960 0.85` 提取，然后使用 `tools/sheet.mjs` 生成联系表（说明文字 = 帧/12秒；`tools/strip.sh` 假设24fps，因此在12fps帧上其标签时间为实际时间的一半）。仔细查看。在 `refs/analysis.md` 中撰写分析，内容包括：剪切时间、运动曲线、调色板hex值、近似字体、必须复制的列表——并将参考中的每个设备映射到 CL/CLX 设备，或标记为“新设备”；列出需要移除的圣地亚哥设备。用户的参考将覆盖下文中的圣地亚哥数据。

运动语法（圣地亚哥测量数据——请参阅 references/reference_san_diego.md）

• 所有内容采用 隔帧（每秒12张）：运动时间 `q(t) = floor(t*12)/12`，每帧产生1-2像素的图层抖动。
• 在Logo出现前没有硬切：使用缩放穿越、页撕、撕纸擦除、万花筒中的六边形孔、在彩带火箭后仰拍等过渡。
• 掉落动画（边缘进入 → 空中 -8° → 落地）共3帧 + 1帧稳定动画（缩放1.03→1）；弹出动画在1-2帧内完成。
• 推近细节：指数缩放约1→6倍，持续时间约1秒，缩放中心平滑插值到细节位置。
• 万花筒：镜像环状排列，不要旋转，缩放每约0.35–0.38秒翻倍；重复的贴纸仅作为一环出现。
• 标题从上方落下，使用expo-out缓动，持续9帧，没有过冲，附带白色纸张轮廓和透视挤压效果。
• 页撕动画约0.42秒，伴随深色卷曲背面 → 撕纸色带，内含品牌标志；备用闪动风格保持2-1-2-3-2-2帧，位于色带内。

3 · 故事 + 节奏表（约15分钟内发送）

编写 `script.md`：时间 | 音乐 | 画面内容 | 屏幕文字（逐字），使用120BPM网格（节拍0.5秒，24fps）。选择时长：

10秒（已配送的示例）

t（秒）	节拍
0–1.0	拼贴页面；▶ 按钮落下（0.5秒落地）；频道标签；光标按下 ▶（0.875秒）
1.0	页面从中心撕开 → 世界1（F1赛车穿过斜向色带，中心1.75秒；头盔拍入2.0秒；标签）
2.5	撕纸擦除 → 电影摄像机，加速推近至镜头内，纸张光圈2.9–3.4秒（标签）
3.5–4.5	万花筒环，传单4.2/4.3/4.4秒，六边形孔 → 桌面
4.5–5.5	桌面：笔记本电脑4.5秒，齿轮4.75/5.0/5.25秒，提示文字输入，“生成 ✦”5.15秒 → 结果
5.5–5.95	仰拍，彩带火箭带走▶
6.0	标题“KAYE / CREATIVES”（Fraunces Black Italic字体），径向爆发，双翼飞机飞过
7.5–7.92	页撕 → Logo色带
8.0–8.5	Logo在色带内闪动
8.5–10	SUBSCRIBE拍入，点击9.0秒 → SUBSCRIBED ✓，铃铛9.15秒，慢速推近

6秒片头（在每个视频前播放：没有页撕、桌面和CTA）：0–0.5秒 主体落下 · 0.75–1.5秒 推近细节，光圈1.0–1.42秒 · 1.5–2.5秒 万花筒，传单2.17/2.33秒，孔2.33–2.5秒 · 2.5–2.96秒 火箭仰拍 · 3.0秒 标题（3.75秒落地）+ 爆发 · 4.5–4.92秒 页撕 · 5.0–5.5秒 色带闪动 · 5.5–6秒 最终冲击 + 保持。配乐参数：dur=6，drop=0.5，mid=1.5，build=2.5，vac=2.95，lift=3.0，end=5.5。Logo在屏幕上至少显示1.0秒。

15秒宣传片（与15秒参考镜像）：0–0.5秒 主体落下 · 0.5–2.5秒 弹出 · 2.5–3.5秒 推近 + 光圈 · 3.5–5.5秒 万花筒，孔5.33秒 · 5.5–7.5秒 世界2，由传单引导的爆发 · 7.5–9.5秒 世界3 / 产品时刻 · 9.5–10.5秒 火箭 · 10.5秒 标题（11.25秒落地） · 12.5–12.92秒 页撕 · 13.0–13.5秒 闪动 · 13.5–15秒 CTA。

30秒：请参阅 assets/examples/kaye_30s_scenes.js + kaye_30s_score.html（手机广告、勒索信风格文字、缩略图墙）。

为其他品牌重新换皮

设备	kaye（YouTube）	例如 咖啡店
主体落下	▶ 播放按钮	杯子/咖啡豆袋（`CL.sprite` + `CL.drop`）
弹出	相机道具	牛角包、豆子
撕开 → 世界1	F1赛车穿过色带	烘焙滚筒、农场
推近 + 光圈	相机镜头（cam_front）	杯子中的咖啡油脂（测量sprite中的中心和半径；光圈公式见api.md）
万花筒环	汽车、卷轴	豆子、杯子（每个贴纸一环）
桌面 + 屏幕	提示UI	柜台 + 订单票（`CLX.tag` / `CLX.ransom`）——或直接删除
火箭	▶ 在彩带上	杯子在彩带蒸汽上
标题 / 色带	频道名称 / `kaye.creatives`	店铺名称 / Logo或@用户名
CTA	SUBSCRIBE + 铃铛 + 光标	用户名 + 地址芯片（`CLX.tag`），营业时间星星（`CLX.star`）
`CLX.play`、`subscribe`、`thumb`、`screen` 和 `cursor` 是YouTube特有设备。collage.js中的背景使用固定的剪影名称（`CL.page`：grass_strip + rocks_；`CL.diag`：rocks_ + cassette；`CL.cloudsky`：cloud_1..4）：实现零代码换皮的方法是生成同名的替代剪影（grass_strip = 一条咖啡豆撕纸色带，rocks_* = 黑白半色调袋子）；否则将 `pageLayers` 复制到 scenes.js 中。为新的名称更新 `warm()` 的 `cuts:` 列表。

4 · 剪影生成（5分钟，每个约2个信用点）

仅生成代码无法绘制的部分——提示模板、示例集和抠像说明请参阅 references/cutouts.md。使用 `tools/greenkey keyframes/raw/x.png cutouts/x` → 生成Alpha PNG（多对象图片自动拆分）。在彩色背景上生成检查表并发送。 真实的Logo文件 → `cutouts/logo.png`，在页撕的 `drawUnder` 中使用 `CL.sprite` 绘制；闪动外观 = `logoBand` 样式背景 + 该sprite。对于文字Logo，调整大小为 `min(190, 0.78·W / measured width)`。

5 · 代码编辑

`comp/scenes.js` 是影片的核心：`COPY`（屏幕文字）、场景函数（`pageScene`、`f1Scene`、`camScene`、`kalDraw`、`deskScene`、`titleBg`、`titleScene`、`endScene`）、过渡（`wipe`、`ripDraw`、`tearDone`）、`K.setup({bars})` 放大镜缩放。除 `COPY` 外的其他文字：提示UI的“PROMPT”/标题（`CLX.screen` o.title）、'posters'闪动风格的海报图形（collage_fx.js）——请检查它们。API：请参阅 references/api.md；示例的最终时间线和注意事项：请参阅 references/edit_notes_10s.md。 通过重新映射时间来重新调整时间，而不是直接编辑数值：`Cut(a, b, (ctx, t) => titleScene(ctx, t + (6.0 - a)))`。保持偏移为1/12秒的整数倍。相互关联的场景应作为一个整体移动（kalDraw→deskScene通过drawNext连接，titleBg→deskScene在71/12之前，endScene→titleScene/titleBg）。然后更新 `K.setup({bars})`、配乐提示和静帧时间。超过时长的部分将固定在最后一帧。 标题字体在四个地方定义：`comp/index.html` 中的 ``（加载字体家族的一个字重）、`comp/film.js` 的 `fonts()` 列表（否则sprite会使用回退字体）、`COPY.titleFont`、以及用于展示候选字体的 `comp/font_sheet.html` 的 ``。西里尔字母文字：Ultra、Fraunces、Cinzel、Bevan、Abril Fatface、Shrikhand、Chango、Rye、Lilita One、Bungee、Chewy 和 Gluten 不支持西里尔字母——对于标题和 `logoBand o.font`，请使用 Rubik / Rubik Spray Paint、Unbounded、Yeseva One、Lobster、Playfair Display、Russo One，并检查勒索信风格文字。 静帧：`node tools/capture.mjs comp/index.html review/st --stills 0.5,1.75,…`。

6 · 音乐

`audio/score.html` 在浏览器中合成配乐（无采样）：放克律动 + 纸张效果音效（拍击、撕裂、嗖嗖声、爆裂声、打字声、点击声、铃铛声），带限制器。在其第一个 `` 中，根据节奏表设置 `window.SCORE_CONFIG` {dur, drop, mid, build, vac, lift, end}，并通过 `window.SCORE_CUES = {…}` 移动提示；删除 `paper()` 中影片未包含事件的对应行（搜索 `CUE.car`、`CUE.plane`、`CUE.type`、`CUE.gen`、`CUE.subClick`、`CUE.ding`）——将提示设为null会引发错误。通过 `?lv_=0` 静音特定层。

node tools/render_audio.mjs "<project>/audio/score.html" audio/score.wav
afconvert -f m4af -d aac -b 256000 audio/score.wav audio/score.m4a
python3 tools/music_window.py audio/score.wav --hits 0.5:0.35,1.0:1.0,6.0:1.0,7.5:0.45,8.5:1.0   # 每个主要冲击点在其窗口内音量最大
python3 tools/music_window.py audio/score.wav --timeline 0.25

如果用户提供自有音轨：`python3 tools/music_window.py track.mp3 --len ` → 选择一个窗口 → `python3 tools/cut_audio.py track.mp3 audio/score.m4a` → 根据其节拍重新调整画面时间（网格 = 音轨的BPM）。您无法听到音频——请根据数据验证（请参阅 references/music_notes_10s.md）并明确说明。

7 · 草稿 → 选择 → 最终版本

tools/render_film.sh draft                       # 10秒影片约需30秒 → <slug>_draft.mp4 (+ .frames_draft)
tools/strip.sh .frames_draft review/strip.png 1
tools/font_sheet.sh "LINE1|LINE2"                # 在真实处理和影片调色板中显示编号的标题字体
tools/palette_sheet.sh 0.75 3.75 6.9 8.75        # 在关键帧上显示comp/grade.js的每个调色板（0 = 原始颜色）
tools/render_film.sh final audio/score.m4a <slug>_final.mp4   # PNG帧，30 Mbps

通过在 `comp/index.html` 中设置 `window.PALETTE = ''` （`null` 使用原始颜色）来应用所选调色板。grade.js 会重新着色每个像素，包括照片和Logo：如需使用品牌色，请在 `PALS` 中添加一个条目，将品牌hex值分配给对应角色（红色 → primary），并检查产品照片和Logo是否仍然真实——或者设置为 `null` 并直接编辑 `CL.C` / `CLX.PAL`。

发送前进行QA（亲自查看帧）

• 同步：画面事件与 `--hits` / `--timeline` 峰值对齐，偏差 ≤ 1帧。
• 隔帧：帧对的哈希值仅在人为设定的1帧事件处不同。
• 连接：没有空白或跳跃帧；除标题/Logo保持外，没有超过约1秒的静态内容。
• 不要遮挡主体对象、标题、按钮标签、URL（注意光标路径！）。
• 标签在纸张碎片上至少36像素，每个至少持续0.8秒；标题至少1.5秒；Logo至少1.5秒（≤8秒的影片至少1.0秒）。
• 没有全帧闪动；色带闪动的亮度步进为单一方向。没有残留的灰色“剪影缺失”卡片。
• 时长精确（使用afinfo检查），有音频，峰值 ≤ −1 dBFS。
• 每个项目每次只渲染一个版本（`render_film.sh` 会清除其帧文件夹）。

文件

需要	位置
实测的圣地亚哥语法、镜头、调色板、字体	references/reference_san_diego.md
CL / CLX API	references/api.md（+ collage.js / collage_fx.js 的头部注释）
剪影提示、示例集、抠像说明	references/cutouts.md
配乐提示映射 + 测量数据	references/music_notes_10s.md
最终画面时间线、编辑注意事项	references/edit_notes_10s.md
并行代理工作流程	references/agent_workflow.md
默认设置的原理说明	references/lessons.md
设备测试场景（用于新设备）	assets/examples/test_collage_scenes.js, test_fx_scenes.js

质量控制流程（本地库；必须遵守）

本技能是 motion-director 协调库的一部分。即使被直接调用，也必须遵循 ~/.claude/skills/motion-director/references/quality.md：

1. 以 collage 风格的金标为起点：~/.claude/skills/motion-director/assets/kit2/src/b/ch6.tsx \CollageS``。不要从零开始。
2. 在编写代码前，建立风格参考表并列出必须遵循的特征。
3. 至少进行2轮基于静帧的评审，确保所有标准（构图、工艺、运动、可读性、保真度）均 ≥ 4。
4. 应用硬性规则：人物决不能从零使用SVG绘制（使用真实素材 → Open Peeps → 抽象化处理），构图饱满，1080p分辨率下最小可读尺寸为22像素。
5. 在开发前参考之前的成功案例，确保风格一致性。