用途：HyperFrames 用 HTML 描述视频合成。一个合成就是一个 HTML 文件，通过 data-* 属性定义时间，用 GSAP 时间轴做动画，用 CSS 定外观；框架负责片段可见性、媒体播放与时间轴同步。可制作视频合成、动画、标题卡、叠加层、字幕、配音、音频响应可视化与场景转场。
主要能力：所有片段支持 id、data-start、data-duration、data-track-index 等属性，视频/音频支持裁剪偏移与音量；合成片段支持 data-composition-id、data-width/height 与外部 HTML 引用；提供 lint、validate、inspect 等检查命令，可检测布局溢出、WCAG 对比度问题，并可生成动画地图（animation-map.json）核对编排。
使用方式：先做视觉识别（读取 DESIGN.md、visual-style.md，或向用户确认风格），再按“先布局后动画”流程编写静态 HTML+CSS，最后用 gsap.from() 写入场、gsap.to() 写出场。时间轴须暂停并注册到 window.__timelines["<composition-id>"]，时长以 data-duration 为准。常用命令：npx hyperframes lint、npx hyperframes validate、npx hyperframes inspect（可用 --at、--samples、--json 等参数）。
限制与规则：不得使用 Math.random()、Date.now() 或异步方式构建时间轴；只能动画视觉属性；禁止 repeat: -1，需按合成时长计算重复次数；多场景必须使用转场，除最终场景外不得写退出动画；视频必须 muted playsinline 且音频使用独立 audio 元素；不得用 data-layer、data-end，不得动画视频元素本身。字体自动嵌入，缺失字体编译器会告警。