SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场remotion-product-demo

remotion-product-demo

设计与创作

查看项目

更新于 10-16 02:03

技能介绍

用途

remotion-product-demo 用于把一段真实的屏幕录制或截图，制作成 20–45 秒的产品演示视频，例如 SaaS 产品走查、功能演示、上手引导片段、CLI 或开发者工具介绍。它基于 Remotion 构建，镜头素材来自 snapcn——一组用于演示视频中那些手工动画最耗时的部分的 Remotion 组件，例如对录制画面做镜头推近、光标点击、设备外框、终端打字、AI 提示发送等。

主要能力

  • 以真实录制或截图作为底版，在其上做镜头动画，而不是用 JSX 重建 UI。只有当某个元素必须独立运动时，才重建该元素。
  • 提供一组可安装的 snapcn 组件，覆盖演示视频的常见节拍：安装/设置（terminal-simulator）、设备上的产品（laptop-frame、phone-frame）、关键动作（cursor-track 包裹 screen-recording）、AI 产品（prompt-send、answer-stream、search-typing）、结果（status-cycle、count-grid）、结尾字标（block-wordmark、logo-flicker）。
  • 组件通过 shadcn CLI 安装，作为项目自有代码落地，通过 props 传入文案、颜色、录制素材和光标路径，而不是改写组件本身。
  • 提供渲染审查流程：对每个节拍的中点、每次剪切前后渲染静帧，检查点击是否落在真实按钮上、推近后文字在 720p 下是否可读、剪切处是否出现黑帧。
  • 支持按不同画幅输出：16:9 用于 X 和 LinkedIn，9:16（配合 phone-frame）用于 Reels、Shorts 和 TikTok；--scale=1.5 可把 1280×720 母版放大到 1920×1080。

使用方式

前置条件：一个 Remotion 项目（npx create-video@latest），画布 1280×720、30fps；shadcn CLI（若无 components.json 则运行 npx shadcn@latest init）；安装 npm i @remotion/transitions；把录制文件放入 public/（例如 public/recording.mp4），用 staticFile() 加载。

工作流：

  1. 找到唯一的关键时刻：观看录制，找出只有这个产品才会做的那一个动作（关键点击），它获得镜头推近和最多屏幕时间，其余镜头为它做铺垫。
  2. 分镜：每个节拍对应一个 snapcn 组件，并按组件的自然长度（帧数）做预算。预算不足会截断镜头，预算过多会留下空白。
  3. 安装组件，例如：

npx shadcn@latest add @snapcn/terminal-simulator @snapcn/laptop-frame @snapcn/cursor-track @snapcn/screen-recording @snapcn/status-cycle @snapcn/block-wordmark

  1. 用 TransitionSeries 组合各序列，注册时长为各序列之和减去转场帧数（示例中为 durationInFrames={872}、fps={30}、width={1280}、height={720}）。
  2. 渲染审查：

npx remotion still ProductDemo out/click.png --frame=460 npx remotion render ProductDemo out/demo.mp4 --codec=h264 --crf=18

  1. 按画幅输出发布。

镜头瞄准要点：cursor-track 的路径是画面比例（x、y 取 0 到 1），at 是光标开始朝该点移动的帧，click: true 在到达时触发点击环，每次点击要正好落在录制中的真实按钮上；screen-recording 的镜头移动（{ at, duration, zoom, x, y }）缓动到某个姿态并保持到下一次移动，对关键动作推近（zoom: 1.4–1.8），落定后拉回（zoom: 1）；录制包含浏览器边框时用 crop={{ top: 0.11 }} 裁掉；terminal-simulator 的 lines 为 { text, type }，type 可为 command、log、success 或 error，粘贴真实输出并适当缩短。

适用场景

适合需要快速产出产品演示视频的团队，尤其是 SaaS 走查、功能演示、上手引导、CLI 或开发者工具介绍，以及需要为不同社交平台输出不同画幅版本的场景。

限制与规则

  • 录制是事实来源：不要编造界面文案、数字或功能，屏幕上每个字符串都应来自真实产品；没有录制时，应索取录制或截图，不要画一个假仪表盘。
  • 不要臆造组件名：@snapcn/<name> 只对官方组件列表中的名称有效；若没有合适组件，应如实说明。
  • 填充 props，不要改写组件。
  • 资料中提到的 snapcn Pro 包含 50 个演示场景，以及 snapcn MCP 的安装命令与定价页面链接；具体收费与价格以官方页面为准，本资料未给出具体价格。
  • 资料注明部分规则与流程改编自 everyinc/product-launch-video（MIT）与 HeyGen 的 hyperframes 技能（Apache-2.0），详见 THIRD_PARTY_NOTICES.md。