产品发布视频技能
此技能将指导你使用Hyperframes创建高端、顶级的产品发布视频。它强调从品牌发现到最终验证的结构化工作流程。
利用官方Hyperframes技能
此技能充当视频项目的导演和架构师。为确保技术准确性并访问最新的框架模式，你必须将其与官方的Hyperframes技能结合使用。
在编写任何代码之前，你应该：
- 调用 官方 /hyperframes 技能 以查看合成规则、data-attribute语义和框架约束。
- 调用 官方 /gsap 技能 以获取详细的时间线参考、缓动函数和复杂动画模式。
通过将此技能的战略指导与官方技能的技术文档相结合，你将制作出生产级别的视频合成作品。
无状态项目生成（关键）
此目录（hyperframes-product-launch-video）是一个 只读模板和技能文件夹。你绝不能在此目录中写入任何项目特定的文件。
每当你创建新视频项目时：
- 目标目录：所有项目文件必须创建在用户的目标视频项目文件夹中（例如
my-new-video/或my-new-video/assets/）。 - 项目DNA：在目标项目的
assets/或根文件夹中生成brand_dna.json。 - 艺术指导：将最终的
ART_DIRECTION.md保存在目标项目文件夹内。 - 无副作用：在项目运行期间，切勿修改此技能文件夹中的任何文件。
工作流程
1. 询问阶段（品牌DNA）
在开始之前，你必须了解品牌。
- 网站分析：使用Playwright访问用户的网站。提取品牌颜色、排版（字体）和核心价值主张。
- 素材请求：向用户索要Logo和图标。指定需要清晰、透明、紧密裁剪的PNG或SVG格式。
- 视频类型选择：询问这是100%动效图形视频还是混合类型（例如，创始人讲述 + Hyperframes动效图形）。
2. 计划阶段（艺术指导）
在编写HTML之前，切勿开始。
- 生成艺术指导：基于艺术指导模板创建
ART_DIRECTION.md文档。 - 场景分解：定义视频的每一秒，指定视觉动作、镜头运动、缓动函数和音效。
3. 实现（高级动效设计）
应用精英级别的动效设计原则。请参考动效设计模式中的代码片段。
- Apple风格镜头：使用大幅宏缩（macro zooms）和快照缩放（snap-zooms）（使用
back.out缓动）。 - 擦除揭示：使用滑动标志分阶段改变文字透明度，“吃掉”文字。
- 碰撞/粉碎：使用GSAP scatter实现物理冲击效果。
- 玻璃拟态：使用
backdrop-filter: blur(40px)创建高级UI元素。 - 打字机物理效果：弹跳的文本元素推动光标。
4. 音效设计（SFX）
- 购物清单：根据故事板向用户提供“音效设计购物清单”。
- 同步：使用
<audio data-start="...">标签完美匹配GSAP触发点。
5. 验证与故障排除
- 常见陷阱：查看“关键陷阱”以避免常见的Hyperframes错误（持续时间不匹配、目标缺失等）。
- FFmpeg：如果渲染失败，指导用户在本地安装FFmpeg。
最佳实践
- 原子化场景：保持场景模块化，并严格通过
data-start和data-duration管理。 - 可见性管理：对场景切换使用
autoAlpha，确保干净的搜索定位。 - 布局 vs. 变换：使用物理尺寸进行flexbox间隙，使用变换实现视觉效果。