hyperframes-product-launch-video

产品发布视频技能

此技能将指导你使用 Hyperframes 制作高端精品产品发布视频，重点介绍从品牌探索到最终验证的结构化工作流。

利用官方 Hyperframes 技能

此技能充当视频项目的导演和架构师。为确保技术准确性并获取最新的框架模式，你必须配合使用官方 Hyperframes 技能。

编写任何代码之前，你应该：

1. 调用官方 /hyperframes 技能，查看合成规则、数据属性语义和框架约束。
2. 调用官方 /gsap 技能，了解详细的时间线参考、缓动函数和复杂动画模式。

将此技能的战略指导与官方技能的技术文档相结合，你就能制作出达到生产级品质的视频合成。

无状态项目生成（重要）

此目录（hyperframes-product-launch-video）是一个只读模板和技能文件夹。切勿在此处写入项目专属文件。

每当你创建新的视频项目时：

1. 目标目录：所有项目文件都必须创建在用户指定的目标视频项目文件夹中（例如 my-new-video/ 或 my-new-video/assets/）。
2. 项目 DNA：在目标项目的 assets/ 或根目录中生成 brand_dna.json。
3. 艺术指导：将最终的 ART_DIRECTION.md 保存到目标项目文件夹中。
4. 无副作用：项目运行期间，不要修改此技能文件夹中的任何文件。

工作流

1. 访谈阶段（品牌 DNA）

开始之前，你必须了解品牌。

• 网站分析：使用 Playwright 访问用户的网站，提取品牌颜色、字体和核心价值主张。
• 素材需求：向用户索要 Logo 和图标，并说明需要干净、透明且紧密裁切的 PNG 或 SVG 文件。
• 视频类型选择：询问这是 100% 动态图形视频，还是混合形式（例如创始人出镜讲解 + Hyperframes 动态图形）。

2. 规划阶段（艺术指导）

规划之前，绝不要编写 HTML。

• 生成艺术指导：根据艺术指导模板创建 ART_DIRECTION.md 文档。
• 场景拆解：逐秒定义视频内容，明确视觉动作、镜头运动、缓动函数和音效。

3. 实现（精品动态设计）

运用顶尖动态设计原则。代码片段请参阅动态设计模式。

• Apple 风格镜头：使用大幅微距缩放和快速缩放（back.out）。
• 橡皮擦揭示：通过滑动的 Logo，逐步“擦除”文本的不透明度。
• 碰撞／碎裂：使用 GSAP scatter 实现物理冲击效果。
• 玻璃拟态：使用 backdrop-filter: blur(40px) 制作精品 UI 元素。
• 打字机物理效果：使用弹跳的文字片段推动光标。

4. 音效设计（SFX）

• 音效采购清单：根据分镜脚本向用户提供一份“音效设计采购清单”。
• 同步：使用 <audio data-start="..."> 标签，让音效与 GSAP 的冲击效果完美同步。

5. 验证与故障排除

• 常见陷阱：查看关键注意事项，避免 Hyperframes 常见错误（如时长不匹配、缺少目标等）。
• FFmpeg：如果渲染失败，请指导用户在本地安装 FFmpeg。

最佳实践

• 原子化场景：保持场景模块化，并严格使用 data-start 和 data-duration 管理。
• 可见性管理：使用 autoAlpha 进行场景切换，确保时间轴定位时显示正常。
• 布局与变换：使用物理尺寸设置 flexbox 间距，并使用变换效果增添视觉亮点。