
OpenMontage 确定性文本动画实战animate-text技能适配器与 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 中 HyperFrames 动画体系的核心适配器.agents/skills/hyperframes-animation/adapters/animate-text.md展开它回答了当故事板需要typewriter精确到 240ms / 46ms stagger /steps(1, end)easing这类可复现的命名文本动画时规格从哪里来、如何加载、如何引用、以及离线时如何回退。读完本文你将掌握 24 个命名文本效果的完整词汇表、在STORYBOARD.md中按 ID 引用效果的标准写法、与 HyperFrames 确定性渲染契约的配合方式以及不依赖上游技能、直接用 GSAP 内联实现文本动画的实战方案。为什么文本动画需要一份外部技能而不是内置目录HyperFrames 的动画体系遵循一条铁律同一时间值必须渲染出同一帧像素参见.agents/skills/hyperframes-core/references/determinism-rules.md的动画运行时契约。文本动画如果靠即兴发挥每个 sub-agent 写出的typewriter都可能时长、节奏、缓动各不相同同一部视频的多个 beat 之间会明显跳戏。因此对于确定性文本动画规格——例如typewriter以精确的240ms / 46ms stagger / steps(1, end) easing运行——HyperFrames 明确委托给由 Pixel Point 维护的独立animate-text技能项目根目录下的路由表.agents/skills/hyperframes-animation/SKILL.md第 46 行即指向本适配器Named text-animation effects (24 IDs via external animate-text skill) → adapters/animate-text.md。它提供一份包含24 个命名文本效果的目录每个效果都附带可移植的运动契约portable contracts与具体动画库无关的规格描述逐库实现配方per-library implementation recipesGSAP、Anime.js、WAAPI 三个运行时的落地代码。之所以不把这份目录内置到 OpenMontage 仓库原文给出了清晰的工程与法律理由Pixel Point 的animate-text是规格的来源真相source of truth将其文件 vendoring 进本仓库会违反上游的许可约束截至写作时上游未声明明确 license。单独以技能形式加载既保持法律层面的干净又让你获得完全相同的目录能力——这也是 OpenMontage 大量采用外部技能插件的通用模式参考.agents/skills/hyperframes-animation/SKILL.md中 Lottie、Three.js、Anime.js、WAAPI、TypeGPU 等七个运行时适配器的并存设计。如何加载两条路径一条命令在需要确定性的文本动画时把上游技能与hyperframes-animation一起加载即可。文档给出了两种加载方式。方式一项目根目录安装CLI# 在项目根目录将上游技能安装到 .agents/skills/ 下 npx skills add pixel-point/animate-text方式二技能感知的 Agent 运行时按名调用/animate-text安装完成后规格文件位于以下结构.agents/skills/animate-text/assets/effects/id.json # 各库实现配方per-library implementation recipe .agents/skills/animate-text/assets/specs/id.json # 可移植运动契约portable motion contract负责实现 beat 的 sub-agent 读取这些文件后拿到的是精确的 GSAP 时间线、缓动字符串、DOM 拆分规则和 stagger 算法——不需要任何创造性发明。这正是确定性的来源同一个效果 ID无论由哪个 sub-agent、在哪次构建中实现产出的运动参数都一致。24 个命名效果词汇表四大家族一次看清为了方便在尚未加载上游技能时编写故事板适配器文档完整列出了 24 个效果的 ID。注意这里仅提供词汇vocabulary不是实现来源——具体规格以.agents/skills/animate-text/assets/specs/id.json为准。效果按拆分的文本粒度分为四类逐字符Per-character7 个ID直观含义soft-blur-in模糊中柔和淡入per-character-rise逐字符上升typewriter打字机逐字揭示bottom-up-letters字母自下而上top-down-letters字母自上而下stagger-from-center从中心向两侧错开stagger-from-edges从两侧向中心错开逐词Per-word8 个ID直观含义per-word-crossfade逐词交叉淡化spring-scale-in弹簧缩放进入shared-axis-y共享 Y 轴滑动blur-out-up模糊后向上移出kinetic-center-build动能居中构建short-slide-right短距右滑short-slide-down短距下滑depth-parallax-words深度视差词逐行Per-line2 个ID直观含义mask-reveal-up遮罩向上揭示line-by-line-slide逐行滑动整元素Whole element7 个ID直观含义micro-scale-fade微缩放淡入shimmer-sweep闪光扫过fade-through贯穿式淡化shared-axis-z共享 Z 轴纵深scale-down-fade缩小淡出focus-blur-resolve失焦—聚焦解析shared-axis-x共享 X 轴滑动选择建议当你在几个相似效果间犹豫时——例如typewriter逐字阶梯式揭示、无插值vsper-character-rise逐字符上升vsbottom-up-letters字母自下而上——请一次性加载/animate-text通读全部 24 个的目录页对比其描述、时长、缓动曲线和逐库配方后再决定。在 STORYBOARD.md 中按 ID 命名效果每个 beat 中的每个文本元素都可以在故事板里通过效果 ID 显式声明动画。故事板采用## Frame N — Title的帧结构元数据以- key: value形式书写任何未知键都会被保留在帧的extra字段中参见.agents/skills/hyperframes-core/references/storyboard-format.md因此Text Animations这类自定义小节可以安全承载效果命名。文档给出的标准写法如下**Text Animations:** - Main headline: kinetic-center-build - Eyebrow label: soft-blur-in - Body copy 3 lines: mask-reveal-up实现该 beat 的 sub-agent 会先加载/animate-text若尚未加载然后从上游技能的assets/specs/与assets/effects/中读取每个被命名效果对应的规格与实现配方。这种故事板写意图、sub-agent 查规格的分工与 HyperFrames 核心的预计算布局常量、单一暂停时间轴、确定性渲染契约天然契合——效果 ID 就是契约本身。何时不需要上游技能内联实现的三种典型场景如果某个 beat 的文本动画简单到可以用散文描述例如headline 逐词淡入上浮80ms stagger完全可以就地用本仓库已有的 GSAP 知识实现无需引入上游目录。文档明确指出上游目录最有价值的场景只有三类跨多个 beat 复用某个具名效果——让整部视频像同一个设计系统而不是一次性的零散动画在几个相似效果之间做选择——需要一次性看到全部 24 个的对比需要布局感知的效果kinetic-center-build、short-slide-right、short-slide-down——这类效果仅靠参数不足以描述上游携带了自定义布局算法。对于其余情况仓库自身已提供两条直接可用的内联路径逐词动能排版Per-Word Kinetic Typography见.agents/skills/hyperframes-animation/techniques.md第 4 条。单词逐个出现同步到transcript.json时间戳滑动距离逐词衰减80→60→50→25→12px模拟镜头落定的质感// 单词起始时间相对 beat 起点秒与水平滑动衰减px var timings [0.0, 0.23, 0.28, 0.63, 0.78]; var slides [80, 60, 50, 25, 12]; document.querySelectorAll(.word).forEach(function (word, i) { tl.from(word, { x: slides[i], y: 14, opacity: 0, duration: 0.35, ease: power2.out }, timings[i]); });逐字符打字Character-by-Character Typing见同文件第 7 条。终端风格逐字符揭示用ease: steps(1)驱动光标闪烁——离散开关、无插值与typewriter的steps(1, end)语义同源var CMD npx hyperframes init; var typed document.getElementById(typed-text); // 光标闪烁steps(1) 产生离散开/关 tl.to(.cursor, { opacity: 0, duration: 0.12, yoyo: true, repeat: 20, ease: steps(1) }, 0); // 逐字符更新文本内容 for (var i 0; i CMD.length; i) { (function (idx) { tl.call(function () { typed.textContent CMD.substring(0, idx 1); }, null, (idx / CMD.length) * 0.9); })(i); }此外.agents/skills/hyperframes-animation/adapters/gsap-easing-and-stagger.md提供了内联实现所需的完整缓动词汇表power1–power4、back(N)、elastic、bounce、expo、sine、circ、steps(N)均含.in/.out/.inOut变体其中steps(N)离散 N 步跳跃、无插值正是打字效果、光标闪烁的标准选择。stagger 建议使用对象形式each/from/amount/grid/axis而非手工延迟这样在目标数量或顺序变化时依然保持正确。离线回退没有上游技能时怎么办当上游技能不可用时——离线构建、网络受限、或 agent 运行时不支持技能加载——sub-agent 的既定回退策略是仅凭效果描述实现动画用 GSAP 知识加上效果 ID 所表达的意图。例如typewriter 逐字符阶梯式揭示无插值对应steps(1)语义soft-blur-in 模糊淡入mask-reveal-up 遮罩向上揭示。这种回退之所以可行是因为效果 ID 本身就是意图契约——即便拿不到精确的 240ms / 46ms stagger 数字实现者仍能忠实还原效果的动词而不是偏离到完全不同的运动。它保证了故事板的可移植性同一份STORYBOARD.md在有上游技能时精确实现在无上游技能时近似实现但绝不错位。落地时的确定性约束与 HyperFrames 契约对齐无论选择上游规格还是内联实现文本动画都必须服从 HyperFrames 的确定性渲染约束.agents/skills/hyperframes-core/references/determinism-rules.md单一暂停时间轴gsap.timeline({ paused: true })同步创建并注册到window.__timelines键与data-composition-id一致禁止墙钟依赖视觉状态不得依赖Date.now()、performance.now()、未播种的Math.random()循环次数须有限计算如repeat: Math.max(0, Math.floor(duration / cycleDuration) - 1)禁用repeat: -1禁止在async/setTimeout/Promise/事件处理器中构建时间轴——渲染器可能在它们完成前采样动画属性受 allowlist 约束只动画opacity、x、y、scale、rotation、color、backgroundColor、borderRadius等绝不动画display/visibility预计算布局常量不要在 tween 时用getBoundingClientRect()推导位置——渲染器并行采样会导致失同步。动态文本排版可借助window.__hyperframes.pretext与fitTextFontSize做纯算术布局约 0.0002 ms/次。对于typewriter这类需要拆 DOM 的效果还要注意.agents/skills/hyperframes-animation/techniques.md第 7 条中的做法逐字符更新应通过tl.call()挂在可 seek 的时间轴上而非裸gsap.to()或事件驱动确保捕获引擎非线形 seek 时也能复现。.agents/skills/hyperframes-creative/references/motion-principles.md则补充了创作侧纪律总 stagger 序列控制在 500ms 以内、先动的元素最有重量、进入用.out缓动、每场至少变化 3 种缓动——这些让文本动画在确定性正确之上还有节奏。与内置蓝图的协同typewriter-reveal 与 kinetic-type-beatsHyperFrames 的蓝图层.agents/skills/hyperframes-animation/blueprints-index.md中有两个重度依赖文本动画的模板可作为命名效果的真实落地参照typewriter-revealHook / Brand_Outro3.6–7s真实光标像人一样打字并编辑一行文字随后折叠成一点并弹出品牌元素或让品牌标识常驻而副行继续打入最终 CTA。其规则映射显示字符级打字揭示对应discrete-text-sequence规则与gsap-effects中的 typewriter 配方折叠动画对应scale-swap-transition品牌弹出对应spring-pop-entrance——完整的蓝图规格见.agents/skills/hyperframes-animation/blueprints/typewriter-reveal.mdkinetic-type-beats6 个角色均可用的工作马扁平、居中、粗体的镜头运动本身就是文字在变化——固定行原位换词、或整屏语句逐拍构建并落在 spring-pop 收尾上。这正是kinetic-center-build等布局感知效果大显身手的场景。当你在这些蓝图中为每个文本元素按 ID 命名效果时kinetic-center-build主标题、soft-blur-in眉题、mask-reveal-up多行正文组合起来就构成了一套跨镜头一致的文本运动设计语言。总结animate-text适配器回答了一个核心工程问题如何在多 Agent 协作的确定性渲染流水线里让命名文本效果既精确可复现、又不背负外部许可负担。它的设计可提炼为四点目录外置上游为 source of truth本仓库只维护词汇与加载方式、契约与实现分离specs/管动什么effects/管怎么动、按 ID 声明故事板只写意图、分级回退有上游用精确规格无上游按意图内联实现。配合本文梳理的 24 个效果词汇、npx skills add pixel-point/animate-text加载命令、STORYBOARD.md引用语法与 HyperFrames 确定性约束你即可在自己的 HyperFrames 合成中稳定产出高质量、可复现的文本运动。【免费下载链接】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),仅供参考