HyperFrames 操作手册：声明式时间线 + GSAP 动画

TL;DR

HyperFrames 是一个用 HTML 属性声明时间线、用 GSAP 驱动动画的视频合成框架。核心理念：两层分离——声明层（HTML属性）告诉时间轴元素何时存在，动画层（GSAP）告诉元素用什么动作出现/消失。支持子合成嵌套、Shader 过渡效果、stagger 波浪进场。

触发场景

• 需要用代码制作视频时间线时
• 需要批量生成视频模板时
• 需要与 Open Design 等 AI 前端协作时

行动步骤

1. 主时间线 index.html：通过 <link> 和 <script type="application/hyperframes" src="..."> 引入子合成

1. 子合成 HTML：用 data-* 属性声明时间位置（data-start/data-duration/data-track-index）

1. 动画层：在 .js 中用 GSAP timeline 控制动画：tl.from() 进场 / tl.to() 退场 / tl.fromTo() 明确起点终点

1. 注册 timeline：window.__timelines["name"] = tl

1. 特效：Shader 过渡效果（flash-through-white/liquid-wipe/cross-warp-morph/chromatic-split）

1. Open Design 协作：用 hyperframes-handoff skill 生成结构正确的 HyperFrames 合成 HTML

证据

Open Design 是开源"Claude Design 替代版"，专门帮你起草 HyperFrames 项目初稿。流程：UI 选 skill 写 brief → AI CLI 生成 → 输出结构正确的 HTML + DESIGN.md → 用 hyperframes lint 验证

失败边界

• data-start 是主时间线的绝对时间，不是独立时间线
• 子合成里元素直接对应主时间线上的时间点
• Shader 效果需要安装：npx hyperframes add <effect-name>
• 不支持复杂特效合成（建议用 After Effects）

原理

HTML = 放什么素材，Script = 怎么放。声明层通过 data-* 属性让时间轴知道元素何时存在，动画层通过 GSAP timeline 驱动元素的出现方式。子合成通过链接进入主时间线，像 img 标签引用图片一样简单。

使用记录

| 日期 | 项目/场景 | 结果 | 备注 |

|------|----------|------|------|

| 2026-05-17 | HyperFrames操作大全 | confirmed | 声明式时间线 |