HyperFrames 超帧视频

要解决的问题

短视频制作经常卡在“HTML 动画很好，但没法稳定成片”。文字、字幕、网页、TTS 音频、音频可视化可以单独做，却难以同步到可交付的 MP4 或 WebM。HyperFrames 超帧视频 把页面当作视频源，用 data-* 属性定义时间轴，用 GSAP 控制动效，再逐帧捕获并编码。

工作方式

• 先定视觉规范：写代码前明确情绪、配色、字体、DESIGN.md，避免默认蓝灰与通用字体。
• 先做静态画面：先搭 hero frame 的 HTML/CSS 布局，确认内容不溢出，再加入 gsap.from() / gsap.to()。
• 处理多轨内容：支持 TTS、字幕、音频响应、场景转场、shader 转场与 CSS 转场。
• 校验与渲染：通过 lint、validate、inspect 检查结构、对比度和布局，最后输出视频并检查时长、音频与抽帧。

适用边界

它适合动态标题、字幕旁白、产品演示、社交封面和网页转视频；不适合数学公式动画、图片生成或实时直播。使用时要避免 repeat: -1、异步构建时间轴、手动调用 play()，并确保非英语 TTS/字幕环境满足依赖。