remotion-marketing-video

Remotion 营销视频

使用 React、代码优先动画和确定性帧计时，创建高品质的 Remotion 营销视频。使用此技能规划、制作、预览、修改和渲染产品演示、SaaS 宣传片、UI 演示、发布视频、社交广告、讲解视频、带字幕的短片，以及软件产品的动态图形。

此技能侧重于视频制作工作流、故事结构、场景编排、视觉设计系统、素材处理、浏览器/Studio 预览和渲染质量检查。请将媒体素材保存在目标 Remotion 项目中，而不是此技能仓库中。

何时使用此技能

在用户要求以下事项时使用此技能：

• 创建 Remotion 营销视频、产品演示、SaaS 宣传片、发布视频、应用展示或 UI 演示。
• 将屏幕截图、屏幕录制、产品文案、落地页或 Figma/应用概念转化为脚本视频。
• 使用 React 制作动态图形、动态排版、字幕、光标动画、社交广告或讲解场景。
• 改进或调试现有 Remotion 视频，包括计时、合成、预览、渲染或导出质量。
• 在实现之前规划视频结构，包括开场吸引点、节拍、转场、宽高比和素材需求。

如果视频编辑任务与 Remotion、React、代码生成的图形或营销/产品叙事无关，请勿使用此技能。

核心工作流

1. 明确视频目标。 确定产品、受众、发布平台、时长、宽高比、行动号召（CTA）、现有素材、缺少的素材、品牌风格和最终输出路径。

2. 编码前先撰写简短的创意简报。 包括目标、目标观众、开场吸引点、故事节拍、视觉风格、动画语言、素材清单、音频/字幕计划、风险和验收标准。

3. 规划场景图。 将每个场景定义为包含 id、startFrame、durationInFrames、narrativeGoal、visual、motion、audio 和 assetRefs 的数据。根据节拍时长生成计时，不要到处散布硬编码的帧偏移量。

4. 构建设计系统。 在目标 Remotion 项目的 src/theme.ts 或 src/tokens.ts 中集中管理画布尺寸、fps、颜色、字体排印、间距、圆角、阴影、z-index 图层和动画曲线。

5. 先创建静态画面。 添加动画前，先打磨有代表性的画面。使用 Remotion 静帧渲染快速检查布局。

6. 添加确定性动画。 使用 useCurrentFrame()、useVideoConfig()、interpolate()、Easing、spring()、Sequence、Series 和 TransitionSeries 驱动可见变化。避免使用 CSS transitions、CSS keyframes、计时器和未设定种子的随机性。

7. 添加交互和剪辑语言。 使用光标移动、点击光圈、悬停状态、打字效果、生成状态、时间线编辑、缩放、字幕、标注和结果揭示，清晰呈现因果关系。

8. 最终渲染前先预览。 启动 Remotion Studio，在浏览器中打开 localhost 预览，检查代表性帧/播放效果、收集反馈并进行修改。可使用草稿静帧和短片段渲染进行质量检查。

9. 获得批准后再渲染。 在用户批准预览并确认输出路径之前，不要渲染完整的最终视频。渲染后，检查输出的视频尺寸、编解码器、帧率、时长、音轨和文件大小。

脚本和场景结构

对于大多数营销视频，采用以下默认节奏：

1. 钩子：在最初的 1-2s 内展示问题、期望结果或令人惊喜的产品价值。
2. 揭示：在 3-6s 内展示产品、UI、工作流或生成的视觉系统。
3. 机制：演示两到三个具体操作或转换。
4. 证明：展示结果、前后对比、指标、生成的内容、节省的时间或质量提升。
5. 行动号召：以产品名称、标语和一项行动结束。

每个场景只传达一个主要想法。除非用户有意要求节奏缓慢、电影感十足或以旁白为主，否则每 2-5s 切换一次场景。确保每次光标或点击操作都能在几帧内产生可见结果。

视觉和动画指南

• 优先采用代码优先的视觉效果：React UI 外壳、SVG、CSS 绘图、Canvas/WebGL、图表、字幕、示意图、程序化背景、光标或点击模拟，以及动画数据。
• 如果用户提供了真实产品截图或录屏，请使用。如果没有，请根据产品描述构建逼真的模拟 UI，并明确将其作为模拟内容处理。
• 确保文本在目标平台的显示尺寸下清晰易读。标题应简短，竖屏社交视频应使用大字幕，并注意安全区域布局。
• 用动画解释层级关系和因果关系。先移动吸引注意力的主体元素；次要元素则延迟几帧出现。
• 保持 Remotion 软件包版本一致。添加官方 Remotion 软件包时，优先使用 npx remotion add <package>。
• 将所有媒体文件放在目标项目的 public/ 文件夹中，并使用 staticFile() 引用。

参考文件

只加载最相关的文件：

• references/production_workflow.md - 研究简报、需求收集、素材清单、创意计划和审批工作流。
• references/video_editing_modes.md - 动态图形、实拍剪辑、社交短片、解说视频、教程、播客片段及其他视频类型。
• references/preview_approval_loop.md - Remotion Studio 本地预览、浏览器检查、反馈循环和最终渲染审批。
• references/project_setup.md - 项目脚手架、软件包版本对齐、文件夹结构和环境设置。
• references/scenes.md - 故事结构、场景图模式和产品类型适配方案。
• references/animations.md -缓动、弹簧动画、转场、镜头运动和帧计算。
• references/saas_ui_kit.md - 代码优先的 UI 外壳、仪表盘、图表、计数器、卡片和响应式构图模式。
• references/cursor.md - 光标、点击、悬停、交互模拟。
• references/audio.md - 音频、音效、字幕、转录文本时间安排和禁止捆绑媒体的规则。
• references/ffmpeg_export_pipeline.md - 渲染、编码、平台输出和 QA 命令。
• references/troubleshooting.md - 空白帧、素材路径、媒体同步、渲染缓慢和版本冲突。
• references/research_sources.md - 有来源支持的 Remotion、skills.sh、Agent Skills 和平台说明。

实用命令

请在目标 Remotion 项目中运行命令，而不是在此技能仓库中运行：

npx remotion studio --port=3000
npx remotion still ProductVideo --frame=90 --scale=0.25
npx remotion render src/index.ts ProductVideo out/check.mp4 --frames=0-180 --scale=0.5 --codec=h264
npx remotion render src/index.ts ProductVideo out/final.mp4 --codec=h264
npx remotion ffprobe -v quiet -print_format json -show_format -show_streams out/final.mp4

编辑技能后，运行此仓库的验证器：

powershell -ExecutionPolicy Bypass -File .\scripts\validate-skill.ps1