Repolode
提交项目
AbubakrChan

AbubakrChan/product-launch-motion

一个 Claude Code 技能，输入网站 URL 即可用 HTML 生成带音效与动态模糊的 60 fps 产品发布视频。

在 GitHub 查看官网
Star
322
Fork
47
未关闭 Issue
0
最近提交
5天前

这是什么？

Product Launch Motion 是一个 Claude Code 技能，输入产品网站 URL 后，它会自动完成剧本、分镜、搭建与渲染，输出一段约 30 秒的发布视频。Claude 会读取网站内容，依据音乐节拍网格排布每个场景，并输出带同步音效的 60 fps MP4。

每一帧都是由时间函数计算出的 HTML，因此渲染结果确定、可逐拍检查。项目使用 Playwright 采集子帧，再由 ffmpeg 添加动态模糊。动画基于闭式阻尼弹簧，画面中一个元素通过形变切换状态，而非硬切。运行需要 Claude Opus 5.5、Node 20+、Playwright、FFmpeg，以及带 numpy 的 Python 3。

仓库中还保留了旧版 v1 技能，它基于 GSAP 和 HyperFrames 制作以旁白为主的视频，位于 legacy 目录。

核心功能

  • 01输入网站 URL 即可生成发布视频，无需手动剪辑。
  • 02动画与音效依据音乐节拍网格排布。
  • 03通过 ffmpeg 动态模糊输出 60 fps 视频。
  • 04使用闭式弹簧动画，单个元素形变切换场景，避免硬切。
  • 05可选 WebGL 玻璃效果，为画面添加折射的三维形状。

适用场景

  • 在没有视频剪辑软件的情况下，为 SaaS 落地页制作产品发布视频。
  • 基于现有网站快速生成带同步音效的短宣传片。
  • 将动效创意以确定性的 HTML 形式原型化，并渲染为视频。

快速上手

  1. 1

    安装该技能

    npx skills add AbubakrChan/product-launch-motion
  2. 2

    在 Claude Code 中提供你的网站 URL 来生成视频

使用前须知

  • 需要 Claude Code，README 推荐使用 Opus 5.5，因为较小的模型会遗漏许多细节。
  • 渲染需要本地安装 Node 20+（含 Playwright）、FFmpeg，以及带 numpy 的 Python 3。
  • 示例影片为 Cheerful 制作，不可直接复用，尽管该技能采用 MIT 许可。

标签

#agent-skill#claude-code#motion-graphics#html-to-video#ffmpeg#playwright#video-generation#agent-skills#ai-agents#anthropic

常见问题

product-launch-motion 是什么？
一个 Claude Code 技能，输入网站 URL 即可用 HTML 生成带音效与动态模糊的 60 fps 产品发布视频。 Product Launch Motion 是一个 Claude Code 技能，输入产品网站 URL 后，它会自动完成剧本、分镜、搭建与渲染，输出一段约 30 秒的发布视频。Claude 会读取网站内容，依据音乐节拍网格排布每个场景，并输出带同步音效的 60 fps MP4。
product-launch-motion 可以免费使用吗？用的什么许可证？
product-launch-motion 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
product-launch-motion 还在维护吗？
活跃维护中。product-launch-motion 最近一次提交是在 2026年10月15日。
product-launch-motion 适合用来做什么？
在没有视频剪辑软件的情况下，为 SaaS 落地页制作产品发布视频。 基于现有网站快速生成带同步音效的短宣传片。 将动效创意以确定性的 HTML 形式原型化，并渲染为视频。
product-launch-motion 怎么安装和运行？
安装该技能: npx skills add AbubakrChan/product-launch-motion 在 Claude Code 中提供你的网站 URL 来生成视频
在哪里获取 product-launch-motion？
源代码和安装说明在 GitHub 上：https://github.com/AbubakrChan/product-launch-motion

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目