HyperFrames 把 HTML 当作视频的唯一事实来源：一个合成就是一个 HTML 文件，用 data-* 属性定义时间，用 GSAP 时间轴做动画，用 CSS 控制外观，框架负责片段可见性、媒体播放与时间轴同步。
用途：制作视频合成、动画、标题卡、叠加层、字幕、配音、音频可视化与场景转场。
主要能力：支持根合成与通过 data-composition-src 加载的子合成；用 data-start、data-duration、data-track-index 等属性编排片段；视频必须 muted playsinline，音频单独用 <audio> 元素；支持变量化合成，在 <html> 上用 data-composition-variables 声明 string/number/color/boolean/enum 变量，脚本内用 window.__hyperframes.getVariables() 读取，渲染时用 npx hyperframes render --variables '{...}' 或 --variables-file 覆盖，子合成可用 data-variable-values 按实例传值。
使用方式：先确定设计系统（读取 design.md/DESIGN.md，或从预设与设计选择器生成），再做提示扩展与规划，遵循“先布局后动画”——先写元素最完整可见时的静态 HTML+CSS，再用 gsap.from() 做入场、gsap.to() 做退场。所有时间轴以 paused: true 创建并注册到 window.__timelines["<composition-id>"]，时长以 data-duration 为准。开发预览用 npx hyperframes preview，渲染用 npx hyperframes render --output q4.mp4，CI 可用 --strict-variables。
限制：必须确定性，禁用 Math.random()、Date.now() 等；只动画视觉属性，不动画 visibility/display，不调用媒体 play/pause/seek；禁止 repeat: -1，需按合成时长计算有限重复次数；时间轴必须同步构建，不能放在 async/setTimeout/Promise 中；多场景必须使用转场与入场动画，除最终场景外不使用退场动画；不要用 <br> 强制换行。具体收费、平台与效果资料暂未提供。