HyperFrames 商业视频
请在使用 mobile-dom-fidelity 检查网站后使用此技能。
视频结构
- 简短标题的片头。
- 滚动或进入轮播。
- 核心产品亮点。
- 模拟产品点击。
- 主要优势。
- 价格。
- 用户选择。
- 购物车或结账。
- 行动召唤或最终确认。
互动旅程
视频应感觉像真实的浏览过程，而非幻灯片序列。 将每个动作建模为因果关系：
- 滚动揭示该部分；
- 轮播切换产品；
- 主卡片回到中心；
- 光标点击卡片；
- 产品页面进入；
- 优势出现；
- 价格和行动召唤获得焦点；
- 点击引导至购物车或结账；
- 最终显示结论或确认。
构图规则
- 竖屏格式：
1080x1920。 - 使用从 DOM 提取的真实文本。
- 使用本地资源或允许的 URL。
- 在
window.__timelines中注册暂停的 GSAP 时间线。 - 避免在渲染时进行网络请求。
- 避免使用非确定性的
Date.now()和Math.random()。 - 每次动画点击必须命中可见的组件。
动画模式
- 标题：平滑的打字效果，不要过快。
- 卡片：通过
y、opacity和轻微的scale进入。 - 轮播：水平移动，并在主卡片上暂停。
- 点击：光标、涟漪、微缩放和聚焦阴影。
- 屏幕切换：从右到左的横向过渡。
- 产品：主图像轻微缩放，优势交错进入。
点击映射
在动画化点击之前，注册：
target selector:
visible from:
click time:
target rect:
click x/y:
post-click scene:
如果出现以下情况，则不应接受该点击：
- 目标仍然不可见；
- 目标在视口之外；
- 另一个覆盖层遮盖了目标；
- 在进入动画完成之前光标就已到达。
必需的验证
交付前：
npx hyperframes lint ./project
npx hyperframes validate ./project
npx hyperframes inspect ./project --samples 18
如果存在模拟点击，还需要验证：
- 目标存在；
- 目标在点击时间戳时可见；
- 点击中心在边界框内；
- 无破损图像；
- 关键帧中无文本重叠。
预期输出
- 合成文件
index.html； - 渲染的 MP4 视频；
- 验证摘要；
- 整洁的交付文件夹（如果需要）。