HyperFrames Core 是 HyperFrames 体系中的核心技术技能，用于构建一个完整的、可渲染的 HTML 视频合成项目。它的核心目标是将 HTML 文档转化为可寻址、可渲染的视频时间线。
用途
该技能定义了 HyperFrames 合成项目的技术契约：一个合成就是一个 HTML 文件，其 DOM 通过 data-* 属性声明时间信息，动画运行时必须是可寻址的，媒体播放由框架统一管理。它适用于需要以编程方式构建视频内容的场景，例如设计代理生成动态视频、自动化视频渲染流程等。
主要能力
- 合成结构定义：支持独立合成（顶层 index.html）与子合成（通过 data-composition-src 加载，需用
<template>包装）两种根形式。 - 时间属性体系：通过 data-* 属性（如 data-start、data-duration、data-track-index）控制片段的时间窗口与轨道分层，使用 class="clip" 标识可定时片段。
- 时间线注册：每个合成必须注册一个暂停的 GSAP 时间线到
window.__timelines["<id>"]，键名需与根节点的 data-composition-id 一致。 - 子合成支持：支持子合成的嵌套、宿主属性配置、<template> 包装及实例变量。
- 媒体管理：支持 <video>/<audio> 元素的放置、音量设置与裁剪，框架会自动查找并解码任意嵌套深度的媒体。
- 确定性规则：禁止渲染时时钟、未播种的 Math.random、网络请求等，确保时间线可寻址。
- 编辑操作：提供剪辑、裁剪、重排、变速、冻结、摄像机、蒙版、交叉淡化、音频编辑等配方及其限制。
- 验证工具：提供 lint 检查、快照预览、时间线列表等命令行工具，帮助发现和修复问题。
使用方式
构建流程包括：创建合成骨架（参考 minimal-composition.md）、编写 DOM 结构与 data-* 属性、注册时间线、放置媒体元素、配置子合成（如有）、运行 npx hyperframes check 进行验证、使用 npx hyperframes snapshot 检查关键帧、通过 npx hyperframes preview 预览，最后在用户确认后执行 npx hyperframes render 渲染。编辑现有合成时，建议使用 npx hyperframes timeline 查看时间线结构，而不是手动阅读所有文件。
适用场景
适用于需要通过 HTML 与动画运行时程序化生成视频的项目，尤其适合设计代理、自动化内容生产、动态图形渲染等场景。子合成机制适合模块化构建复杂视频项目。
限制
- 合成根节点必须设置尺寸（width/height: 100%），画布尺寸由 data-width/data-height 决定，不能硬编码 1920px/1080px。
- 禁止在 <video>/<audio> 上使用 crossorigin 属性。
- 禁止将动画作用于 .clip 元素（如 autoAlpha、visibility），应改为动画子元素。
- 禁止 CSS 初始变换与 GSAP 补间同时作用于同一属性，应使用 fromTo。
- 每个 <audio> 必须有 id，否则渲染静音。
- 子合成宿主、模板与时间线键的 id 应保持一致。
- 合成中禁止使用渲染时时钟、未播种随机数、网络请求等非确定性操作。
- 片段的 data-start 不能同时存在于视频及其祖先元素上。
- 超出根 data-duration 的片段会被截断，需同步延长根时长。
- 命名 CSS 字体需要文件内 @font-face 指向本地文件。
- 使用着色器过渡或 HDR 媒体时，全屏填充需放在全幅子元素上，而非合成根。
更多细节请参阅各级参考文件，包括 data-attributes.md、tracks-and-clips.md、determinism-rules.md 等。