HyperFrames 完整能力清单：OpenMontage 中从网站到确定性视频的 24 项核心能力全解

HyperFrames 完整能力清单OpenMontage 中从网站到确定性视频的 24 项核心能力全解【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage本篇指南系统梳理 OpenMontage 仓库中随website-to-video技能一起 vendor 进来的 HyperFrames 引擎的完整能力边界——从合成composition基础契约、6 大动画适配器、14 个 WebGL 着色器转场到 60 条 lint 规则、25 条 CLI 命令、浏览器内 NLE 剪辑器与确定性渲染保证。文中所有能力均可直接用于把任意网站 URL 转成站点导览、作品集展示或社媒短视频的生产流程读完你将掌握 HyperFrames「能做什么」的全景图以及在website-to-video的 7 步工作流中「在哪个环节查哪一节」的实战方法。阅读方式说明这份能力清单源自 capabilities.md700 行、24 个章节其作者明确建议不要线性通读而是先扫目录在故事板storyboard或某个 beat 需要特定能力HTML-in-Canvas、着色器转场、音频驱动动画、动态计数器等时直接跳到对应章节。本文保持了同样的「目录驱动」结构。一、文档定位与 OpenMontage 中的存放位置本清单在 OpenMontage 中扮演的角色是「WHAT 手册」它回答HyperFrames 能做到什么而具体的「怎么做」代码模式记录在 techniques.mdHOW 手册。这套技能并非 OpenMontage 原创而是从上游 HyperFrames 单体仓库 vendor 而来。根据 PROVENANCE.md 的记载上游来源为heygen-com/hyperframesvendor 版本v0.7.17对应提交3351fb1a2026-06-27共 vendor 了 12 个 HyperFrames 家族技能其中website-to-video由上游的website-to-hyperframes改名而来刻意未 vendor 的是与 OpenMontage 自身流水线路由冲突或重复的工作流如faceless-explainer、product-launch-video、slideshow等。在website-to-video的 7 步工作流中见 SKILL.md本清单在Step 2策略与信息和Step 5构建合成两个环节被调用Step 2 用它向用户说明「能做到什么」Step 5 则在具体 beat 需要时深挖对应小节。配套的 w2h-verify.mjs 会在 Step 6 生成不可伪造的质量验证报告详见本文最后一节。二、四大铁律一切能力的地基Essential Rules在浏览任何具体能力之前必须先理解 HyperFrames 的四条根本约束——所有 24 个章节的能力都建立在这四条之上规则内容确定性Deterministic禁止Math.random()、Date.now()、requestAnimationFrame、repeat: -1。渲染引擎按精确时间戳 seek任何帧的输出必须可由时间唯一决定。时间线契约Timeline contract必须同步地在window.__timelines[composition-id]上注册gsap.timeline({ paused: true })。时间线长度即组合时长。子合成Sub-compositions外部.html文件通过data-composition-src加载自动嵌套时间线、作用域隔离 CSS 与脚本。Linter 把关60 条静态检查规则渲染前必须执行npx hyperframes lint可捕获缺失时间线、重叠 clip、断裂路径、GSAP 错误等。另一个重要前提你不受「从网站捕获到了什么」的限制——你完全可以从头编写着色器、搜索并下载 registry 块、构建 Three.js 场景、编写自定义 WebGL 效果使用任何浏览器能渲染的 Web API。三、合成基础数据属性、时间线契约与分辨率预设3.1 运行时识别的 data 属性根合成root compositiondata-composition-id、data-start、data-duration、data-width、data-heightdata-composition-src外部子合成、data-composition-duration、data-composition-variablesJSON、data-variable-values覆盖每个 clipid、data-start、data-duration、data-track-index、classclip可选data-media-start、data-volume、data-playback-start子合成宿主data-composition-iddata-composition-src或内联template id${compId}-template。解析器还会读取data-typecomposition|text、data-end、data-keyframesJSON、data-x|y|scale|opacity、data-color|font-size|font-weight|font-family|text-shadow|outline|highlight*、data-layerz-index时间线层面已废弃但音频混音器仍按层使用、data-resolution、data-composition-width|height。3.2 时间线契约细则gsap.timeline({ paused: true })注册到window.__timelines[composition-id]主时钟TransportClock WebAudioTransport通过tl.totalTime(t, false)或tl.seek(t, false)驱动时间线框架自动嵌套子合成的时间线时长以根元素上的data-duration为准不取 GSAP 时间线长度时间线必须同步构建禁止 async/await/setTimeout循环由hyperframes-player处理而非 GSAP 的repeat: -1。3.3 分辨率预设VALID_CANVAS_RESOLUTIONS1920×1080默认、1080×1920竖屏、1080×1080方形、4K、1440×2560另有normalizeResolutionFlag归一化 CLI 的--resolution参数。website-to-video的 SKILL.md 也给出了对应格式建议横屏 1920×1080默认YouTube/网页嵌入、竖屏 1080×1920Instagram Stories/TikTok、方形 1080×1080Instagram 信息流。四、六大确定性动画适配器运行时按顺序注册以下适配器每个实现discover()/seek({time})/pause/play?/revert接口适配器驱动对象加载方式要点GSAPcreateGsapAdapter注册在window.__timelines[id]上的主时间线与所有 tweenCDNgsap3.14.2插件走标准 GSAP registerHyperFrames 不 patchTHREE.Clock改用__hfThreeTimeAnime.js v4createAnimeJsAdapterpush 到window.__hfAnime的 Anime 实例CDNanimejs4.0.2或 ESM适配器将合成秒数 ×1000 转为毫秒CSS 动画createCssAdapter任何计算样式带animation-name的元素声明式keyframesWAAPI 不可用时回退到负animation-delayWAAPIcreateWaapiAdapter文档上所有 Animation 对象element.animate()使用document.getAnimations()LottiecreateLottieAdapterwindow.__hfLottie数组支持 lottie-web dotlottie-webCDNlottie.min.jslottiefiles/dotlottie-webgoToAndStop(time*1000)或setCurrentRawFrameValue/seek(%)Three.jscreateThreeAdapterwindow.__hfThreeTime 派发CustomEvent(hf-seek, {detail:{time}})ESM CDNthree0.181.2/esm合成的渲染循环监听hf-seek标准模式mixer.setTime(time)GSAP 插件有文档的模式TextPlugin——tl.call中做文本变化MotionPathPlugin——曲线约束的 tweenCustomEase——从 Remotion 风格节奏导入贝塞尔缓动ScrollTrigger / Flip / SplitText / Draggable / Inertia / Observer / ScrambleText / CustomWiggle / CustomBounce / ScrollSmoother / GSDevTools——只要已加载且 tween 挂在注册的 paused 时间线上即可原生工作无需特殊适配器Producer 在需要时会自动注入 ScrollTrigger CDN。五、着色器转场14 个命名 WebGL 片元着色器所有 14 个着色器共享同一组 uniformu_from、u_to、u_progress、u_resolution、u_accent、u_accent_dark、u_accent_bright。名称视觉表现备注domain-warp多倍频 FBM 双向扭曲两个场景有机溶解边缘 强调色闪光使用 NQ 噪声包ridged-burn脊状多分形蒙版揭示 B强调色→亮→白燃烧渐变火花NQwhip-pan10 采样水平运动模糊 横向交叉淡化无噪声sdf-iris宽高比修正的圆 SDF 扩张 强调色辉光环—ripple-waves径向驻波 UV 位移 着色交叉淡化—gravitational-lens向中心收拢 R/B 色差分离—cinematic-zoom12 次 RGB 偏移径向缩放模糊采样色差缩放拖尾—chromatic-splitR/B 径向通道向外/向内偏移G 固定区别于 CSS 色差swirl-vortexFBM 噪声的逆时针涡旋进入侧互为倒数NQthermal-distortion垂直 sin FBM 水平位移暖雾NQflash-through-white经白色中点淡出——场景间明显的白闪无强调色仅在品牌明确需要白闪节奏边界时使用不是「中性默认」转场cross-warp-morphFBM 向量场位移两个场景第三个 FBM 偏置不规则擦除NQlight-leak固定画外漏光 指数衰减 强调色暖调 脊状耀斑硬编码漏光锚点glitch行位移 RGB 横向分离 扫描调制 海报化 闪烁确定性公共 API 与调优HyperShader.init({ bgColor: #0b0f14, accentColor: #f59e42, scenes: [scene1, scene2], transitions: [{ time: 3, shader: sdf-iris, duration: 0.65, ease: power2.inOut }], timeline: gsap.timeline({ paused: true }), compositionId: main, previewCaptureFps: 30, });能力探测isHtmlInCanvasCaptureSupported()Chrome 的 layoutSubtree/drawElementImage调优参数?__hf_shader_capture_scale0.25–1、?__hf_shader_loadinginternal|player|none缓存IndexedDB 存 PNG 快照同时最多 2 个纹理转场活跃回退捕获 /texImage2D失败时applyFallbackTransition用 smoothstep 透明度 tween 兜底引擎模式设置window.__HF_VIRTUAL_TIME__时跳过 GL/捕获Producer 使用元数据当然你也可以从零编写自定义 GLSL——任何标准 uniform 的片元着色器都可以。六、CSS 场景转场30 命名模式与 6 个时间预设这些转场全部由 GSAP 驱动记录在.agents/skills/hyperframes-animation/transitions/下的 14 个分类文件中同一合成中不可与着色器转场混用。类别模式Push / slidePush slide、vertical push、elastic push、squeezeScale / zoomZoom through、zoom out、scale-up swapRadial / clipCircle iris、diamond iris、diagonal split3D3D card flip、hinge doorBlurCrossfade、blur crossfade、focus pullDissolveColor dip压黑、staggered color blocks2 块、5 块Cover水平百叶、垂直百叶6 / 12 / 20 条可变LightLight leak overlays、overexposure burn、film burnDistortionGlitchCSS RGB 层抖动、chromatic aberration、rippleMechanicalShutter两半、clock wipe9 点旋转楔形GridGrid dissolve12 或 120 格、grid pixelate wipeDestructionPage burnSVG clip-path canvas 字符边缘OtherVHS tape条状种子抖动、gravity drop、morph circle、blur through、directional blur已否决Star iris、tilt-shift、lens flare不要用——非 CSS 写实时间预设Timing presets预设durationeasesnappy0.2spower4.inOutsmooth0.4spower2.inOutgentle0.6ssine.inOutdramatic0.5spower3.in → power3.outinstant0.15sexpo.inOutluxe0.7spower1.inOut七、视觉特效与纹理标记/强调模式5 种模式效果实现highlight文字后黄色条带擦除CSS bar GSAP scaleX 0→1circle单词周围手绘红圈CSS border 椭圆 back.out scaleburst从词心发出 12 根放射线DOM 线数组--len/--angle变量scribble波浪下划线随时间绘制SVGpath二次曲线 stroke-dash GSAPsketchout文字上的交叉删除线两条 2px 旋转线颗粒 / 噪点grain-overlayregistry 组件SVG feTurbulence>window.AUDIO_DATA { fps: 30, totalFrames: 900, frames: [{ bands: [0.42, 0.18, ...] }] // bands 按整轨归一化到 0–1 };索引 0 为低频bass越高越高频treble。bands 范围 0–1按整条音轨归一化。已文档化的映射频段绑定属性Bassbands[0–1]scale脉冲Midbands[4–8]borderRadius、widthTreblebands[12–14]textShadow、boxShadow辉光总体振幅opacity、y、backgroundColor任何 GSAP 可 tween 的属性都可以——包括 clipPath、filter、SVG 属性、CSS 变量。频段提取python3 .../extract-audio-data.py audio.mp3 --fps 30 --bands 8只允许预提取——渲染期不做 Web Audio 分析。音频驱动场景的禁用清单EQ 条、频谱 UI、通用波形、音符剪贴画、通用粒子、彩虹循环、节拍白闪、抽象脉动球体。十、HTML-in-Canvas活 DOM 作为 GPU 纹理记录于.agents/skills/hyperframes-animation/下的 html-in-canvas 模式文档上游版本 504 行。能力本质Chrome 实验性的layoutSubtreedrawElementImage把实时 DOM 栅格化进 canvas特性检测为isHtmlInCanvasCaptureSupported()用途着色器转场用它做场景纹理与 Three.js 组合时可做CanvasTexture 后期处理可用模式HTML 贴到 Three.js 平面置换、扭曲、液体模拟HTML 进着色器VFX 纹理采样递归的「HTML-in-canvas-in-shader-in-HTML」基于此的实验性 VFX 块vfx-iphone-deviceGLTF iPhone MacBookHTML 屏幕vfx-liquid-background液体模拟置换 HTMLvfx-liquid-glass、vfx-magnetic、vfx-portal、vfx-shatter、vfx-text-cursor色差边缘 canvas 后期十一、Three.js / WebGL 自定义场景集成模式window.addEventListener(hf-seek, (e) { const time e.detail.time; mixer.setTime(time); shaderUniforms.u_time.value time; renderer.render(scene, camera); });加载import * as THREE from https://cdn.jsdelivr.net/npm/three0.181.2/esm确定性要求每一帧都必须从time推导绝不使用requestAnimationFrame/Date.now()能力范围AnimationMixer、自定义 GLSL、后期处理、GLTF 模型、灯光、相机、材质十二、SVG / canvas / 可变字体技巧源自 hyperframes-animation 的 techniques.md技巧机制SVG 路径绘制strokeDasharraygetTotalLength() GSAP stroke 偏移Canvas 2D 程序化艺术种子哈希函数 tl.to代理{time}onUpdateCSS 3D 卡片GSAProtationYperspective: 900逐词动能字排GSAP 时间数组、滑动衰减可变字体轴动画 CSS 变量 →font-variation-settings: opsz var(--opsz), wght var(--wght)字符打字机tl.call文本变化 steps(1)光标闪烁速度匹配剪辑把出场的模糊/位移速度与入场匹配实现无缝 beatMotionPathPlugingsap.registerPlugin(MotionPathPlugin) 路径字符串十三、媒体视频、音频、TTS、转写、抠像视频合成video muted playsinline>html >npx hyperframes render --variables {brand:Linear,primary:#5E6AD2} npx hyperframes render --variables-file vars.json npx hyperframes render --strict-variables # 变量未使用/不匹配时报错validateVariables()在 CLI/工具边界按声明校验值。二十二、子合成Sub-compositions两种加载机制外部文件data-composition-srccompositions/act-1.html——运行时 fetch内联模板template idid-template——由loadInlineTemplateCompositions提取每个子合成拥有自己的data-composition-id拥有自己的window.__timelines[id]自动嵌套进根时间线通过scopeCssToComposition做 CSS 作用域隔离[data-composition-idid]选择器脚本经wrapScopedCompositionScript包装读取data-variable-values并与自身默认值合并进window.__hfVariablesByComp[id]外部脚本以EXTERNAL_SCRIPT_LOAD_TIMEOUT_MS超时加载失败时发出external_composition_load_failed/external_composition_script_load_issue诊断事件website-to-video的典型项目结构正是「一个根 index.html 若干compositions/beat-N.html」每个 beat 即一个子合成参见 w2h-verify.mjs 对compositions/beat-*.html与根data-duration的解析逻辑。二十三、全局运行时 APIwindow.*全局用途__hyperframes{ fitTextFontSize, getVariables }__timelines{ [compositionId]: GsapTimeline }__player内部播放器桥seek、play、pause、renderSeek 等__clipManifest计算后的 clip 数组供 Studio 使用__playerReadyplayer 就绪时 resolve__renderReady渲染捕获就绪时 resolve__HF_PARITY_MODE引擎对等标志__HF_FPS渲染 FPS 提示__HF_MAX_DURATION_SEC引擎钳制__HF_VIRTUAL_TIME__引擎在渲染模式下设置着色器转场据此切换路径__hfThreeTimeThree.js 适配器的当前时间__HF_PICKER_APIStudio 的元素拾取钩子__hfAnimeAnime.js 实例数组__hfLottieLottie 动画数组__hfVariables解析后的根变量__hfVariablesByComp每合成变量映射__hfRuntimeTeardown清理函数__tailwindReadyTailwind 浏览器构建就绪门控捕获__hf.transitions着色器转场元数据Producer 用于 HDR 感知合成__beforeTimeline、__afterTimeline可选用户钩子__afterRender、__beforeRender可选用户钩子gsap、THREE、anime、lottie库全局控制桥动作play、pause、seek、set-muted、set-playback-rate、enable-pick-mode、disable-pick-mode、set-volume、set-media-output-muted。二十四、技能生态16 个领域技能技能用途hyperframes核心框架技能合成编写入口hyperframes-cli全部 CLI 命令的 Agent 技能hyperframes-media媒体工作流TTS、转写、字幕集成hyperframes-registry安装块/组件hyperframes-contrastWCAG 审计scripts/contrast-report.mjshyperframes-animation-map每 tween 包围盒 标志报告website-to-videoCapture → DESIGN.md → brief → storyboardscript → VO → build → validateremotion-to-hyperframes迁移模式 API 映射 CustomEasegsapGSAP API 插件参考animejsAnime.js v4 模式css-animationskeyframes 模式waapiWeb Animations APIlottieLottie 集成threeThree.js 确定性 seektailwindTailwind 浏览器运行时 v4contribute-catalog向 registry 添加块在 OpenMontage 中这些技能的实际载体是.agents/skills/下的目录如 hyperframes、website-to-video且hyperframes技能本身同时是一个「意图路由器」——任何「帮我做视频」的请求都会先由它路由到 11 个顶级工作流之一website-to-video是「通用网站 → 视频」的专用路由。二十五、参考文档清单16 份参考文档hyperframes 家族 referencestext-effects.md——24 种命名文本动画效果逐字符、逐词、逐行、整段——词汇参考独立技能/animate-texttransitions.md catalog.md 14 个分类子文件对应.agents/skills/hyperframes-animation/transitions/css-patterns.md标记模式dynamic-techniques.md字幕动画motion-principles.md缓动即情绪、编排typography.md禁用字体清单、配对规则、可变字体narration.md脚本 VO 节奏captions.md字幕编写契约audio-reactive.md频段映射 提取transcript-guide.mdwhisper、Groq、OpenAI 工作流techniques.md大技巧目录——SVG、canvas 2D、3D、动能、lottie、可变字体、MotionPath、音频驱动beat-direction.md、design-picker.md、prompt-expansion.md、video-composition.mdvisual-styles.md8 种命名视觉风格Swiss Pulse、Velvet Standard、Deconstructed、Maximalist Type、Data Drift、Soft Signal、Folk Frequency、Shadow Cut文档页docs/27 个 mdx 页面上游 docs/guides/ 与 docs/packages/4k-rendering、claude-design、common-mistakes、deploy、gsap-animation、hdr、html-in-canvas、hyperframes-vs-remotion、open-design、performance、prompting、remove-background、rendering、timeline-editing、troubleshooting、video-editor-cheatsheet、website-to-video 等包文档cli、core、engine、player、producer、studio。二十六、在 website-to-video 工作流中的实际用法website-to-video的 7 步工作流与本文各章节的对应关系详见 SKILL.md步骤产出物本文能力对应Step 0 捕获与理解品牌站点摘要 品牌工具包§15capture命令、§4 站点库检测Step 1 品牌识别DESIGN.md色彩/字体/dos donts§7 视觉特效、§12 字体技巧Step 2 策略与信息消息 叙事弧 受众锁定扫描本文目录step-2-brief.md 明确要求Step 3 故事板 脚本 STORYBOARD.mdSCRIPT.md§3–§12 按 beat 选取技巧Step 4 VO、节奏 字幕 narration.wavtranscript.json§13 TTS/转写、§8 字幕Step 5 构建合成index.htmlcompositions/beat-N.html§2–§11 深挖具体小节Step 6 验证与交付lint/validate/快照 Studio URL§16 linter、§18 引擎Step 6 的自动化质量门由 w2h-verify.mjs 执行它通过纯文件分析计算 Agent「无法伪造」的信号内置阈值包括必需产物检查STORYBOARD.md、DESIGN.md、SCRIPT.md、index.html必须存在品牌视觉使用检查至少 1 个 beat 引用capture/assets/下非 logo 的捕获素材防止 Agent 只用 logo、其余全部用 CSS 重造而抹掉品牌辨识度标题字号检查1920×1080 下主标题字号下限 80px40–80px 区间视为「疑似标题但过小」时间线覆盖率检查静态可测的 GSAP 事件最大位置必须 ≥ beat 时长的 70%TIMELINE_COVERAGE_MIN 0.7专门拦截「网页没拍起来」——开场一秒有入场 tween 之后全静止的失败模式带动态模式forEach/for 循环内 tween或长时 tween 的 beat 自动跳过着色器转场一致性检查STORYBOARD 声明的着色器必须在 index.html 中真实存在HyperShader运行时 非 SFX 上下文防止规格与实现漂移SFX 时间戳一致性检查storyboard 中的sfx/*.mp3时间列与 index.html 的data-start漂移容差 0.1s30fps 下 3 帧beat 时长一致性检查storyboard 时序表如| B4 — MetaBrain | 16.600 – 21.000s |与 index.html 的data-duration漂移容差 0.5sMP4 存在性仅在项目目录/output/renders找到.mp4才 PASS否则提示「preview-only 交付」。脚本退出码约定0 全部通过、1 存在失败项、2 脚本错误。报告需要原样粘贴到最终交付摘要中作为「交付了什么」的证据——这也是 Step 6 中「诚实披露」机制What I did NOT verify的一部分。二十七、总结一份可检索的能力索引HyperFrames 在 OpenMontage 中的定位是「HTML/CSS/GSAP 程序化视频渲染运行时」OpenMontage 的 README 将它与 Remotion 并列提案阶段即锁定render_runtimeRemotion 默认用于数据驱动解释类视频HyperFrames 默认用于天然适合 HTMLGSAP 表达的重动效简报包括character-animation流水线的 SVG/GSAP 骨骼输出运行时选定后贯穿整个edit_decisions静默切换属于治理违规。本文以及它所依据的 capabilities.md就是这份运行时「能做什么」的完整索引组合契约§3、六适配器§4、14 着色器转场§5、30 CSS 转场§6、字幕§8、音频驱动§9、HTML-in-Canvas§10、Three.js§11、媒体链路§13、registry§14、25 条 CLI§15、60 lint 规则§16、Player§17、EngineProducer§18、Studio§19、确定性保证§20、变量化§21、子合成§22、全局 API§23、技能与文档§24–§25。配合website-to-video的 7 步工作流与 w2h-verify 验证门即可把任意网站 URL 稳定地产出一条可复现、可验证、可直接交付的成品视频。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考