用途
HyperFrames 把 HTML 作为视频的唯一事实来源。一个合成就是一个 HTML 文件：用 data-* 属性声明时序，用 GSAP 时间线驱动动画，用 CSS 控制外观。框架本身负责片段可见性、媒体播放和时间线同步。它适合需要以代码方式生成整段视频的场合——从标题卡、叠加层、字幕到完整的成片工作流。
主要能力
- 视频合成：创建视频组合、动画、标题卡与叠加层。
- 字幕与旁白：添加与音频同步的字幕，生成文本转语音旁白。
- 音频响应式视觉：制作由音乐驱动的节拍同步、发光与脉冲动画。
- 动画文字高亮：标记笔扫过、手绘圆圈、爆发线条、涂鸦、素描等效果。
- 场景转场：交叉淡化、擦除、揭示、着色器转场。
- 编码辅助：内置 lint 与 validate 检查（含 WCAG 对比度审计）、动画映射脚本，用于核查编排、停滞区与元素生命周期。
使用方式
在开始写 HTML 之前，先确定视觉身份。若项目里存在 DESIGN.md 或 visual-style.md，按其定义的颜色、字体与动效规则执行；若用户指定了风格名称，可参考内置的 8 个命名预设并生成一份最小 DESIGN.md；都没有时，需先就情绪、明暗画布、品牌色与字体提出 3 个问题再动手。
布局先于动画：先把每个元素在“最可见的一帧”中的位置用静态 HTML+CSS 写好，场景内容容器用 flex 与 padding 定位，绝对定位仅留给装饰元素；然后用 gsap.from() 做入场动画（从画外/不可见动画到 CSS 位置），用 gsap.to() 做退场动画。
核心数据属性包括 id、data-start、data-duration、data-track-index、data-media-start、data-volume。轨道索引不影响视觉层级，视觉层级用 CSS z-index。视频必须 muted playsinline，音频始终作为独立的 audio 元素存在。
时间线契约：所有时间线以 paused: true 启动，播放由播放器控制；每个时间线都要注册到 window.__timelines["<composition-id>"]；子时间线由框架自动嵌套；时长取自 data-duration 而非 GSAP 时间线长度。
硬性规则包括：禁止非确定性逻辑，需要伪随机时使用带种子的 PRNG；GSAP 只动画视觉属性，不动画 visibility/display，也不调用 media 的 play/pause；同一元素同一属性不得被多条时间线同时动画；禁止 repeat: -1，需按合成时长算出有限重复次数；时间线必须同步构建，不可放在 async/await、setTimeout 或 Promise 里。
场景转场同样不可商量：多场景合成必须在场景之间使用转场，不做跳切；每个场景的每个元素都要有入场动画；除最终场景外一律不做退场动画，转场本身就是退场。
适用场景
适用于任何要求用 HTML 构建视频内容的任务：需要与音频同步的字幕、需要文本转语音旁白、需要随音乐做节拍同步的动画、需要动画文字高亮、或需要在场景之间加入转场的项目。同时覆盖合成编写、时序、媒体与完整的视频制作流程。
限制
CLI 命令（init、lint、preview、render、transcribe、tts）不在本技能内，需参考 hyperframes-cli 技能。output checklist 要求 npx hyperframes lint 与 npx hyperframes validate 均通过，并处理对比度告警与动画编排核查。validate 默认运行 WCAG 对比度审计，会跳到 5 个时间点截图并采样文本背后的背景像素计算对比度，可用 --no-contrast 跳过迭代期间的检查。关于支持的字体列表、渲染引擎细节、平台兼容性与收费信息，资料中暂未提供。