用途：HyperFrames 以 HTML 作为视频的唯一事实来源。一个组合就是一个 HTML 文件，用 data-* 属性定义时间，用 GSAP 时间线做动画，用 CSS 定义外观；引擎逐帧捕获页面，再通过 FFmpeg 编码为 MP4/WebM。它适合动态图形、带字幕的口播视频、产品导览、社交叠加层、着色器转场，以及任何由真实视频/音频驱动的动画。纯数学/公式动画应改用 manim-video，图像生成、直播推流不适用。
主要能力：提供 init 脚手架、lint 校验、validate 对比度审计、inspect 布局审计、preview 实时预览、render 渲染、doctor 环境诊断等命令；支持 TTS 生成旁白、transcribe 生成词级字幕、音频反应式视觉、标记式高亮与场景转场；支持 --quality draft|standard|high、--fps 24|30|60、--format mp4|webm、--docker、--strict 等渲染参数。
使用方式：先规划叙事、结构与视觉识别（需先定义 DESIGN.md 或向用户确认风格），再执行 npx hyperframes init my-video 脚手架，先写静态 hero frame 布局，再加 GSAP 入场/出场动画；时间线必须注册到 window.__timelines 并以 paused 启动，使用有限 repeat 值，保持确定性、同步构建。多场景必须使用转场，不用跳切。完成后依次运行 lint、validate、inspect、preview 与 render。
限制与注意：preview 是长期运行的 Next.js 服务并持有 Chrome 渲染 worker，在无 GPU 主机上会持续占用 CPU，用完需停止；repeat: -1 会破坏捕获引擎；不要对后进入的 clip 元素用 gsap.set()；不要自行调用 video.play() 或 audio.play()；不要用异步方式构建时间线；音频必须使用独立的 <audio> 元素。若渲染失败，运行 npx hyperframes doctor 并附上输出。具体收费、价格与平台支持情况暂未提供。