项目详情
video-shotcraft
把 Claude Code / Codex 变成电影感动效工作室——给产品拍一支带真实截图、2.5D 运镜、卡点剪辑的电影感宣传片
更新于 2026-08-05 · 3.5k stars · 300 forks
← 返回汇总
项目速览
一句话定位
给 Agent 一套电影感动效词汇表，让它拍出不像 AI 生成的产品宣传片
AI agent skill。把 104 张镜头配方卡 + 161 个调校过的 Remotion 动效 demo + 一支已验收的完整宣传片模板打包进 skill。Agent 读卡就能复刻电影级运镜、真实页面 2.5D 复刻、节拍卡点剪辑、电影系 SFX——避开「AI 生成视频」的廉价感。
项目速览
核心数据
配方卡覆盖 10 类镜头：camera / data / effects / interaction / opening / outro / rhythm / transition / typography / ui-entrance。每张卡含意图、能量、时长、参数表、已知坑、参考实现路径。
为什么存在
AI 生成视频的三个廉价感来源
万能 fade 转场
每个镜头切换都 opacity 0→1。最省事也最一眼 AI——把空间关系抹平，所有镜头读起来一样。
lockstep 同步起停
5 个元素同时 delay:0 同时到位，像机器人合唱团。缺乏迪士尼 12 原则里的级联与单一焦点。
无意义飘浮粒子
背景一堆圆点随机飘，与内容无关。动效模型特别爱这个，但粒子必须叙事，否则是装饰冗余。
video-shotcraft 的反制：配方卡是调校过的参数真相，demo TSX 是经多轮返工沉淀的缓动/时值/遮罩时机——凭理解新写等于放弃全部调校积累。
核心理念
配方卡 = 动效词汇表
把电影感动效拆解成 104 个可复用的「词」。每张卡是一个具体的运镜手法（如 crash-zoom-punch / deck-deal-flyin），带能量等级、适用场景、参数表、已知坑。
用户点名卡
→
library.json 校验
→
读配方卡全文
→
定位 demo TSX
→
适配目标素材
- 卡给语义，demo 给参数真相：卡上的「已知坑/命门」标注参数不得降档
- 词汇通用：单张卡可抽出来做任意视频里的单个镜头，不必拍整片
- 能量分级：低/中/高对应不同叙事段落（开场/功能段/收尾峰值）
🔥 核心架构
三层资产结构
方法论层
references/
pipeline 八阶段流程、审美准则 R/Q/S/C/P、声音设计、节拍同步、终检清单。跨项目通用的判例与方法。
资产层
demos/ + assets/lib/
104 张配方卡对应 153 个调校过的 Remotion demo TSX。PageCam 2.5D 相机、Caption、FlashCut 等可复用组件。
模板层
template/ Ink Press
一支已验收的 36.2s 完整宣传片工程（纸墨琥珀风，10 镜）。换产品截图即可复现同等质感。
主线：通用方法论
支撑：可复用资产
独立：完整模板
工作流
三种完整宣传片模式
| 模式 | 谁做创意决策 | 适用 |
|---|
| 自主自由创作 | Agent 全权（不逐阶段等确认） | 信任 Agent、要快、要新风格 |
| 共同创作 | 用户确认关键节点（简报/视觉/分镜） | 要参与决策、控制方向 |
| Ink Press 模板 | 固定结构，只换素材 | 要极度相似复现、最短路径 |
另支持单镜头抽卡模式：不拍整片，从 104 张卡里抽一张做单个镜头动效。配方卡本身是通用动效词汇，可融入任意视频项目。
模板解剖
Ink Press：一支验收过的宣传片
36.2 秒，1920×1080 @ 30fps，10 个镜头。纸墨琥珀风格，2.5D 真实页面运镜 + 节拍卡点 + 电影系 SFX。换产品截图即可复现。
能量骨架
品牌开场（低）→ 功能段×3 与字卡呼吸位交替（中高/低）→ 结尾组装推到全片峰值。两处 wordmark 落定 hold 满 1s。
叠加层（声明式集中管理）
- CAPTIONS：底部通栏解说 6 条
- FlashCut：暖白闪转场 4 处
- SFX 钉帧表：30+ 条 {from, src, volume}
配方卡解剖
一张卡长什么样：crash-zoom-punch
意图
慢推近是「请看」，急推是「看这个！」——一拍之内从全景砸到特写，视线没有选择余地。
参数表（节选）
| 参数 | 典型值 |
|---|
| 急推时长 | 6f（4-8f） |
| 目标 zoom | 2.4-2.8 |
| 回弹幅度 | zoom 的 3-6% |
已知坑（命门）
- 终点必须是高清纹理槽位——急推后全程特写，低倍截图糊字
- 回弹与撞停两款别混用：回弹后再震屏读作穿帮
- 一支片急推 ≤2 次（手法去重）
参考实现
demos/camera/crash-zoom-punch/
CrashImpactReal.tsx / CrashZoomReal.tsx
技术亮点
2.5D 真实页面复刻机制
复刻真实产品页面时，第一步起本地 dev server，用无头浏览器采集三件套，再用 PageCam 做布局级运镜——保证 3D 推近后文字锐利。
dev server
→
整页 2x 截图
→
元素透明底切片
→
layout.json 坐标表
→
PageCam 运镜
- 布局级 zoom 而非 transform scale：scale 会先降采样再放大导致文字糊；CSS zoom 做布局级放大根治此问题
- 被特写元素 4x 单独截图：2x 整页纹理 + 布局 zoom + 4x 特写，三件缺一不可
- 数据按风险处理：公开演示数据需简报确认；客户/个人/密钥/内部数据须虚构或脱敏，采集前冻结
技术亮点
声音设计 + 节拍同步
声音设计（SFX 词汇纪律）
- 按片种选词不按事件：whoosh/impact/riser/sparkle/transition
- 禁游戏音色：合成器 pluck/bloop 一耳朵出戏
- 声明式钉帧：SFX = {from, src, volume}[]，逐条注释动作
- 画面锁定后才做声音：否则返工连带 SFX 全表报废
节拍同步（卡点 ≤3 帧）
- librosa 网格拟合求真 BPM：不信任 beat_track 的 tempo 标量（偏差 2%+）
- 时间线用拍号 beatF(n)：换曲改两个常量全片重排
- 鼓点定位大 slam：最强 hit 钉在整数拍，半拍须有数据支持
- 渲后回测：抽音轨重跑拟合，切点误差 ≤3f 才合格
在线体验
Playground：浏览全部镜头卡
本地构建的交互式 Playground，浏览 104 张配方卡的动态预览。鼠标悬停播放 mp4，点击展开完整配方卡（意图/参数表/已知坑），支持类别筛选与全文搜索。
- 104 张卡 + 161 个 style 动态预览（mp4 走 GitHub Pages CDN）
- 10 类中文标签筛选 + 能量标记 + 全文搜索
- 多 style 变体切换 + 完整配方卡 markdown 渲染
★ 已融入本地 motion skill
三层吸收方案（已落地）
已将 video-shotcraft 的核心能力吸收进本地 basic/motion skill 体系，剥离重二进制依赖，保留全部方法论与轻量代码。
| 层 | 吸收内容 | 位置 |
|---|
| 方法论层 | 声音设计 / 节拍同步 / 审美准则 / 终检清单 | motion/references/*.md |
| 场景层 | 104 配方卡 + 153 demo TSX + 2.5D 组件 | motion/scenes/shotcraft-promo/ |
| 音频层 | 154 个 Mixkit 素材（不进 skill，指回原仓库） | 按需拉取 |
- 剥离私有资产：Ink Press 模板（7.8M 私有截图）不搬，按 ink-press-guide 指引拉取
- 零运行时依赖：skill 目录内不装 npm 包，依赖由用户项目自己装
- 接入 motion 路由：作为 scene skill 由 motion 主 skill 显式调度
适用场景
适合谁用
SaaS / 桌面产品
有真实 web UI 可截图的产品，拍 15-40s 宣传片最能体现 2.5D 复刻价值。
功能 Demo 视频
从配方卡抽单张做功能演示动效，不必拍整片。
动效工程师 / Agent 开发者
研究「如何让 AI 生成的动效不像 AI」的标杆样本，学习判例式审美准则。
风险
- Remotion 商用授权：团队/公司使用需付费 License（免费仅限个人/开源）
- 渲染吃资源：无头 Linux 需 chrome-headless-shell + --concurrency=1
潜力
- 动效词汇标准化：配方卡模式可扩展到更多片种（教育/电商）
- Agent skill 范式标杆：判例式 + 调校资产 + 三模式路由
潜力评估
小结
不只是「拍视频的 skill」，而是「如何让 AI 动效脱离廉价感」的方法论沉淀。配方卡 + 调校 demo + 判例式准则的三件套，是 Agent skill 设计的优质范式参考。