• Y AnimationPlayground
研究工作台
  • 实验总览
    • 生产与选型
    • HyperFrames 原理
示例库
  • 示例总览
  • Three.js 示例
  • Shader 示例
  • 代码视频示例
项目
  • 版本记录
GitHubX (Twitter)

HyperFrames 功能与制作原理

当前研究结论

理解它在视频生产链中的真实位置、时间如何变成帧,以及为什么可渲染不等于专业成片。

查看实际示例查看 Remotion 对比
它不是 AI 视频模型,而是一套可寻址的浏览器视频工程。
HyperFrames 把 Web 页面当作画面,把秒当作时间坐标,把浏览器当作渲染舞台。 Agent 可以生成工程,Studio 可以审查时间线,CLI 可以逐帧捕获并编码;但脚本、导演、设计和审美判断不会因此自动完成。
HTML / CSS / SVGSeek-safe GSAPStudio timelineBrowser renderer

输入

事实 · 脚本 · 素材 · 音轨

创作

合成

HTML 场景 · GSAP 时间线

seek

浏览器

在时间 t 绘制确定画面

逐帧

输出

视频帧 · 混合音频 · 编码文件

它具体提供什么

它提供的是一组从“可编辑 Web 画面”到“确定性视频文件”的工程能力,而不是一个替你完成所有创意判断的黑箱。

把 Web 技术变成视频画面

直接使用 HTML、CSS、SVG、Canvas、WebGL 与本地媒体构建镜头,不需要先转换成另一套视觉描述语言。

用秒组织可寻址时间线

每个片段声明开始时间、持续时间与轨道;暂停的 GSAP timeline 负责把任意时刻映射到确定的视觉状态。

组合多个独立镜头

主合成通过 data-composition-src 挂载子合成,让场景、音轨和转场可以分别检查、替换与复用。

在 Studio 中预览与审查

可视化时间轴支持播放、seek、分层查看与元素检查,适合在渲染前完成镜头和声音的人工门禁。

执行面向视频的自动检查

CLI 可以检查合成契约、运行时错误、布局溢出、文字遮挡、对比度与指定时间点的关键帧。

从浏览器状态渲染成片

渲染器逐帧驱动浏览器、捕获画面、混合音频,再交给编码器输出 MP4、WebM、MOV 或图片序列。

一条视频如何从时间变成帧
核心不是“让网页自己播放”,而是渲染器主动询问每一个时间点应该长什么样。
0.00s1.00s2.00s
拖动时间线总长 2.00s · 30 fps
请求帧
frame 18
换算时间
0.600s
时间线状态
保持与移动
确定性结果
相同 frame → 相同画面
frame n → t = n / fps → timeline.seek(t) → browser paint → capture → encode

HTML 决定有什么

DOM、样式、图片、视频、SVG 与 Canvas 组成某个镜头可被浏览器绘制的视觉树。

时间线决定此刻是什么状态

paused GSAP timeline 接受任意秒数,计算位置、透明度、裁切、滤镜和其他属性。

渲染器决定如何成为文件

每一帧都从明确的 t 重新求值、捕获,再与音轨一起交给编码器,不依赖实时播放速度。

完整生产链

HyperFrames人工门禁

工具主要承担镜头合成、时间线、检查和渲染;事实、素材与声音判断即使可以由 Agent 辅助,也不能取消独立验收。

  1. 01

    事实与脚本

    人工门禁

    确定产品事实、受众、叙事主张、时长和不可虚构的边界。

  2. 02

    素材清单

    人工门禁

    收集官网画面、录屏、图片、字体、旁白、音乐和音效,并记录来源。

  3. 03

    镜头合成

    HyperFrames

    把叙事拆成独立 HTML 子合成,明确每个镜头的进入、动作、退出与交接载体。

  4. 04

    时间线

    HyperFrames

    使用 paused GSAP timeline 描述每个时刻的状态,避免随机数、定时器和不可 seek 动画。

  5. 05

    声音编排

    人工门禁

    把旁白作为节奏主轴,音乐提供能量曲线,音效只强化有因果关系的操作。

  6. 06

    检查与审片

    HyperFrames

    运行 lint、check、snapshot,并在 Studio 中完整播放、逐段 seek、检查接缝。

  7. 07

    逐帧渲染

    HyperFrames

    按 FPS 计算时间、驱动浏览器绘制每一帧、编码视频并验证最终媒体参数。

为什么“一次生成”很难稳定成为专业方法
工程规则擅长消灭确定性错误;专业完成度来自大量无法仅靠规则证明的连续判断。
质量维度HyperFrames / Agent 擅长仍需人工主导
信息正确从页面和仓库提取文字、图片、录屏与数据判断哪些事实值得进入叙事,以及怎样避免内容堆砌
镜头设计快速生成布局、图层和时间线初稿控制视觉重心、空间层级、镜头目的与观看路径
运动品质精确执行缓动、stagger、遮罩、相机和路径动画统一速度语言,处理重量感、停顿、预备动作与余韵
场景接缝提供可复用的转场技术和逐帧时间控制选择连续载体,匹配速度、方向、构图和声音的相位
声音设计挂载多轨音频、自动 duck、淡入淡出并参与渲染旁白表演、音乐选择、混音层次和情绪推进仍需听觉判断
最终完成度批量快照、布局检查和确定性渲染能消灭技术性错误字体、裁切、对比、密度与每一帧是否“高级”无法只靠规则证明

信息正确

HyperFrames / Agent 擅长
从页面和仓库提取文字、图片、录屏与数据
仍需人工主导
判断哪些事实值得进入叙事,以及怎样避免内容堆砌

镜头设计

HyperFrames / Agent 擅长
快速生成布局、图层和时间线初稿
仍需人工主导
控制视觉重心、空间层级、镜头目的与观看路径

运动品质

HyperFrames / Agent 擅长
精确执行缓动、stagger、遮罩、相机和路径动画
仍需人工主导
统一速度语言,处理重量感、停顿、预备动作与余韵

场景接缝

HyperFrames / Agent 擅长
提供可复用的转场技术和逐帧时间控制
仍需人工主导
选择连续载体,匹配速度、方向、构图和声音的相位

声音设计

HyperFrames / Agent 擅长
挂载多轨音频、自动 duck、淡入淡出并参与渲染
仍需人工主导
旁白表演、音乐选择、混音层次和情绪推进仍需听觉判断

最终完成度

HyperFrames / Agent 擅长
批量快照、布局检查和确定性渲染能消灭技术性错误
仍需人工主导
字体、裁切、对比、密度与每一帧是否“高级”无法只靠规则证明

30 分、60 分与 90 分的分界

这是本项目基于三次产品视频实验建立的内部评价标尺,不是 HyperFrames 官方评分。

30–40 分概念样片

叙事方向可理解,功能都出现了,时间线也能完整播放;但镜头语言、细节密度和声音仍暴露明显的生成痕迹。

本项目当前三支生成式产品片所处区间

60 分合格成片

信息准确、节奏连贯、视觉统一、接缝无明显破绽,普通观众不会首先注意到制作缺陷。

需要至少一轮结构修订与一轮逐段精修

90 分超出预期

镜头本身有作者判断,素材与动效互相成就,声音推动叙事,关键瞬间具有可记忆的设计。

需要导演式分镜、专门资产和逐帧审美验收

三次实验的判断依据
评分不是由“是否渲染成功”决定,而是把每支片暴露出的主要缺陷映射到质量维度。

TanStarter 初版

事实正确性
tanstarter-promo

产品事实源选错,同名项目混淆;即使画面可播放,叙事基线已经失效。

TanStarter 参考片重制

运动与接缝
tanstarter-reference-promo

视觉方向明显改善,但接缝、局部运动和信息层级仍没有达到参考片的流畅度。

Eagle 产品演示

镜头完成度
eagle-product-demo

能够表达功能与大致思路,但官方素材、代码动效和声音之间缺少逐镜头精修。

更可靠的下一版工作方式
不再要求一次提示交付全片,而是把最贵的审美判断提前暴露、逐层锁定。
1

结构样片

只验证事实、脚本、旁白和镜头顺序

门禁:关闭精细视觉制作,先确认这条故事值得做

2

动态预演

用低成本素材验证节奏、机位、转场和时长

门禁:所有接缝都能在灰盒阶段说清因果关系

3

英雄镜头

先把最关键的 2–3 个镜头做到目标品质

门禁:以真实关键帧锁定字体、材质、运动和细节标准

4

全片精修

按已经证明的标准扩展到全部镜头并完成混音

门禁:检查器消灭技术问题,人逐帧决定是否足够好

适合继续使用 HyperFrames
  • 视觉材料天然来自网页、SVG、数据或产品界面。
  • 需要 Agent 直接读写、可检查、可重复的代码工程。
  • 团队愿意把分镜、关键镜头和最终审片作为独立人工步骤。
  • 目标是中短产品演示、动态图形、版本介绍或数据叙事。
不应该只靠 HyperFrames 插件
  • 期待一句提示稳定生成 90 分品牌宣传片。
  • 主要价值来自真人表演、复杂摄影、写实特效或情绪化剪辑。
  • 没有人负责素材导演、节奏判断、混音和逐帧完成度。
  • 把自动检查通过误认为审美质量已经通过。
当前结论:保留 HyperFrames 作为渲染与编排层,不再把插件本身当作完整制作方法论。
下一轮真正值得验证的不是“能否再生成一支”,而是结构样片、英雄镜头定标、分段精修和最终审片这套多阶段流程,能否稳定把作品从 30–40 分推到 60 分以上。
查看 AI 动画生产管线