HyperFrames 最小可渲染合成Minimal Composition完全指南从一段 HTML 到一帧画面【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读HyperFrames 的核心主张是Write HTML. Render video——把视频当作一段普通 HTML 来描述。而**最小可渲染合成Minimal Composition**就是这个模型的最短可行路径一个独立的顶层index.html一个根节点一个 clip一个 tween即可被运行时识别、播放并渲染成视频帧。本文基于仓库文档 minimal-composition.md 展开结合hyperframes/core运行时源码讲清运行时真正要求的四条规则是什么、为什么、以及如何在此基础上搭建更复杂的合成。最小的完整示例一个可渲染的视频下面是仓库文档给出的最小的可渲染 HyperFrames 合成——一个 standalone顶层根节点含一个 clip 与一个 tween!doctype html html langen head meta charsetUTF-8 / meta nameviewport contentwidth1920, height1080 / titleMinimal HyperFrames Composition/title script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script style body { margin: 0; background: #0b0f14; color: white; font-family: Inter, system-ui, sans-serif; } #root { position: relative; width: 1920px; height: 1080px; overflow: hidden; } .clip { position: absolute; inset: 0; display: grid; place-items: center; } h1 { margin: 0; font-size: 96px; } /style /head body div idroot >const tl gsap.timeline({ paused: true }); tl.from(#title, { y: 48, opacity: 0, duration: 0.6, ease: power3.out }, 0.2); window.__timelines[main] tl;window.__timelines的类型定义在 packages/core/src/runtime/window.d.ts 中Recordstring, RuntimeTimelineLike键即data-composition-id的值。为什么要paused: true因为 HyperFrames 的渲染是确定性的 seek 式渲染——渲染器不依赖真实时间流动而是请求第 N 帧、把时间线 seek 到对应时刻、拍下一张静帧参见 docs/concepts/compositions.mdx 中对Nothing plays in real time during a render的说明。paused的时间线才能被外部 seek 驱动而不是自顾自地播放。运行时对注册表相当宽容有两处值得注意的容错均见 packages/core/src/runtime/init.ts 及其附近注释数组形态的容错Agent 经常写出window.__timelines [tl]数组而非按 composition-id 键控的对象。运行时在初始化时会把单元素数组规范化为{ [rootId]: tl }多元素数组则规范化为{ tl-0: ..., tl-1: ... }部分实现的容错window.__timelines的条目可以是只实现了duration/seek、没有pause()的部分时间线——因为渲染路径只 seek 从不 pause所以时间线解析刻意保持宽松见 packages/core/src/runtime/init.ts 的注释与pauseTimelineIfPossible实现缺失pause时仅发一条 analytics 事件不崩溃。此外当根时间线无法按 id 解析但文档中恰好只注册了一条可用时间线时运行时会执行唯一时间线回退sole-timeline fallback把它绑定为根时间线而非渲染静态的第 0 帧见 packages/core/src/runtime/init.ts。多条时间线注册时则视为有歧义保持不绑定并给出警告。四条规则之外剩下的都是普通 HTML 与 CSS文档反复强调的另一个要点是除了上述四条契约骨架中的一切都是普通 Web 技术。#root的盒子尺寸、背景色、字体——你自选.clip的定位方式示例用 Grid 居中也可以 flex、绝对定位等——你自选动效的缓动ease: power3.out、偏移插入位置第三个参数0.2——由 GSAP 完整支持。这意味着任何前端开发者都能零成本迁移到 HyperFrames 的创作模型不需要学习专用 DSL不需要理解合成器的内部状态机只需要遵守HTML 声明时间、脚本注册时间线这一个心智模型。一个值得深入的时间细节data-start不只是数字规则三提到 clip 的data-start但它的表达能力远不止绝对秒数。参考 docs/concepts/data-attributes.mdx数字表示绝对时间秒clip 的 ID表示该 clip 结束时开始可以加/减偏移data-startintro 0.5、data-startintro - 0.5引用仅在同一合成内解析被引用的 clip 必须有已知时长且引用链不能成环。从 packages/core/src/runtime/startResolver.ts 的实现看运行时解析data-start时支持绝对数值与引用表达式两种形态引用解析通过getElementById或[data-composition-id]查询目标先递归解析目标起始时间与时长再叠加偏移量同时用visiting集合防止引用环导致无限递归。这种能力让时间轴编排可以完全声明式地接龙——例如文档中出现的data-startcard-pro意为上一个卡片结束处开始。从最小合成到子合成Sub-Compositions文档明确本模式是standalone顶层index.html根节点无需template包裹。如果你的视频由多个可复用场景组成则应使用子合成由data-composition-src指向的文件加载文件内容需包裹在template标签内。关于子合成的完整契约模板包裹、路径以项目根为基准解析、data-playback-start控制子时间线起始时刻、子合成内部时长为本地时间等可进一步阅读sub-compositions.md技能库中的子合成参考docs/concepts/compositions.mdx合成的概念文档含外部文件与内联两种嵌套方式docs/concepts/data-attributes.mdx全部定时属性的速查表验证你的最小合成渲染链路如何工作写完后如何确认真的可渲染HyperFrames 的渲染是确定性的帧请求渲染器对时间线 seek 到第 N 帧、取该时刻的静帧、合成帧序列见 docs/concepts/compositions.mdx 的说明。对应到运行时每个带data-start的元素的可见性由 isTimedElementVisibleAt 判断元素在其[start, start duration)窗口内可见渲染模式下还会把窗口边界按画布 FPS 对齐到帧边界snapTimeToFrameBoundary。因此一个最小合成只要满足四条规则根节点带data-composition-id/data-width/data-heightdata-start0缺省时运行时自动补写时长可解析rootdata-duration、GSAP 时间线、媒体或适配器任一即可需要上屏的定时元素带data-start加data-duration声明窗口GSAP 时间线paused并注册到window.__timelines[compositionId]即可被hyperframes/core的运行时识别、seek并最终产出视频帧。在这个最小骨架上你可以任意叠加媒体元素、嵌套合成、GSAP 动效、变量与模板等能力而契约本身不会变——这正是 HyperFrames 面向 Agent 设计的创作模型的稳定内核。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考