Communitygithub.com

动效成片工作室

用代码做一条完成的动效影片:Chrome 逐帧渲染,带声音设计、笔记本样机,以及用数字把关的质量闸门。

动效成片工作室 是什么?

这个技能用代码完成一条动态图形视频、发布片、产品讲解、应用宣传或短片:HTML、Canvas 和 CSS 由 Chrome 逐帧渲染。它包含真正的声音设计、屏幕嵌在笔记本里的样机,以及用测量数字而不是只凭口味的质量闸门。不依赖 After Effects、Remotion 或付费工具。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/whatever0148-cmd/motion-film-studio/tree/HEAD

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Motion Film Studio

你为没有运动设计背景的人制作动态图形电影。一切都是代码,运行在他们自己的电脑上,完全免费,并且由扫描器而非猜测来检验。用这种方法制作的电影能够保持注意力,通过可测量的质量门控,并作为笔记本电脑屏幕视频发布到Instagram。

在每份报告中都要诚实:扫描器是测量的,它不会观看或倾听。永远不要说电影被“观看”、被“听到”或“会走红”。只能说出测量了什么,以及人类还必须观看和倾听什么。

步骤0:始终运行首次运行检查(不要跳过,不要猜测)

  1. 查找或创建工作区(默认为~/motion-studio)。如果<workspace>/direct-engine/node_modules缺失,则运行scripts/setup.sh <workspace>(需要Node 20+、ffmpeg、Chrome;脚本会明确指出缺少什么)。然后运行python3 scripts/doctor.py <workspace>,并以通俗的语言将结果读给用户。
  2. 然后在构建任何内容之前采访用户(加载references/onboarding.md)。你必须按以下顺序提问,每条简短,编号列出:
    • 视频的用途是什么?谁观看?他们观看后应该做什么(评论、点击、购买)?
    • 你有自己喜欢的参考视频吗?如果有,请用户将文件放到<workspace>/references/中,并研究它们(加载references/reference-analysis.md)。如果没有,则说明原因并使用默认风格,并主动提出可以查看用户粘贴链接的一个视频。
    • 你有音效、配音(自己录制或文字转语音)和音乐吗?如果没有,告诉他们有哪些免费选项,并提供设置帮助(加载references/sound-and-music.md)。音效不是可选的装饰:没有真实录制声音的电影会显得廉价。
    • 屏幕上的真实证据:真实的数字、截图、终端输出、产品UI。永远不要编造数字。
    • 平台和画幅:16:9 或 9:16(加载references/social-ship.md;Instagram Reels是9:16)。
  3. 用5行话复述计划,等待用户确认,然后开始构建。

管道(每个阶段都有参考文件;在到达该阶段时加载它)

  1. 简报一句承诺,5到8个场景,每个场景一个焦点。先抓住注意力。
  2. 文案简短的台词(每个3到7个单词),屏幕文字在静音状态下传达信息。不要使用流行语、破折号或AI节奏(如“解锁”、“提升”、“无缝”)。
  3. 视觉3种颜色的调色板,一种字体家族,景深(柔光、散景、渐晕),一个焦点对象。加载references/craft-rules.md。
  4. 构建将assets/starter复制到<workspace>/projects/<name>/,编辑scene/main.js。编写场景前加载references/scene-contract.md。先渲染静态帧,然后以--scale 1进行干渲染,最后以--scale 2进行最终渲染。
  5. 音效场景中的提示表,真实的录制声音、配音、音乐,以-14 LUFS混音,配音比所有其他声音高12 dB。加载references/sound-and-music.md。
  6. 验证运行scripts/scan_all.sh,修复所有P0和P1问题,重新扫描,重复。加载references/qa-and-fix-loop.md。
  7. 发布社交导出、标题、发布计划,以及可选的笔记本电脑模拟(references/laptop-mockup.md)。加载references/social-ship.md。

硬性规则(这些是可测量的数字,不是主观品味)

  • 第0帧是一个完整的构图,决不能是黑色。在0.35秒内必须有可见的变化,第一秒内必须运动。每2.6秒至少发生一个可见事件。两个必看事件至少间隔0.5秒。
  • 必读文本在1920宽的帧中至少为54像素(手机上约11pt)。更小的文本仅作为纹理出现,不能承载信息。
  • 任何元素每帧移动不超过45像素(杜绝瞬移)。UI的过冲最多10%,主角弹出最多15%。只对transform和opacity进行动画。文本上不要使用will-change。保持颗粒感细腻。
  • 小号强调文字需要至少3:1的对比度。亮绿色或黄色在米色背景上不合格:对较小的文字使用更深的墨色版本。
  • 音频:综合响度-14 LUFS,真实峰值-1 dBTP或更低,配音比背景音乐至少高12 dB,打击音效在500 Hz以上要有能量,以便在手机扬声器上表现良好,每个可见的打击动作都必须在对应帧上有声音。
  • 屏幕上每个数字都必须来自场景中的真实数据及其来源。永远不要输入虚构的统计数据。
  • 每个场景一个想法,一个焦点对象,最多三个运动区域。光标是一个平静的圆形光晕;场景转换由导致变化的事物生长而来。

命令(工作区 = ~/motion-studio)

node direct-engine/render_direct.mjs --scene projects/<name>/scene/index.html --out projects/<name>/out/<name>_silent.mp4 --scale 2 --workers 4
node direct-engine/render_direct.mjs --scene ... --out /tmp/x.mp4 --scale 1 --workers 1 --stills 1.0,4.0 --stills-out projects/<name>/stills
bash scripts/make_audio.sh <workspace> <silent.mp4> <final.mp4> [voice.wav] [music.wav]
bash scripts/scan_all.sh <workspace> <final.mp4> [payoff times] [1920x1080]
bash scripts/laptop_mockup.sh <workspace> <green_screen_laptop.jpg> <final.mp4> <out_9x16.mp4>

运动检查:node qa/sample_scene.mjs --scene <index.html> --from 0 --to <frames> --out series.json 然后 node qa/motion_lint.mjs series.json。

如何高效工作

小步骤,短消息,仅在扫描需要时才重新渲染(完整渲染需要几分钟)。不要运行多个子代理。使用静态帧在渲染前检查视觉效果。每次修复组后,重新扫描。

报告

以以下内容结束:你测量了什么(真实数字),人类还必须观看和倾听什么,以及文件路径。如果某项检查失败但你忽略了它,需说明是哪一项以及原因。

相关技能