HyperFrames 动态润色 是做什么的？
当视频已存在但需要提升高级感和流畅度时使用此技能。
片段诊断
将时间线划分为 3 到 5 秒的区块：
- 观众应在此片段中理解什么？
- 哪个元素获得了焦点？
- 光标是否点击了正确的目标？
- 该组件在点击之前是否已经出现？
- 是否存在没有动作的长时间停顿？
- 是否有任何文本或图像被裁剪？
高影响力调整
- 将点击反馈移近光标接触点。
- 缩短福利与价格之间的停顿。
- 对 UI 滚动使用
power3.inOut。 - 对文本和卡片入场使用
power2.out或power3.out。 - 避免子动画与父容器滚动发生冲突。
- 对点击目标应用 1.015 到 1.035 之间的小幅聚焦缩放。
- 使用临时阴影引导视线。
常见修复
光标点击空白区域
- 将点击延迟到组件完全进入之后。
- 根据 DOM 边界框重新计算
x/y。 - 如果容器滚动，在滚动后（而非滚动前）验证位置。
文本重叠
- 增加入场之间的间隔。
- 减小区块缩放比例，而不仅仅是字体大小。
- 减少每帧的可见副本。
- 确保卡片和按钮具有固定高度。
无生气的轮播图
- 使轮播图通过
y、opacity和轻微scale显现出来。 - 在水平轴上设置动画，并在中央卡片上暂停。
- 对选中的卡片应用微妙的缩放。
- 移除原网站上不存在的边框或阴影。
静态片段
- 将停顿转化为微动态：轻微视差、微妙呼吸、光标准备下一步操作。
- 在没有重要阅读内容的地方缩短停留时间。
- 以更紧凑的顺序展示福利和价格。
CTR 检查清单
- 产品尽早出现。
- 福利在价格之前出现。
- 价格出现在干净的屏幕上。
- CTA 获得视觉焦点。
- 光标展示引导路径，不显得随机。
- 过渡到结账听起来像是点击的结果。
验证
使用带有足够采样数的 npx hyperframes inspect：
npx hyperframes inspect ./project --samples 18
如果可能，在客户所批评的秒数处生成截图并审查：
- 第一帧；
- 第一次点击；
- 主要产品；
- 福利；
- 价格；
- 结账；
- 确认。
在重构 HTML 之前进行外科手术式的更改：调整时间、缓动函数、偏移量、缩放比例和透明度。