HyperFrames 是一个以 HTML 为视频源文件的视频合成框架。一个合成就是一个 HTML 文件：用 data-* 属性定义时间，用 GSAP 时间线定义动画，用 CSS 定义外观。框架本身负责片段可见性、媒体播放和时间线同步。它适合制作视频合成、动画、标题卡、叠加层、字幕、配音、音频响应视觉效果和场景转场。
用途与结构：在编写 HTML 前，建议先想清楚叙事弧线、关键节点和情绪节奏；确定需要多少合成、哪些是子合成、哪些内联，以及各轨道承载什么内容（视频、音频、叠加层、字幕）；确定哪些片段决定时长、转场落点与节奏；先构建最终布局，再添加动画。对于小修改（改颜色、调时间、加一个元素），可以直接按规则操作。
视觉标识检查：按顺序检查项目中的 DESIGN.md、visual-style.md，或用户指定的风格（如“Swiss Pulse”“暗黑科技”“奢华品牌”）。命名风格可参考 visual-styles.md 中的 8 个预设。若以上都没有，需先询问三个问题：氛围（爆炸/电影感/流畅/技术/混乱/温暖）、浅色或深色画布、品牌色/字体/视觉参考，然后生成一份最小 DESIGN.md。每个合成的配色与字体都必须能追溯到 DESIGN.md、visual-style.md 或用户明确指示。动效默认值、尺寸、入场模式和缓动遵循 house-style.md。
先布局后动画：先定位每个元素在最可见时刻的位置，写成静态 HTML+CSS，暂不用 GSAP。原因是：若从动画起始状态（屏幕外、缩放为 0、透明度 0）补间到“以为”的落点，最终布局是猜的，重叠在渲染前不可见。流程是：找出每个场景的英雄帧（最多元素同时可见的时刻），为该帧写静态 CSS；.scene-content 容器必须用 width:100%; height:100%; padding:Npx; display:flex; flex-direction:column; gap:Npx; box-sizing:border-box 填满场景，用 padding 向内推内容，绝不用 position:absolute; top:Npx 定位内容容器；仅装饰元素可用绝对定位。入场用 gsap.from() 从屏幕外/不可见动画到 CSS 位置；退场用 gsap.to() 从 CSS 位置动画到屏幕外/不可见。
数据属性：所有片段需要 id、data-start（秒或片段 ID 引用）、data-duration（img/div/合成必需，视频/音频默认取媒体时长）、data-track-index（整数，同轨道片段不能重叠）；可选 data-media-start（裁剪偏移）、data-volume（0-1，默认 1）。data-track-index 不影响视觉层级，视觉层级用 CSS z-index。合成片段需要 data-composition-id、data-start、data-duration（优先于 GSAP 时间线时长）、data-width/data-height，可选 data-composition-src（外部 HTML 路径）。通过 data-composition-src 加载的子合成使用 <template> 包裹；独立合成（主 index.html）不使用 <template>，直接把 data-composition-id 的 div 放在 <body> 中，否则内容会被隐藏并破坏渲染。
视频与音频：视频必须 muted playsinline，音频始终是单独的 <audio> 元素。所有时间线以 { paused: true } 开始，播放由播放器控制；每个时间线都要注册到 window.__timelines["<composition-id>"]；框架自动嵌套子时间线，不要手动添加；时长来自 data-duration，而不是 GSAP 时间线长度；不要创建空补间来设置时长。
不可协商的规则：确定性——禁止 Math.random()、Date.now() 或基于时间的逻辑，需要伪随机时用种子 PRNG（如 mulberry32）；GSAP 只动画视觉属性（opacity、x、y、scale、rotation、color、backgroundColor、borderRadius、transforms），不要动画 visibility、display，也不要调用 video.play()/audio.play()；同一元素的同一属性不能同时被多个时间线动画；不要用 repeat: -1，无限重复会破坏捕获引擎，应按合成时长计算精确重复次数 repeat: Math.ceil(duration / cycleDuration) - 1；时间线构建必须同步，不能在 async/await、setTimeout 或 Promise 内构建，捕获引擎在页面加载后同步读取 window.__timelines，字体由编译器嵌入，无需等待字体加载。不要忘记注册 window.__timelines；不要用视频处理音频（始终静音视频+单独 <audio>）；不要将视频嵌套在带时间的 div 中，应使用非定时包装器；不要用 data-layer（用 data-track-index）或 data-end（用 data-duration）；不要动画视频元素尺寸，应动画包装 div；不要调用媒体的 play/pause/seek，播放由框架管理；不要创建没有 data-composition-id 的顶层容器；不要在任何时间线或补间上使用 repeat: -1；不要异步构建时间线；不要对后续场景的片段元素使用 gsap.set()（页面加载时它们不在 DOM 中），应在时间线内该片段 data-start 时间或之后用 tl.set(selector, vars, timePosition)；内容文本不要用 <br>，让文本通过 max-width 自然换行，例外是每个词故意单独成行的短展示标题。
场景转场（不可协商）：每个多场景合成必须遵守以下所有规则：场景之间始终使用转场，不能跳切；每个场景每个元素都必须入场动画（gsap.from()），不能有元素完整出现；除最终场景外，绝不使用退场动画——转场就是退场，转场开始时 outgoing 场景内容必须完全可见；只有最终场景可以淡出元素（如淡入黑）。
动画护栏：首个动画偏移 0.1-0.3 秒（非 t=0）；每个场景入场补间至少使用 3 种不同缓动；同一场景内不要重复入场模式；深色背景避免全屏线性渐变（H.264 色带，改用径向或纯色+局部光晕）；渲染视频中标题 60px+、正文 20px+、数据标签 16px+；数字列使用 font-variant-numeric: tabular-nums。未提供 visual-style.md 或动画方向时，遵循 house-style.md 的美学默认值。
字体与资源：CSS 中直接写所需 font-family，编译器自动嵌入支持的字体，不支持的会警告；外部媒体加 crossorigin="anonymous"；动态文本溢出可用 window.__hyperframes.fitTextFontSize(text, { maxWidth, fontFamily, fontWeight })；所有文件位于项目根目录与 index.html 同级，子合成使用 ../ 引用。
编辑现有合成：先完整阅读合成，匹配现有字体、颜色、动画模式；只改要求改的内容；保留无关片段的时间。
输出检查清单：npx hyperframes lint 与 npx hyperframes validate 均通过；处理对比度警告；验证动画编排。质量检查中的对比度：hyperframes validate 默认运行 WCAG 对比度审计，会跳到 5 个时间点、截图、采样每个文本元素背后的背景像素并计算对比度，失败会以警告显示。若出现警告：深色背景提亮失败颜色直到达到 4.5:1（普通文本）或 3:1（大文本，24px+ 或 19px+ 粗体）；浅色背景则加深；保持在配色家族内，不要发明新颜色；重新运行 validate 直到干净；快速迭代时可用 --no-contrast 跳过。动画映射：编写动画后运行 node skills/hyperframes/scripts/animation-map.mjs <composition-dir> --out <composition-dir>/.hyperframes/anim-map，输出 animation-map.json，包含每个补间摘要、ASCII 甘特图、交错检测、死区、元素生命周期、场景快照和标记（屏幕外、碰撞、不可见、节奏过快/过慢）。阅读 JSON，检查每个标记，修复或说明，验证时间线节奏，修复后重跑。小修改可跳过，新合成和重大动画改动需运行。
按需参考：references/captions.md（与音频同步的字幕、歌词、卡拉OK，音调自适应样式检测、逐词样式、文本溢出预防、字幕退场保证、词分组）；references/tts.md（Kokoro-82M 文本转语音，语音选择、速度调优、TTS+字幕工作流）；references/audio-reactive.md（音频响应动画：将频带和振幅映射到 GSAP 属性）；references/css-patterns.md（CSS+GSAP 标记高亮：高亮、圈选、爆发、涂鸦、草图，确定性且可完全寻址）；references/typography.md（排版：字体搭配、OpenType 特性、深色背景调整、字体发现脚本）；references/motion-principles.md（动效设计原则：缓动即情绪、时间即重量、编排即层级、场景节奏、环境动效、反模式）；visual-styles.md（8 个命名视觉风格）。
限制：暂未提供具体要求、收费、价格、平台或效果信息。