product-launch-motion 教程：用代码从网站做出 60 fps 产品发布片（2026）

推荐链接（推广）：数字严选大约 11 分钟AI 视频Opus 5.5 做视频Claude Code 视频product-launch-motion产品发布片Playwright

阅读说明

仓库信息查阅日期：2026-10-23；星数、更新时间会变，以仓库页面为准；本文不写价格。

一句话结论

AbubakrChan/product-launch-motionopen in new window 是一个 Claude Code 技能。当前的 v2 从网站地址出发，让模型当导演：用一个不会硬切的形状、闭式阻尼弹簧和光标，把产品发布片写成单个 HTML，再渲染成 60 fps 的 MP4。

适合要做界面演示、品牌片头或发布片，并且愿意自己准备 Node、Playwright、FFmpeg 和一首音乐的人。README 写明要用 Claude Opus 5.5；更小的模型能跟着规则走，但会漏掉细节。需要旁白讲解时，README 建议改用留在 legacy/ 里的 v1。

仓库信息

截至 2026-10-23，星数、最近推送和创建时间取自仓库元数据，日期为北京时间。

仓库星数最近推送（北京时间）许可创建时间
AbubakrChan/product-launch-motionopen in new window3452026-10-22MITopen in new window2026-07-27

仓库描述是 “Claude Code skill for Dribbble-level product launch videos from code.” README 写明技能和 references/ 为 MIT。样片不随许可一起给出去：它们是为 Cheerfulopen in new window 做的，归属该产品，详见 NOTICEopen in new window。

它能做什么样的视频

README 展示的成片都是 HTML 按时间算出来的帧，再编码成带声音的 MP4。预览图本身没有声音。

成片README 写明的规格
发布片30 秒，为 Cheerful 制作，1080p、60 fps、有声音。文件名 launch-film-1080p60.mp4
同一支片子的玻璃通道可选的 WebGL 玻璃处理，折射的三维形状穿过每个场景。文件名 launch-film-glass-1080p60.mp4
One shape, never cut14 秒无缝循环，1440×1440，有声音。文件名 one-shape-loop-1440.mp4
Hoopoe Club43 秒，Arabic，有声音。文件名 hoopoe-club-1080p60.mp4

14 秒循环里，同一个元素依次变成十一个界面状态：button、loader、check、dynamic island、video reel、slider、toggle、tabs、chart、⌘K palette、toast，再回到 button。内容用一段短模糊换掉，光标负责点击和拖拽，最后一帧等于第一帧。

README 用下面这些规则约束成片。完整提示和审片笔记在 references/prompts.mdopen in new window，代码套路在 references/technique.mdopen in new window。

  • 一个形状，不做硬切。状态之间是形变、镜头推进，或推进某个元素、让它变成下一场。
  • 容器里的文字先短促退出，新文字再用弹簧进入，两者不重叠。
  • 只用闭式阻尼弹簧，过冲很小。开关旋钮和标签指示器的两条边用不同弹簧，所以会拉长。
  • 光标驱动每一次变化：按下有缩放和涟漪，拖拽在松开后弹回。产品自己的代理可以成为第二支光标。
  • 每个状态都要被镜头框住。空镜算错误。拉远用来表现规模。
  • 音乐优先。用 numpy 量出节拍网格，高潮落在大场面，每个合成界面音效按自己测到的峰值卡在鼓点上。
  • 用真实数字和原创场景。里程表上是真实数字，客户标志一拍一个，不从产品网站整页抄。
  • 模型自己做创意决定，每条记成一行 DECISION:，你可以在下一句里推翻。

v1 和 v2 的差别，README 表如下：

v1（legacy/）v2
时间锁在旁白的词上锁在测出来的音乐节拍上
运动GSAP 时间线闭式弹簧，纯 seek(t)
渲染HyperFramesPlaywright 子帧 + ffmpeg tmix 运动模糊
结构镜头和转场一个形状，不硬切
声音音效库，做电平合成音效，按测到的峰值摆放
纵深CSS 镜头机位镜头弹簧，外加可选的 WebGL 玻璃

README 写 v1 仍然更适合有旁白的讲解片。README 还写原版 v1 当时是 190 星，代码留在 legacy/。

流水线原文：

brief ──► state list on the beat grid ──► one HTML film, every pixel = f(t) in seek(t)
      ──► one frame per beat, contact sheet, fix ──► Playwright: 4 subframes per frame
      ──► ffmpeg tmix (motion blur) ──► 60 fps H.264 + mix ──► storyboard + seam scan

因为每一帧都是时间的纯函数，跳到任意时刻得到的像素相同。README 写这是按拍质检和并行渲染的前提。

需要准备什么

README 的 Requirements 表：

需要用途
Claude Codeopen in new window，并使用 Opus 5.5导演和搭建成片。更小的模型能遵守规则，但会漏细节
Node ≥ 20，以及 Playwright渲染
FFmpeg运动模糊、编码、响度检查
Python 3 和 numpy节拍网格和合成音效
一首大约 120 BPM 的免版税歌曲可选。每首曲子的许可要单独看；有些免费素材库里夹着受限条目

README 写 Everything runs locally。仓库没有写需要单独的 API key。

安装与第一次运行

  1. 安装当前技能。README 的命令是：
npx skills add AbubakrChan/product-launch-motion

  1. 已经装过、要换成最新版时，README 写的是 npx skills update。

  2. README 按安装日期分了三种情况：

  • 2026-10-13 之前装的是 v1。运行 npx skills update 后，product-launch-motion 会被换成 v2。
  • 2026-10-13 或 2026-10-14 装的 v2 曾经短暂叫 motion-launch-video，update 找不到它。需要重装一次：
npx skills remove motion-launch-video
npx skills add AbubakrChan/product-launch-motion
  • 旁白讲解还要留着 v1 时，和 v2 并排安装：
npx skills add AbubakrChan/product-launch-motion/legacy
  1. 装好后打开 Claude Code，用下一节的提示做第一支片子。仓库文件各管一块：SKILL.mdopen in new window 是创意方向和流程，references/prompts.md 是原始提示和审片笔记，references/technique.md 是弹簧、镜头、光标、里程表、音频和渲染的代码套路。

在 Claude Code 里用 Opus 5.5 驱动它

在 Claude Code 里用 /model 选 Opus 5.5，详见 Claude Opus 5.5。

README 在安装命令之后给出的用法是，在 Claude Code 里说：

Make a launch video for https://your-website.com

README 写模型会读网站、写故事、导演每一场，并渲染一支 60 fps 的 MP4，带音乐、对上时间的音效和运动模糊。上面的样片也是从一条 URL 开始，再来几轮修改意见。

SKILL.md 把流程写成这几步：

  1. 先要输入，除非用户已经给了，或说了你来定：形状要变成的 8 到 12 个状态、调色（黑白、一个强调色，或品牌设计系统），以及一首大约 120 BPM 的免版税歌曲。可以提供 “Director's cut / Director picks”。
  2. 先导演，再写代码。定下产品故事、品牌处理、音乐弧线，以及按拍的场面计划。每个决定记成 DECISION:。用户没有要求先批准时，不要干等。
  3. 做成一个 HTML。每个样式都在 seek(t) 里由时间算出来。不用 CSS transition，不用计时器，帧与帧之间不保留状态。
  4. 全片渲染前，先每一拍出一帧，做成接触表，改掉不在网格上、挤、空、难读或重叠的地方。转场再看 ±0.1 秒。还要用低分辨率、正常速度看一遍动态草稿。
  5. 全片渲染：Playwright 子帧，ffmpeg tmix 运动模糊，然后是 60 fps 的 H.264 加混音。
  6. 用每秒一帧的故事板和帧差扫描检查 MP4 的接缝和毛刺，并核对音效是否对上画面。

SKILL.md 写交付物放在 deliver/：MP4、每秒一帧的故事板、关键静帧，以及用来对比的上一版。交出方式写成 serve <dir> 的 tailnet 地址，并写明 never localhost。

示例提示词（按 README 写明的用法改写，不是仓库原文）：

为 https://example.com 做一支产品发布片。先向我要 8 到 12 个界面状态、调色，以及一首大约 120 BPM 的免版税曲子；我也可以回答 Director's cut 或 Director picks。用同一个形状连续变形，不要硬切。全部画在一个 HTML 里，用 seek(t) 计算每一帧。渲染成 60 fps 的 H.264 MP4，音效按测到的峰值放在节拍上。

做一支 14 秒、1440×1440 的循环。一个形状依次变成按钮、加载、对勾、滑杆、开关、标签、图表、命令面板和提示，最后一帧等于第一帧，光标的位置和速度也要接上。先给出节拍上的状态列表，再写代码。

限制与已知问题

SKILL.md 写明的限制和易错点：

  • 禁用弹跳缓动、粒子爆发、辉光、界面控件上的渐变、不统一的图标描边、空的时间，以及看起来像模板的画面。调色用品牌自己的设计系统。
  • 不要把产品网站的文案、界面、数据和图片整页搬过来。大数字用站得住的真实数据，微型故事可以编，报告里要写明哪部分是真的。
  • 客户标志一拍一个，只用真正跑过活动的品牌。素材要有许可，并逐条检查。
  • 循环片的最后一帧必须等于第一帧，包括光标的位置和速度。
  • 相机会缩放的元素不要加 will-change，否则文字发糊。
  • 必须在时刻 T 到达的弹簧，要提前一个 settle-lead 发出目标。
  • hide() 把不透明度打成 0 之后，要由绘制函数改回来，否则元素一直不可见。
  • 比例字体的里程表数字会跳。每个槽按最终字形定宽，只在垂直方向裁切。
  • SKILL.md 另有一段写在 VPS 上渲染：磁盘紧，按 4 秒一段渲染并删掉 PNG；Chromium 会先被 earlyoom 杀掉；项目目录外若有 /tmp/inspect.py 会挡住标准库，Python 要从项目目录跑；PreToolUse 钩子会挡住某些 ffmpeg 通配字符串。

references/prompts.md 里的工作约定还写：非阻塞的选择不要停下来问，决定后用 DECISION: 汇报；交出 tailnet URL，不交 localhost 或 VPS 路径；报告要区分听过声音还是只做了测量。

截至 2026-10-23，仓库没有 open issue。

常见问题

能不能用 Codex 或 Cursor？

README 未写明 Codex 或 Cursor。安装和使用都写在 Claude Code 里，并点名 Opus 5.5。

成品是 HTML 还是 MP4？

两边都有。制作过程是一个 HTML，每一帧由 seek(t) 计算。交出来的成片是 60 fps 的 H.264 MP4，另加故事板和关键静帧。v2 的渲染器是 Playwright 子帧和 ffmpeg tmix。v1 用 HyperFrames。

商用和许可怎么算？

NOTICEopen in new window 写明 MIT 覆盖作者写的材料：SKILL.md、references/、legacy/，以及 README 的正文。v2 样片（examples/ 和 v2.0.0 发布包）以及 v1 参考片、legacy/still-1.jpg 归 Cheerful，不得再使用、再分发或修改这些成片及其帧。片中的品牌标志归各自所有者。

样片音乐署名是 Arulo 的 “Swish Swed”，Mixkit Free License。字体是 DM Sans（SIL OFL 1.1）。音效是合成的。NOTICE 写依赖要单独看条款：Playwright 为 Apache-2.0，Python 与 numpy 为 BSD，FFmpeg 视编译方式为 LGPL 或 GPL。v1 还会用到 GSAP 和 HyperFrames，GSAP 适用 GreenSock 自己的许可，不在本仓库 MIT 之内。自备的音乐也要按每首曲子的许可使用。

要不要 API key？有没有中文字幕？

README 没有写 API key。它写的是本地运行，模型在 Claude Code 里选 Opus 5.5。中文字幕和中文配音 README 未写明。样片之一 README 标明是 Arabic（Hoopoe Club，43 秒）。v2 的时间轴跟音乐，v1 跟旁白词。

相关阅读

参考来源

上次编辑于:
贡献者: Masoooon
小苔藓 AI 指南 · 数字严选内容站
Copyright © 2026 数字严选