OpenMontage HyperFrames 逐拍导演Beat Direction指南多场景视频的体验设计、节奏编排与转场调度【免费下载链接】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本文基于 HyperFrames Creative 技能库的 beat-direction 参考文档 展开。HyperFrames 是 OpenMontage 中从 HTML 渲染视频的创作体系而逐拍导演是其中负责在动手写任何多场景视频之前先把每个场景当作一段可以被体验的戏来设计的环节。读完本文你将掌握如何为每个场景撰写体验层导演说明概念、情绪、动画编排、景深分层、音效点、如何在 CSS/Shader/硬切三种转场间正确取舍并精确标定参数以及如何先于编码规划整片节奏并让相邻场景的切出/切入速度匹配起来。一、这篇文章在技能体系中的位置在 hyperframes-creative/SKILL.md 的流程中多场景工作的正确顺序是先规划 beats 与节奏再写 HTML对应的入口正是本参考文档而具体的转场实现要跳到hyperframes-animation的 transitions 目录。技能描述frontmatterdescription也明确指出该技能负责 design spec、调色板、排版、旁白、逐拍规划beat planning、音频驱动视觉与品牌/风格决策而原子级动效与场景蓝图属于hyperframes-animation。换言之beat-direction.md是导演而非特效师的文档它约束的是观众会体验到什么而不是某行 GSAP 怎么写。从源码结构看OpenMontage 把整套 HyperFrames 技能作为 Agent 技能skill组织在 .agents/skills/ 下其中hyperframes/SKILL.md 是入口路由技能make me a video 的一切都从这里开始hyperframes-creative/ 负责创意/艺术方向本文档即其核心参考之一hyperframes-animation/ 负责动效与转场的原子级实现。一句话概括分层beat-direction决定这一拍要让观众感觉到什么transitions 目录决定用什么转场语言把这个感觉交接给下一拍。二、Per-Beat Direction每个 Beat 是一个世界而不是一张布局图核心方法论在本文档一开头即被点破每个 beat拍/场景是一个 WORLD不是一个 layout。在写 CSS 规格与 GSAP 指令之前先描述观众体验到了什么。文档给出了令人印象深刻的正反例对比平庸的写法深藏青背景。$1.9T 白色 280px。左上角 Logo。右下角波浪图。优秀的写法镜头已经悬停在广阔的暗色画布上空飞行。渐变波浪如极光般扫过画面——它是活的、在流动的。$1.9T 以巨大的力量砸进画面连波浪都随之泛起涟漪。这不是一张幻灯片——这是一个瞬间。前者在描述像素后者在描述体验。原则是先写第二种再回头推导像素。换句话说把体验描述当作 storyboard 的源头布局数值只是它的下游产物。这一节随后给出了每个 beat 应当包含的五个组成部分我们逐一展开。三、每个 Beat 的五个导演要素3.1 Concept概念用 23 句话写清这一拍的核心想法我们身处什么样的视觉世界支撑它的隐喻是什么观众应该感受到什么文档强调这是最重要的一部分——其他一切都由此流淌而出。Concept 是先于任何 motion verb、色板或字号决策而存在的意图层。3.2 Mood direction情绪方向给出文化与设计参照而不是色值hex codes。参考原文档的三类示例句式几何、有节奏、精确。想想 Josef Albers 或 Bauhaus 的色彩研究。温暖的办公空间。是好看的笔记本气质而不是技术蓝图。电影级片头序列。那种让你不自觉前倾的开场。这里的关键纪律色板hex 值是后期落地物情绪方向的职责是把感觉讲清楚让下游在选色/选字体时有据可依。可搭配 palettes/ 中按情绪整理的命名调色板如 bold-energetic、dark-premium、nature-earth、neon-electric、warm-editorial 等把这种情绪落成 token。3.3 Animation choreography动画编排不要写it animates in它动起来了而要写具体的运动动词。动词来源于 beat 的 concept 与内容而不是从一张高能量/低能量查表里取。文档举出的反直觉例子非常有价值一个健康品牌的 slow beat 仍可能让某个元素 DROP——如果内容讲的是放下一个统计数据的 beat 也可能 FLOAT——如果品牌气质是失重。原文档按**物理性格而非能量档位**组织了一套运动动词词汇表性格动词Impact / 重量SLAMS、CRASHES、PUNCHES、STAMPS、SHATTERS、DROPS带力量地Directional / 明确方向SLIDES、PUSHES、PULLS、WIPES、CUTSReveals / 构建DRAWS、FILLS、GROWS、EXPANDS、ASSEMBLES、COUNTS UPOrganic / 环境感FLOATS、DRIFTS、BREATHES、PULSES、ORBITS、MORPHSMechanical / 精密TYPES ON、CLICKS、LOCKS IN、SNAPS、STEPS**每个元素都要有一个动词。**如果你叫不出它的动词说明这个元素还没有被设计完成。动词必须跟随 beat 概念生长而不是查表套用。文本元素的特例对文本元素可以直接用具名且确定的 effect ID描述如typewriter、kinetic-center-build、soft-blur-in而不必从零发明时序。这 24 个 effect 的词汇表与加载方式在 hyperframes-animation/adapters/animate-text.md 中说明其按字符soft-blur-in、typewriter、bottom-up-letters 等 7 个、按词kinetic-center-build、short-slide-right 等 8 个、按行mask-reveal-up、line-by-line-slide 等 2 个、整元素shimmer-sweep、focus-blur-resolve 等 7 个分组。实际做法是storyboard 里写Main headline: kinetic-center-build实现子代理按需加载/animate-text技能读取每个 ID 的确定性 spec精确 GSAP 时序、easing 字符串、DOM 切分规则、stagger 算法避免凭空发明时序。3.4 Transition转场这是本文档篇幅最重的部分讲的是这一拍如何把控制权交接给下一拍需要指定类型与参数。何时选哪种转场原文档给出的决策矩阵选 Shader 转场选 CSS 转场选硬切揭示、大反应镜头、产品/Logo 亮相、能量跃迁、哇时刻连续运镜型场景——整段像一个动作被切成几刀快速连发列表、踩点打击感剪辑、喜剧时机音乐/旁白以下沉拍或音效击点做强调的任何时刻以共享运动词汇从一个构图滑向另一个构图的场景连续 3 个快速节奏匹配切换转场本身就是视觉的品牌时刻极简/编辑风节奏任何 0.3–0.8s 转场都嫌太慢的场合经验法则如果某拍是整片的中心舞台就用 Shader 转场切入它如果它是连接组织CSS 交叉淡化就够了。一条 5–7 拍的品牌 reel 通常只想要 1–2 个 Shader 转场主角揭示 CTA——太多会互相稀释冲击力。混用完全受支持原文档明确同一支合成里混用 Shader 与 CSS 交叉淡化是支持的。对任何 transition 条目省略shader字段即可得到平滑的不透明度交叉淡化——场景可见性一律由 HyperShader 统一管理。实现要点让 HyperShader 创建时间线不要在init()里传预建的timeline:选项并在init()之后把所有合成级 tween 挂到返回的tl上。hyperframes-animation/transitions/overview.md 给出了可直接照抄的配置片段var tl HyperShader.init({ bgColor: #000, accentColor: #6366f1, scenes: [s1, s2, s3, s4], transitions: [ { time: 4.0, shader: sdf-iris, duration: 0.7 }, // WebGL shader 转场 { time: 8.5, duration: 0.8 }, // 无 shader → CSS 交叉淡化 { time: 13.0, shader: domain-warp, duration: 0.6 },// WebGL shader 转场 ], });CSS 转场30 种模式、13 个类别原文档给全了 13 类 CSS 转场及其运动性格完整代码位于 hyperframes-animation/transitions/应经由 catalog.md 路由后再读取对应css-*.md分类文件如 css-push.md、css-blur.md类别模式运动性格Push / slidePush slide、vertical push、elastic push、squeeze内容如在一整张连续表面上穿过画面Scale / zoomZoom through、zoom out透视位移——朝内容逼近或远离Radial / clipCircle iris、diamond iris、diagonal split几何揭示——内容被图形显形或覆盖3D3D card flip物理感——内容像实体物件般翻转DissolveCrossfade、blur crossfade、focus pull、color dip重叠与混合——两幕在转场期间同时存在Cover / blindsStaggered color blocks、horizontal blinds6/12 条、vertical blinds结构性——内容被切片、分层或覆盖LightLight leak overlays、overexposure burn、film burn胶片有机感——光晕漫过画面DistortionGlitchCSS RGB 抖动、chromatic aberration、ripple、VHS tape不稳定——图像本身像在故障BlurBlur through、directional blur柔焦——内容模糊进/出MechanicalShutter两半、clock wipe9 点楔形精密感——有可见机械逻辑的转场GridGrid dissolve12/120 格碎片化——画面碎成若干块DestructionPage burnSVG clip-path canvas 边缘戏剧性衰败——前一幕被销毁OtherGravity drop、morph circle物理/形状驱动的杂项运动常用快速选择quick-picks的参数配方原文档给出可直接套用的五组exit → entry数值配方old为离场元素new为进场元素T为转场触发时刻速度匹配上移exity:-150, blur:30px, 0.33s power2.in→ entryy:150→0, blur:30px→0, 1.0s power2.out甩镜whip panexitx:-400, blur:24px, 0.3s power3.in→ entryx:400→0, blur:24px→0, 0.3s power3.out模糊穿越blur throughexitblur:20px, 0.3s→ entryblur:20px→0, 0.25s power3.out缩放穿越zoom throughexitscale:1→1.2, blur:20px, 0.2s power3.in→ entryscale:0.75→1, blur:20px→0, 0.5s expo.out硬切 / 爆切smash cut瞬时切换用于快速连发序列时间预设snappy0.2s、smooth0.4s、gentle0.6s、dramatic0.5s、instant0.15s、luxe0.7s。overview.md 进一步给出了这些预设对应的 ease 变体snappypower4.inOut、smoothpower2.inOut、gentlesine.inOut、dramaticpower3.in→out、instantexpo.inOut、luxepower1.inOut并补充了按能量档位的模糊强度基准Calm 20–30px/0.8–1.2sMedium 8–15px/0.4–0.6sHigh 3–6px/0.2–0.3s。Shader 转场14 个内置 WebGL GPU 效果原文档给出完整清单含视觉描述与建议时长Shader视觉描述时长范围domain-warp有机 FBM 溶解——两幕互相扭曲靠近中点有一次强调闪光0.5–0.8sridged-burn多重分形遮罩经燃烧斜坡揭示入场场景边缘带火花0.5–0.8swhip-pan10 采样水平运动模糊 横向交叉淡化——观感是镜头在两镜间横扫0.3–0.5ssdf-iris圆形 SDF 自中心扩张扩张边缘带 accent 色辉环0.5–0.7sripple-waves径向驻波 UV 位移——内容向外涟漪场景交错0.6–1.0sgravitational-lens向中心捏拉 R/B 色差分离——内容先内弯再释放0.6–1.0scinematic-zoom12 次 RGB 错位径向缩放模糊采样——自中心辐射运动拖影0.4–0.6schromatic-splitR/B 径向通道向外偏移、G 固定——通道分离后重聚0.3–0.5sswirl-vortex逆时针涡旋 FBM 噪声——旧场景旋出、新场景旋入0.5–0.8sthermal-distortion垂直正弦 FBM 水平位移——画面上的热浪微光0.5–0.8sflash-through-white经白色中点淡出——0.01s 近乎不可见0.3s 明显0.01s–0.3scross-warp-morphFBM 向量场同时位移两幕第三个 FBM 控制擦拭方向0.5–0.8slight-leak固定画外光源 指数衰减 暖色 山脊耀斑0.5–0.8sglitch线条位移 RGB 横向分离 扫描调制 海报化 闪烁0.3–0.5s原文档提醒安装用npx hyperframes add name注意块名 ≠ shader 名参见 registry 的 discovery 文档完整 API 在上游hyperframes/shader-transitions包。catalog.md 补充说明 WebGL shader 由该包负责 setup/capture/init/渲染循环与 GSAP 集成不要手工复制原始 GLSL。转场不止于内置清单原文档特意加了一节免责式能力说明你不受这里列出的选项限制——可以从零编写自定义 GLSL shader实现独特效果可以在线检索 shaderShaderToy、GLSL Sandbox、GitHub 等并改写适配可以构建不属于任何类别的自定义 CSS 转场——把 clip-path、transform、filter 组合出新花样需要专门效果时也可以请用户提供或寻找。如果 storyboard 需要的效果尚不存在——那就把它造出来。框架能渲染任何浏览器能跑的东西。转场纪律与陷阱为了让这一交接真正落地catalog.md 的多场景硬规则值得在方向层先记住每一支合成都必须使用转场没有例外没有转场的场景切换读起来像 jump cut。每个场景都要有入场动画用gsap.fromTo()而非gsap.from()让起始状态显式确定。离场动画一律禁止末场景除外转场本身就是离场离场内容在转场触发前必须完全可见——先把旧场景淡出、下一场景再自己入场是带了一个小坑的 jump cut不是转场。只有最后一个场景允许淡出元素如片尾淡黑。overview.md 与 motion-principles.md 还给出方向级共鸣easing 是情绪不是技巧——expo.out 自信、sine.inOut 梦幻、elastic.out 俏皮同样的动作、不同的含义.out用于入场、.in用于离场、.inOut用于在两个位置之间移动。另外若使用 Shader 转场要遵守 overview.md 中shader-compatible CSS rules不用transparent关键字、细于 4px 的元素避免渐变背景、可见元素避免 CSSvar()、标记不可捕获装饰元素等否则 html2canvas 抓取纹理时会出现边缘伪影。3.5 Depth layers景深分层前景、中景、背景各有什么每一拍至少要有 2 层。原文档示例BG深藏青底色 微弱的径向光晕。MG带投影的统计卡片。FG右下角品牌 Logo。这与 motion-principles.md 的每场景至少三个图层 每场景至少两个视觉焦点 背景不能是空的等视觉纪律同源——对多场景视频而言景深分层是防止画面读起来像网页的核心手段之一。3.6 SFX cues音效点**什么声音在什么时刻响起。**原文档两个例子在捕获脉冲capture pulse那一刻——一声柔软、温暖、模拟感的快门咔嚓。左侧承载着一缕低沉持续音。在折叠fold处低鸣戛然而止。静默。然后一声干净的钟鸣。SFX cue 需要与 Transition 决策形成呼应文档在转场决策表中也提示——任何音乐/旁白以**下沉拍downbeat或音效击点SFX hit**做强调的时刻都倾向于用 Shader 转场。可见 SFX 点不只服务于拟音还常常是转场能量分配的判据。四、Rhythm Planning写 HTML 之前先声明节奏原文档要求在写 HTML 之前先声明你的场景节奏——哪些场景是快速 hits、哪些是 holds、shader 落在哪里、能量峰值在哪。动手实现之前就要说出节奏模式的名字例如fast-fast-SLOW-fast-SHADER-hold。**节奏必须从 storyboard 与品牌推导而不是查表。**一个建筑事务所的 15 秒社媒广告和一个游戏品牌的 15 秒社媒广告节奏截然不同——同为 15 秒一个是 slow-reveal-hold-CTA另一个是 rapid-fire-SLAM-hook。视频类型设定约束时长、大致拍数而品牌与内容决定这些拍是慢是快、稀疏还是密集、戏剧化还是克制。驱动节奏决策的四个问题原文档完整列出观众应该经历怎样的情绪旅程峰值时刻在哪里旁白在哪里落最重音那里通常就是能量该见顶的地方。品牌自身的视觉节奏暗示什么——不慌不忙还是十万火急这个时长实际能支撑多少拍而不显得仓促或注水原文档给了一个很实际的反面教训一条社媒广告想在 2s 内抓钩、展示 3 个特性、再在 15s 内以 CTA 收尾——读起来只会像噪音。**有时 hook-hold-CTA 搭配一个强有力的 feature 才是 15 秒的正确节奏。**在实现之前把你规划好的节奏命名出来。五、Velocity-Matched Transitions让两段动效看起来像一个镜头这是全篇最具工程意味的一节值得单独拆开理解其数学直觉离场用加速 easepower2.in或power3.in配合一条模糊 ramp 离场入场用减速 easepower2.out或power3.out配合模糊清除入场两条 easing 曲线的最快点恰好在剪切处相遇——于是观众感知到的是连续的镜头运动而不是两段彼此无关的动画离场速度与入场速度要匹配在约 5% 容差以内。这就是本文第三节quick-picks里那些配方的统一原理例如速度匹配上移exit 0.33spower2.in/ entry 1.0spower2.out与 blur through 都遵循加速出 减速入 接缝处速度取极大值的模板。也可结合 overview.md 的能量对照表选择主转场Calm 对应 cross-warp morph/thermal distortion、Medium 对应 whip-pan/cinematic zoom、High 对应 ridged-burn/glitch/chromatic-split并遵守主转场占 60–70%、配 1–2 个 accent、绝不让每个场景都用不同转场的比例纪律。叙事位置同样重要开场用最具辨识度的转场0.4–0.6s、相关论点之间用一致的主转场约 0.3s、话题切换换一种与主转场不同的模式通知观众新章节、高潮/主角揭示用最出彩的 accent、收尾回到最慢最简单的转场。六、实战工作流小结综合本参考文档与技能体系一个多场景 HyperFrames 视频的正确创作顺序是节奏先行对着 storyboard 说出节奏模式名如hook-SLAM-feature-hold-SHADER-CTA确定每拍时长、能量峰值与 shader 落点逐拍写导演说明每个 beat 依次产出 Concept → Mood direction → Animation choreography每个元素配一个运动动词→ Transition类型 参数→ Depth layers → SFX cues文本特效具名化storyboard 中对文本元素引用 24-effect IDtypewriter、kinetic-center-build…转场实现让 HyperShader 建时间线CSS/Shader 混用遵守 4 条多场景纪律与 shader-compatible CSS 规则速度匹配所有需要连续感的接缝按 ~5% 容差配平离场/入场的峰值速度。若需要对某类具体转场的 GSAP 实现细节追根溯源沿 catalog.md →css-*.md/overview 逐级下沉即可想把它做成可渲染的 HTML 合成则还需回到 hyperframes-core 的data-*契约。方向层的核心要义始终只有一句一个 Beat 是一个世界——先让观众置身其中再谈像素。【免费下载链接】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），仅供参考
OpenMontage HyperFrames 逐拍导演（Beat Direction）指南：多场景视频的体验设计、节奏编排与转场调度
OpenMontage HyperFrames 逐拍导演Beat Direction指南多场景视频的体验设计、节奏编排与转场调度【免费下载链接】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本文基于 HyperFrames Creative 技能库的 beat-direction 参考文档 展开。HyperFrames 是 OpenMontage 中从 HTML 渲染视频的创作体系而逐拍导演是其中负责在动手写任何多场景视频之前先把每个场景当作一段可以被体验的戏来设计的环节。读完本文你将掌握如何为每个场景撰写体验层导演说明概念、情绪、动画编排、景深分层、音效点、如何在 CSS/Shader/硬切三种转场间正确取舍并精确标定参数以及如何先于编码规划整片节奏并让相邻场景的切出/切入速度匹配起来。一、这篇文章在技能体系中的位置在 hyperframes-creative/SKILL.md 的流程中多场景工作的正确顺序是先规划 beats 与节奏再写 HTML对应的入口正是本参考文档而具体的转场实现要跳到hyperframes-animation的 transitions 目录。技能描述frontmatterdescription也明确指出该技能负责 design spec、调色板、排版、旁白、逐拍规划beat planning、音频驱动视觉与品牌/风格决策而原子级动效与场景蓝图属于hyperframes-animation。换言之beat-direction.md是导演而非特效师的文档它约束的是观众会体验到什么而不是某行 GSAP 怎么写。从源码结构看OpenMontage 把整套 HyperFrames 技能作为 Agent 技能skill组织在 .agents/skills/ 下其中hyperframes/SKILL.md 是入口路由技能make me a video 的一切都从这里开始hyperframes-creative/ 负责创意/艺术方向本文档即其核心参考之一hyperframes-animation/ 负责动效与转场的原子级实现。一句话概括分层beat-direction决定这一拍要让观众感觉到什么transitions 目录决定用什么转场语言把这个感觉交接给下一拍。二、Per-Beat Direction每个 Beat 是一个世界而不是一张布局图核心方法论在本文档一开头即被点破每个 beat拍/场景是一个 WORLD不是一个 layout。在写 CSS 规格与 GSAP 指令之前先描述观众体验到了什么。文档给出了令人印象深刻的正反例对比平庸的写法深藏青背景。$1.9T 白色 280px。左上角 Logo。右下角波浪图。优秀的写法镜头已经悬停在广阔的暗色画布上空飞行。渐变波浪如极光般扫过画面——它是活的、在流动的。$1.9T 以巨大的力量砸进画面连波浪都随之泛起涟漪。这不是一张幻灯片——这是一个瞬间。前者在描述像素后者在描述体验。原则是先写第二种再回头推导像素。换句话说把体验描述当作 storyboard 的源头布局数值只是它的下游产物。这一节随后给出了每个 beat 应当包含的五个组成部分我们逐一展开。三、每个 Beat 的五个导演要素3.1 Concept概念用 23 句话写清这一拍的核心想法我们身处什么样的视觉世界支撑它的隐喻是什么观众应该感受到什么文档强调这是最重要的一部分——其他一切都由此流淌而出。Concept 是先于任何 motion verb、色板或字号决策而存在的意图层。3.2 Mood direction情绪方向给出文化与设计参照而不是色值hex codes。参考原文档的三类示例句式几何、有节奏、精确。想想 Josef Albers 或 Bauhaus 的色彩研究。温暖的办公空间。是好看的笔记本气质而不是技术蓝图。电影级片头序列。那种让你不自觉前倾的开场。这里的关键纪律色板hex 值是后期落地物情绪方向的职责是把感觉讲清楚让下游在选色/选字体时有据可依。可搭配 palettes/ 中按情绪整理的命名调色板如 bold-energetic、dark-premium、nature-earth、neon-electric、warm-editorial 等把这种情绪落成 token。3.3 Animation choreography动画编排不要写it animates in它动起来了而要写具体的运动动词。动词来源于 beat 的 concept 与内容而不是从一张高能量/低能量查表里取。文档举出的反直觉例子非常有价值一个健康品牌的 slow beat 仍可能让某个元素 DROP——如果内容讲的是放下一个统计数据的 beat 也可能 FLOAT——如果品牌气质是失重。原文档按**物理性格而非能量档位**组织了一套运动动词词汇表性格动词Impact / 重量SLAMS、CRASHES、PUNCHES、STAMPS、SHATTERS、DROPS带力量地Directional / 明确方向SLIDES、PUSHES、PULLS、WIPES、CUTSReveals / 构建DRAWS、FILLS、GROWS、EXPANDS、ASSEMBLES、COUNTS UPOrganic / 环境感FLOATS、DRIFTS、BREATHES、PULSES、ORBITS、MORPHSMechanical / 精密TYPES ON、CLICKS、LOCKS IN、SNAPS、STEPS**每个元素都要有一个动词。**如果你叫不出它的动词说明这个元素还没有被设计完成。动词必须跟随 beat 概念生长而不是查表套用。文本元素的特例对文本元素可以直接用具名且确定的 effect ID描述如typewriter、kinetic-center-build、soft-blur-in而不必从零发明时序。这 24 个 effect 的词汇表与加载方式在 hyperframes-animation/adapters/animate-text.md 中说明其按字符soft-blur-in、typewriter、bottom-up-letters 等 7 个、按词kinetic-center-build、short-slide-right 等 8 个、按行mask-reveal-up、line-by-line-slide 等 2 个、整元素shimmer-sweep、focus-blur-resolve 等 7 个分组。实际做法是storyboard 里写Main headline: kinetic-center-build实现子代理按需加载/animate-text技能读取每个 ID 的确定性 spec精确 GSAP 时序、easing 字符串、DOM 切分规则、stagger 算法避免凭空发明时序。3.4 Transition转场这是本文档篇幅最重的部分讲的是这一拍如何把控制权交接给下一拍需要指定类型与参数。何时选哪种转场原文档给出的决策矩阵选 Shader 转场选 CSS 转场选硬切揭示、大反应镜头、产品/Logo 亮相、能量跃迁、哇时刻连续运镜型场景——整段像一个动作被切成几刀快速连发列表、踩点打击感剪辑、喜剧时机音乐/旁白以下沉拍或音效击点做强调的任何时刻以共享运动词汇从一个构图滑向另一个构图的场景连续 3 个快速节奏匹配切换转场本身就是视觉的品牌时刻极简/编辑风节奏任何 0.3–0.8s 转场都嫌太慢的场合经验法则如果某拍是整片的中心舞台就用 Shader 转场切入它如果它是连接组织CSS 交叉淡化就够了。一条 5–7 拍的品牌 reel 通常只想要 1–2 个 Shader 转场主角揭示 CTA——太多会互相稀释冲击力。混用完全受支持原文档明确同一支合成里混用 Shader 与 CSS 交叉淡化是支持的。对任何 transition 条目省略shader字段即可得到平滑的不透明度交叉淡化——场景可见性一律由 HyperShader 统一管理。实现要点让 HyperShader 创建时间线不要在init()里传预建的timeline:选项并在init()之后把所有合成级 tween 挂到返回的tl上。hyperframes-animation/transitions/overview.md 给出了可直接照抄的配置片段var tl HyperShader.init({ bgColor: #000, accentColor: #6366f1, scenes: [s1, s2, s3, s4], transitions: [ { time: 4.0, shader: sdf-iris, duration: 0.7 }, // WebGL shader 转场 { time: 8.5, duration: 0.8 }, // 无 shader → CSS 交叉淡化 { time: 13.0, shader: domain-warp, duration: 0.6 },// WebGL shader 转场 ], });CSS 转场30 种模式、13 个类别原文档给全了 13 类 CSS 转场及其运动性格完整代码位于 hyperframes-animation/transitions/应经由 catalog.md 路由后再读取对应css-*.md分类文件如 css-push.md、css-blur.md类别模式运动性格Push / slidePush slide、vertical push、elastic push、squeeze内容如在一整张连续表面上穿过画面Scale / zoomZoom through、zoom out透视位移——朝内容逼近或远离Radial / clipCircle iris、diamond iris、diagonal split几何揭示——内容被图形显形或覆盖3D3D card flip物理感——内容像实体物件般翻转DissolveCrossfade、blur crossfade、focus pull、color dip重叠与混合——两幕在转场期间同时存在Cover / blindsStaggered color blocks、horizontal blinds6/12 条、vertical blinds结构性——内容被切片、分层或覆盖LightLight leak overlays、overexposure burn、film burn胶片有机感——光晕漫过画面DistortionGlitchCSS RGB 抖动、chromatic aberration、ripple、VHS tape不稳定——图像本身像在故障BlurBlur through、directional blur柔焦——内容模糊进/出MechanicalShutter两半、clock wipe9 点楔形精密感——有可见机械逻辑的转场GridGrid dissolve12/120 格碎片化——画面碎成若干块DestructionPage burnSVG clip-path canvas 边缘戏剧性衰败——前一幕被销毁OtherGravity drop、morph circle物理/形状驱动的杂项运动常用快速选择quick-picks的参数配方原文档给出可直接套用的五组exit → entry数值配方old为离场元素new为进场元素T为转场触发时刻速度匹配上移exity:-150, blur:30px, 0.33s power2.in→ entryy:150→0, blur:30px→0, 1.0s power2.out甩镜whip panexitx:-400, blur:24px, 0.3s power3.in→ entryx:400→0, blur:24px→0, 0.3s power3.out模糊穿越blur throughexitblur:20px, 0.3s→ entryblur:20px→0, 0.25s power3.out缩放穿越zoom throughexitscale:1→1.2, blur:20px, 0.2s power3.in→ entryscale:0.75→1, blur:20px→0, 0.5s expo.out硬切 / 爆切smash cut瞬时切换用于快速连发序列时间预设snappy0.2s、smooth0.4s、gentle0.6s、dramatic0.5s、instant0.15s、luxe0.7s。overview.md 进一步给出了这些预设对应的 ease 变体snappypower4.inOut、smoothpower2.inOut、gentlesine.inOut、dramaticpower3.in→out、instantexpo.inOut、luxepower1.inOut并补充了按能量档位的模糊强度基准Calm 20–30px/0.8–1.2sMedium 8–15px/0.4–0.6sHigh 3–6px/0.2–0.3s。Shader 转场14 个内置 WebGL GPU 效果原文档给出完整清单含视觉描述与建议时长Shader视觉描述时长范围domain-warp有机 FBM 溶解——两幕互相扭曲靠近中点有一次强调闪光0.5–0.8sridged-burn多重分形遮罩经燃烧斜坡揭示入场场景边缘带火花0.5–0.8swhip-pan10 采样水平运动模糊 横向交叉淡化——观感是镜头在两镜间横扫0.3–0.5ssdf-iris圆形 SDF 自中心扩张扩张边缘带 accent 色辉环0.5–0.7sripple-waves径向驻波 UV 位移——内容向外涟漪场景交错0.6–1.0sgravitational-lens向中心捏拉 R/B 色差分离——内容先内弯再释放0.6–1.0scinematic-zoom12 次 RGB 错位径向缩放模糊采样——自中心辐射运动拖影0.4–0.6schromatic-splitR/B 径向通道向外偏移、G 固定——通道分离后重聚0.3–0.5sswirl-vortex逆时针涡旋 FBM 噪声——旧场景旋出、新场景旋入0.5–0.8sthermal-distortion垂直正弦 FBM 水平位移——画面上的热浪微光0.5–0.8sflash-through-white经白色中点淡出——0.01s 近乎不可见0.3s 明显0.01s–0.3scross-warp-morphFBM 向量场同时位移两幕第三个 FBM 控制擦拭方向0.5–0.8slight-leak固定画外光源 指数衰减 暖色 山脊耀斑0.5–0.8sglitch线条位移 RGB 横向分离 扫描调制 海报化 闪烁0.3–0.5s原文档提醒安装用npx hyperframes add name注意块名 ≠ shader 名参见 registry 的 discovery 文档完整 API 在上游hyperframes/shader-transitions包。catalog.md 补充说明 WebGL shader 由该包负责 setup/capture/init/渲染循环与 GSAP 集成不要手工复制原始 GLSL。转场不止于内置清单原文档特意加了一节免责式能力说明你不受这里列出的选项限制——可以从零编写自定义 GLSL shader实现独特效果可以在线检索 shaderShaderToy、GLSL Sandbox、GitHub 等并改写适配可以构建不属于任何类别的自定义 CSS 转场——把 clip-path、transform、filter 组合出新花样需要专门效果时也可以请用户提供或寻找。如果 storyboard 需要的效果尚不存在——那就把它造出来。框架能渲染任何浏览器能跑的东西。转场纪律与陷阱为了让这一交接真正落地catalog.md 的多场景硬规则值得在方向层先记住每一支合成都必须使用转场没有例外没有转场的场景切换读起来像 jump cut。每个场景都要有入场动画用gsap.fromTo()而非gsap.from()让起始状态显式确定。离场动画一律禁止末场景除外转场本身就是离场离场内容在转场触发前必须完全可见——先把旧场景淡出、下一场景再自己入场是带了一个小坑的 jump cut不是转场。只有最后一个场景允许淡出元素如片尾淡黑。overview.md 与 motion-principles.md 还给出方向级共鸣easing 是情绪不是技巧——expo.out 自信、sine.inOut 梦幻、elastic.out 俏皮同样的动作、不同的含义.out用于入场、.in用于离场、.inOut用于在两个位置之间移动。另外若使用 Shader 转场要遵守 overview.md 中shader-compatible CSS rules不用transparent关键字、细于 4px 的元素避免渐变背景、可见元素避免 CSSvar()、标记不可捕获装饰元素等否则 html2canvas 抓取纹理时会出现边缘伪影。3.5 Depth layers景深分层前景、中景、背景各有什么每一拍至少要有 2 层。原文档示例BG深藏青底色 微弱的径向光晕。MG带投影的统计卡片。FG右下角品牌 Logo。这与 motion-principles.md 的每场景至少三个图层 每场景至少两个视觉焦点 背景不能是空的等视觉纪律同源——对多场景视频而言景深分层是防止画面读起来像网页的核心手段之一。3.6 SFX cues音效点**什么声音在什么时刻响起。**原文档两个例子在捕获脉冲capture pulse那一刻——一声柔软、温暖、模拟感的快门咔嚓。左侧承载着一缕低沉持续音。在折叠fold处低鸣戛然而止。静默。然后一声干净的钟鸣。SFX cue 需要与 Transition 决策形成呼应文档在转场决策表中也提示——任何音乐/旁白以**下沉拍downbeat或音效击点SFX hit**做强调的时刻都倾向于用 Shader 转场。可见 SFX 点不只服务于拟音还常常是转场能量分配的判据。四、Rhythm Planning写 HTML 之前先声明节奏原文档要求在写 HTML 之前先声明你的场景节奏——哪些场景是快速 hits、哪些是 holds、shader 落在哪里、能量峰值在哪。动手实现之前就要说出节奏模式的名字例如fast-fast-SLOW-fast-SHADER-hold。**节奏必须从 storyboard 与品牌推导而不是查表。**一个建筑事务所的 15 秒社媒广告和一个游戏品牌的 15 秒社媒广告节奏截然不同——同为 15 秒一个是 slow-reveal-hold-CTA另一个是 rapid-fire-SLAM-hook。视频类型设定约束时长、大致拍数而品牌与内容决定这些拍是慢是快、稀疏还是密集、戏剧化还是克制。驱动节奏决策的四个问题原文档完整列出观众应该经历怎样的情绪旅程峰值时刻在哪里旁白在哪里落最重音那里通常就是能量该见顶的地方。品牌自身的视觉节奏暗示什么——不慌不忙还是十万火急这个时长实际能支撑多少拍而不显得仓促或注水原文档给了一个很实际的反面教训一条社媒广告想在 2s 内抓钩、展示 3 个特性、再在 15s 内以 CTA 收尾——读起来只会像噪音。**有时 hook-hold-CTA 搭配一个强有力的 feature 才是 15 秒的正确节奏。**在实现之前把你规划好的节奏命名出来。五、Velocity-Matched Transitions让两段动效看起来像一个镜头这是全篇最具工程意味的一节值得单独拆开理解其数学直觉离场用加速 easepower2.in或power3.in配合一条模糊 ramp 离场入场用减速 easepower2.out或power3.out配合模糊清除入场两条 easing 曲线的最快点恰好在剪切处相遇——于是观众感知到的是连续的镜头运动而不是两段彼此无关的动画离场速度与入场速度要匹配在约 5% 容差以内。这就是本文第三节quick-picks里那些配方的统一原理例如速度匹配上移exit 0.33spower2.in/ entry 1.0spower2.out与 blur through 都遵循加速出 减速入 接缝处速度取极大值的模板。也可结合 overview.md 的能量对照表选择主转场Calm 对应 cross-warp morph/thermal distortion、Medium 对应 whip-pan/cinematic zoom、High 对应 ridged-burn/glitch/chromatic-split并遵守主转场占 60–70%、配 1–2 个 accent、绝不让每个场景都用不同转场的比例纪律。叙事位置同样重要开场用最具辨识度的转场0.4–0.6s、相关论点之间用一致的主转场约 0.3s、话题切换换一种与主转场不同的模式通知观众新章节、高潮/主角揭示用最出彩的 accent、收尾回到最慢最简单的转场。六、实战工作流小结综合本参考文档与技能体系一个多场景 HyperFrames 视频的正确创作顺序是节奏先行对着 storyboard 说出节奏模式名如hook-SLAM-feature-hold-SHADER-CTA确定每拍时长、能量峰值与 shader 落点逐拍写导演说明每个 beat 依次产出 Concept → Mood direction → Animation choreography每个元素配一个运动动词→ Transition类型 参数→ Depth layers → SFX cues文本特效具名化storyboard 中对文本元素引用 24-effect IDtypewriter、kinetic-center-build…转场实现让 HyperShader 建时间线CSS/Shader 混用遵守 4 条多场景纪律与 shader-compatible CSS 规则速度匹配所有需要连续感的接缝按 ~5% 容差配平离场/入场的峰值速度。若需要对某类具体转场的 GSAP 实现细节追根溯源沿 catalog.md →css-*.md/overview 逐级下沉即可想把它做成可渲染的 HTML 合成则还需回到 hyperframes-core 的data-*契约。方向层的核心要义始终只有一句一个 Beat 是一个世界——先让观众置身其中再谈像素。【免费下载链接】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），仅供参考
