HyperFrames Compose 是一个用于制作 HTML 视频内容的能力，适用于被要求构建任何基于 HTML 的视频内容时使用。其核心思路是：HTML 是视频的唯一事实来源。一个 composition 是一个 HTML 文件，包含用于计时的 data-* 属性、用于动画的 GSAP 时间线，以及用于外观的 CSS；框架本身负责处理片段可见性、媒体播放和时间线同步。
用途与思路 在编写 HTML 之前，应当先在高层思考：What（观众应体验到什么，识别叙事弧线、关键时刻与情绪节拍）、Structure（多少个 composition、哪些是子 composition 还是内联、哪些轨道承载视频、音频、叠加层、字幕）、Timing（哪些片段决定时长、转场落在哪里、节奏如何）、Execute（再按规则实现）。对于小改动（改颜色、调时间、加一个元素），可直接跳到规则部分。当未提供 visual-style.md 或动画方向时，遵循 house-style.md 的动效默认值、尺寸和调色板。
数据属性 所有 Clip 通用属性中，id 必填且需唯一；data-start 必填，为秒数或 clip ID 引用（如 "el-1"、"intro + 2"）；data-duration 对 img/div/composition 必填，单位为秒，video/audio 默认取媒体时长；data-track-index 必填，为整数，同轨道片段不可重叠；data-media-start 可选，表示裁入源素材的偏移秒数；data-volume 可选，取值 0-1，默认 1。需注意 data-track-index 不影响视觉层叠，视觉层叠使用 CSS z-index。
Composition Clip 属性中，data-composition-id 必填且唯一；data-duration 必填，优先于 GSAP 时间线时长；data-width / data-height 必填，为像素尺寸（1920x1080 或 1080x1920）；data-composition-src 可选，指向外部 HTML 文件路径。
结构约定 每个 composition 是一个包裹着带 data-composition-id 的 div 的 template，且每个都必须包含自己的 GSAP script 并注册其时间线。示例中在 template 内定义 div，内联 style 使用作用域选择器，引入指定版本的 GSAP CDN 脚本，并将 gsap.timeline({ paused: true }) 注册到 window.__timelines 中对应 composition id 下。在根级通过带 data-composition-src 的元素加载。
视频与音频 video 必须 muted 且 playsinline，音频始终是独立的 audio 元素。示例中 video 与 audio 使用同一 src，分别设置 data-start、data-duration、data-track-index，audio 设置 data-volume。
时间线契约 所有时间线以 paused: true 开始，由播放器控制播放；必须为每个时间线注册到 window.__timelines；框架会自动嵌套子时间线，不要手动添加；时长来自 data-duration，而非 GSAP 时间线长度；绝不要用空 tween 来设置时长。
不可协商的规则 必须确定性：不使用 Math.random()、Date.now() 或基于时间的逻辑，渲染器每次必须产出完全相同的结果。GSAP 只应动画视觉属性（opacity、x、y、scale、rotation、color、backgroundColor、borderRadius、transforms），不要动画 visibility、display，也不要调用 video.play()/audio.play()。不要让多个时间线同时动画同一元素的同一属性，否则在无头渲染中会闪烁。
明确禁止事项 不要忘记注册 window.__timelines；不要用 video 承载音频（应使用 muted video 加独立 audio）；不要把 video 嵌在带计时的 div 中（应使用非计时 wrapper）；不要使用 data-layer（应用 data-track-index）或 data-end（应用 data-duration）；不要动画 video 元素尺寸（应动画 wrapper div）；不要对媒体调用 play/pause/seek（播放由框架掌控）；不要创建缺少 data-composition-id 的顶层容器。
编辑已有 composition 先完整阅读 composition，匹配现有字体、颜色与动画模式；只改动被要求的部分，不要重写未触及的区块；小改动不要重写整个文件；保持无关片段的时间安排。
排版与资源 每个 composition 自行加载字体（在 style 中 @import 或 @font-face）。本地字体使用 font-display: block，因为渲染器需要在捕获前完成字体加载。从外部 URL 加载的媒体加 crossorigin="anonymous"。最小可读文字为横屏 20px、竖屏 18px。对于可能溢出容器的动态文本，使用 window.__hyperframes.fitTextFontSize(text, { maxWidth, fontFamily, fontWeight }) 计算可放入一行的最大字号，返回 { fontSize, fits }，选项包括 baseFontSize（默认 78）、minFontSize（默认 42）、step（默认 2），fontFamily 与 fontWeight 必须与元素 CSS 一致。所有文件（视频、音频、字体、图片）与 index.html 放在项目根目录；子 composition 用 ../ 引用根文件。
相关参考 PiP、标题卡与幻灯片模式见 patterns.md；数据、统计与信息图见 data-in-motion.md；打字机文本及其他 GSAP 动画效果见 gsap-effects 技能；音频驱动动画（节拍同步、发光、脉冲）见 audio-reactive 技能。
输出检查清单 每个顶层容器都有 data-composition-id；每个 composition 都有 data-width、data-height、data-duration；composition 位于独立 HTML 文件并通过 data-composition-src 加载；子 composition 有 template 包裹；每个 composition 都注册 window.__timelines；100% 确定性无随机；每个 composition 都包含指定 GSAP 脚本；npx hyperframes lint 与 npx hyperframes validate 均 0 错误（打开 studio 前先运行两者）。