HyperFrames 动画蓝图索引全解析22 个时间编码镜头模板与 Role 驱动选型体系【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文深入剖析 HyperFrames 动画技能hyperframes-animation中的蓝图层blueprints——一套从 178 条黄金产品发布视频片段中反向工程出的、产品无关且带时间码的镜头模板shot template。你将掌握蓝图的定义与结构、22 个具体模板的适用场景与持续时间、8 种故事板角色Role与蓝图之间的映射关系以及复刻 / 改编 / 组合三种使用姿势从而在分镜设计时快速为每一帧找到最合适的已证明的形状proven shapes。一、什么是蓝图从黄金片段到时间编码镜头模板在 HyperFrames 的动画知识体系中blueprints-index.md 是整个蓝图层的入口entry point。按照技能文档SKILL.md的分层设计HyperFrames 的全部动效知识被组织为四层rules原子规则单条动效配方例如弹簧弹入、色差故障、图表描边等blueprints多阶段场景蓝图整段镜头的模板transitions场景间转场adapters运行时适配器GSAP、Lottie、Three.js、Anime.js、CSS、WAAPI、TypeGPU 等。一个blueprint蓝图是一个产品无关、带时间码的镜头模板——形如Scene N (a–b s): …其中包含[slots]可替换槽位和一个命名的signature move标志性动作。它并非来自想象而是从两轮挖掘中的 178 条黄金产品发布片段反向工程而来另有 13 条遗留蓝图以同样的 brief 格式反译。关键特性是一张蓝图编码了整段镜头的完整时长——揭示节奏对齐到口播台词reveals paced to the spoken line而不是在 t0 一次性倾倒内容因此实例化一张蓝图在结构上能保证内容持续到达而非冻结。完整模板位于blueprints/id.md目录skills/hyperframes-animation/blueprints/。在**步骤 4视觉设计**中每一帧实例化一张蓝图当没有匹配时则从动作词汇表组合。原文档特别说明Step-4 的具体写法Reproduce / Adapt / Compose即每帧写什么属于visual-design.md的职责该文档位于协作技能链中例如 skills/product-launch-video/references/visual-design.md——本文件扮演的是菜单 选择器the menu the picker的角色。二、蓝图配方的标准结构7 个字段每个蓝图配方文件都遵循统一的结构。以 kinetic-type-beats.md 和 prompt-type-submit-generate.md 为例一个完整的蓝图配方包含以下字段字段作用实例kinetic-type-beatsintent一句话定义镜头本质平面、居中、粗体字的镜头动效就是文字本身在变化roles served可服务的角色清单标注来源 golden shapeHook / Problem / Product_Intro / Benefits / CTA / Brand_Outro共 6 个角色duration持续时间范围3.0–12.9sBenefits staccato 最快约 3.5–4sBrand_Outro 终端 URL 长持有时可达约 12.6sshot structure按Scene N (a–b s)分场景的时间编码拆解Scene 1 首拍落地 → Scene 2..N 节拍原地替换引擎→ Scene N 收尾定格motion vocabulary该镜头使用的动作词汇清单硬切/闪现词替换、原地 token 循环、字符输入闪烁光标等rule mapping每个动作映射到哪条原子规则硬切/状态替换 →discrete-text-sequence弹簧弹入 →spring-pop-entrancecamera modifier可选的摄像机叠加层全局慢速推近、透过超大字形沿 Z 轴推进等源码级细节这些字段不是描述性的装饰而是可直接执行的规格。以 kinetic-type-beats 为例其 shot structure 折叠了两个子形状sub-shape(A) 固定行 token 替换行固定、仅变量槽通过瞬间硬切替换[token A]→[token B]或末词退格重打与(B) 多节拍陈述构建每个全屏节拍硬切到新背景/新行各自拥有独立入场/出场动作。它明确列出了每拍的角色变体Hook 闪回、Hook 升级、Problem、Product_Intro、Benefits、CTA、Brand_Outro 等并给出每个动作对应的规则映射——例如逐词交错淡入/模糊揭示映射到kinetic-beat-slam与depth-of-field-blurRGB 分离色差抖动映射到chromatic-glitch确定性偏移色拷贝层抖动干净归位。所有原子规则的完整清单见 rules-index.md。三、22 个蓝图全景形状、角色与持续时间以下是蓝图索引中收录的 22 个蓝图每个的完整配方位于 blueprints/ 目录下对应文件文字驱动类Text-Drivenkinetic-type-beats角色Hook、Problem、Product_Intro、Benefits、CTA、Brand_Outro3.0–12.9s——全能型workhorse6 个角色。扁平、居中、粗体字的镜头动效就是文字本身在变化固定行原地换 token硬切或语句跨全屏节拍构建每拍独立动作并以弹簧弹入收尾。当文字承载整段镜头、没有场景/表面/点击时优先使用。配方见 kinetic-type-beats.md。typewriter-reveal角色Hook、Brand_Outro3.6–7s——真人式打字光标逐字输入并编辑一行然后折叠弹出品牌收尾或在持久标记下由子行输入至最终 CTA。当有人正在打字应成为驱动引擎时使用。摄像机驱动类Camera-Drivenspatial-pan-stations角色Hook、Problem、Product_Intro7–10s——在一张超大幅画布上预置带标签的站点由单个虚拟摄像机反复横/斜平移逐一居中并揭示标注末站停留。用于里程碑时间线、连成一团的痛点站点网或双镜头概念解码带一次横移进入直播演示。camera-journey角色Benefits、Key_Feature5.6–11.1s——真实视口摄像机就是讲故事的人多段有动机的旅程俯冲→节拍触发→前往后果/重新定位→落地推进贯穿一个连续世界。两个子形状(A) 动作往返俯冲到面板→点击/发送触发→摄像机甩到后果以元素动效渲染处与(B) 无光标飞行纯电影感 3D 飞行运动模糊、景深、倾斜压平全程无光标。当摄像机自身的行进讲述因果或奇观故事时使用。配方细节见 camera-journey.md。zoom-out-workspace-reveal角色Hook、Benefits6.8–11s——从贴满全幅的特写细节开场微动作特写推进后一次连续减速的拉远揭示整体设计工具工作区/多面板 Agent 工作区随后画面锁定、元素级收尾继续。拉远本身是引擎——是推近类形状的结构性反相全程不得出现推近。结构与装配类Structure Assemblyconstellation-hub角色Hook、Social_Proof、CTA5–8s散射漂移结束卡约 2.5s——带图标的节点弹簧弹入围绕中心成环随后归结到核心推近景深收拢到核心、持久的中心标记卫星环绕或光标点击坍缩轨道并从中弹簧弹出产品演示CTA。第三种结束方式散射漂移结束卡无环、无摄像机——约 20 个图标围绕衬线标题弹入并缓缓外漂全静态画框。grid-card-assemble角色Key_Feature、Benefits、Social_Proof3.0–10.5s——N 个项目磁贴/卡片/Logo/列表行交错级联自组装成网格或纵向列表并保持可选摄像机拉远将阵列揭示于更大整体中。logo-assemble-lockup角色Product_Intro、CTA、Brand_Outro4.4–11s——品牌标志/字标在屏幕上诞生由部件组装元素装配/环绕、字母级联、轮廓描画、摄像机穿过负空间、在清空舞台上从零弹簧绽放、从前句无缝链式变形、由像素流吸收或已组装完成并随卫星消散——最终归结为居中的组合标志可选延伸至 URL/CTA/结束卡。界面演示类UI Demonstrationcursor-ui-demo角色Product_Intro、Key_Feature、Hook、Benefits4.0–12.9s——可见的自定义光标驱动重建的 App UI通过点击/悬停/拖拽让画面逐镜头改变状态摄像机追逐每次交互或锁定静态舞台、由元素替换完成摄像机工作。device-surface-showcase角色Key_Feature、Product_Intro5–11.3s——设备样机或浮动窗口作为主角其屏幕循环真实流程摄像机从静态保持到连续 3D 推进。机制丰富静态导览/浮动窗口推滚/3D 手演示/无光标分步流程/展示轮播分步流程变体将其扩展到 Product_Intro。注意其3D 手势输入 WebGL 泛光/传送门变体需要 R3F/Three.js WebGL是规则库之外的更重能力应少用或改选更简单的变体。prompt-type-submit-generate角色Hook、Product_Intro、Key_Feature、CTA5.2–12s——AI 时代演示镜头提示词/查询/命令输入真实产品输入框机器作答——状态剧场进入流式答案/动作日志/差异卡片/图表/生成工件完整闭环、即时结果表面被再次查询或在提交处切断、让提问本身成为表演含安装命令 CTA 结束卡。当节拍是看我提问、看它回答时使用——键盘驱动而非点击 UI那是 cursor-ui-demo也非裸打字的排版那是 typewriter-reveal。完整分场景拆解见 prompt-type-submit-generate.md。agent-progress-theater角色Key_Feature4.2–11.6s——将 Agent 的工作演绎为工作状态剧场单个触发节拍把画面交给机器加载器旋转、状态短语轮换随后收据级联——检查清单/发现卡的行逐行到达并打勾徽章翻转、删除线、严重性药丸或对话线程逐条构建至确认处的摄像机推近。panel-edit-live-sync角色Key_Feature5.3–11.9s——检查器/编辑器面板绑定目标表面的双分舞台光标或插入符连续操纵控件数值擦洗、单位/代码生成下拉、缓动手柄拖拽、内联重打耦合表面同一节拍内实时更新摄像机保持或击打-返回但绝不失去耦合。当特性本身就是实时编辑/检查改这个看它变时使用。transcript-scroll-artifact-reveal角色Key_Feature5–11.8s——画面沿一张超长全幅内容表面纵向行进Agent 转录、任务流或分析文档无设备框靠摄像机平移或元素滚动把生成的工作当作证据来阅读随后一个焦点交互文件芯片点击、引用高亮、行展开切入工件揭示工作区拉远、电子表格放大到高亮单元格、内联面板。数据驱动类Data-Drivendataviz-countup角色Hook、Problem、Product_Intro、Key_Feature、Social_Proof4–12s——数字与图表是主角计数环/数字、趋势图、倾斜统计网格由摄像机穿透式推进或横滚最终落在一条主角指标上。当数据承载论点时使用量化恶化中的问题、以看结果自信开场、冷开场单一爆炸性统计、深色光标擦洗统计蒙太奇证明特性或在打字接力中客串单一仪表计数。收尾与转换类Resolution Transitiontitlecard-reveal角色Benefits、Social_Proof、CTA、Product_Intro3–5s——平静的喘息/落地节拍单张干净标题或品牌/证明卡以恰好一个克制动作揭示上滑交叉淡化或擦除揭示随后静止保持。低动效本身就是负载而非缺陷。也可作为卡片链运行——2–3 张近静止单色卡以瞬时硬切接缝约 5.5–9.5s 总时长。分场景结构与静止保持即交付物的克制契约见 titlecard-reveal.md。comparison-split角色Key_Feature4–6s——两个等重配对项从相对两侧进入带镜像 3D翻书倾斜并排保持随后内缘药丸徽章弹簧弹出各落一拍。用于 A/B 或X Y 组合——同时权衡两个互补能力不超过 2 项、非顺序步骤。overwhelm-surround角色Problem6–9sclutter-shove 变体约 10s——靠累积制造淹没感可辨识表面组装、密度标记图标散射进入、中心者变形为观众自己的头像随后元素从四面合拢被包围而非被放大进入。用于你被工具埋没的痛点。第二种解法clutter-shove-to-question在慢速拉远下累积然后推近把杂乱推到画框边缘两段式衬线问题在腾出的中心构建。ticker-takeover角色Hook、Brand_Outro5–7s——打字引入 强调词循环切换随后主角从画外闯入、物理性把文字挤到一边——是碰撞而非淡入——独自落定。fixed-anchor-cycle角色Hook、Benefits、Brand_Outro6.6–11.1s——一个元素保持钉住字标/创作框/锚行进入一次后永不移动相邻区域或整个周边主题循环经过多个离散状态硬切标签替换、垂直轮播、逐词高亮步进或原地主题变形节拍常被操控稳态步进或慢→加速风暴最终在强调节拍上归结为完整组合标志。锚点的静止本身就是主张。video-text-pivot角色Product_Intro、Key_Feature6–8s——产品视频居中呼吸然后滑向一侧把重量交给一条主角统计双方清除后动效文字输入腾出的中心以渐变药丸密封。用于看特性→看影响视频必须保持可见滑动绝不剪切。cta-morph-press角色CTA、Hook4–6sHook 开场 5–7.5s——静止品牌标志在同一中心凝聚为更亮的 CTA随后光标抵达并落下一次有人味的点击并带反馈。用于聚焦点这里的收尾引导视线从身份走向动作。角色扩展到 Hook同一机制作为开场——平场上孤立的控件药丸/芯片原地变形药丸→菜单、芯片→提示卡执行负载然后消失于打字的收尾标题。仓库 examples/cta-morph-press.html 提供了该蓝图的可运行 4 阶段、5.5 秒编排实例英雄Logo 淡入 → 英雄缩至 0.6 并淡出 → CTA 药丸back.out(2)过冲弹入 → 光标弹簧路径接近 → 按下光标与 CTA 以同一 GSAP target 数组[#cta, #cursor]同步压缩至 0.9→ 抬起回弹 1.0。四、Role → Blueprint 选型菜单8 种故事板角色的触发条件这是一个软性SOFT菜单故事真实优先。当产品自身的节拍呼唤某种形状时故事设计才介入——它建议一个已验证的形状绝不规定哪些节拍必须存在。每个角色有 4–11 个选项若无匹配自由组合菜单不是检查清单。每一行都是触发条件——看到它就应伸手去拿该蓝图。角色与本仓库故事板帧的type枚举一一对应Hookhook·Problempain_point·Product_Introproduct_intro·Key_Featurefeature_showcase·Benefitsbenefit_highlight·Social_Proofsocial_proof·CTActa·Brand_Outrobranding。Hook钩子/开场kinetic-type-beats— 一句有力的修辞性台词 /你还在做 X式的点破其中原地换词就是笑点升级式多节拍陈述落弹簧弹入收尾字词节拍归结为 Logo 揭示或居中的三连节拍某拍可以是非文字元素。typewriter-reveal— 打出一句共鸣台词折叠它弹出品牌Logo 或产品 UI——这是日常之痛这是我们。spatial-pan-stations— 里程碑时间线平移到当下演进出我们。constellation-hub— 工具/节点星座 摄像机推近它连接一切。cta-morph-press— 平场上孤立控件原地变形药丸→菜单、芯片→提示卡执行然后消失于打字的标题一个控件做一件事开场。ticker-takeover— 循环强调词可能是 X或 Y…被从画外闯入的主角暴力替换。fixed-anchor-cycle— 静态引导行保持强调行在其下轮播观众/选项点名然后清空进入陈述节拍落地品牌行。prompt-type-submit-generate— 看我提问打字标题 → 一次性推近到产品输入框 → 提示词输入、剪辑在提交处结束或整个演示闭环运行、第二次命令在剪切前开始。cursor-ui-demo— 环境多光标工作坊带标签的队友光标实时操作设计画布抓-拖-放、放下时换色标题在演示之上构建——实时工作坊本身就是钩子。dataviz-countup— 冷开场计数爆发图标在中心成簇戳入一条戏剧性统计向上爆涨图标向外甩到各自位置以缓慢靠拢收尾。zoom-out-workspace-reveal— 全幅图形谜题色块/花形/宏观被一次不间断的减速拉出、穿过嵌套层级进入制造它的设计工具工作区锁定后画布继续动画。Problem痛点kinetic-type-beats— 3–5 条短痛点陈述各在空画布上独立落地或问句/钩子短语接力在中心缩放弹出可选以产品表面作为元素动作归结。spatial-pan-stations— 平移一个连成网的痛点站点以纠缠的结收尾。dataviz-countup— 计数环/图表/统计网格穿透式推进戏剧化一个恶化或巨大的问题。overwhelm-surround— 可辨识的工具变形为观众本人然后任务气泡从四面合拢你被埋了。Product_Intro产品介绍kinetic-type-beats— Introducing…硬切名字点名落在品牌名/Logo 上也可是固定标题 一个换词槽、逐词运行带每主角词特效收尾、或锚定字标变形而出。logo-assemble-lockup— 无字高级品牌小短曲元素脉动/环绕并围绕标志装配。cursor-ui-demo— 产品表面的第一眼光标扫入介绍 App。dataviz-countup— 硬切进数据可视化卡网格摄像机滚动到发光主角指标 动效标语。video-text-pivot— 产品视频滑开把重量交给主角统计然后把中心让给动效冲击文本。spatial-pan-stations— 一次横向平移桥接的双镜头条带静态短语的强调词 3D 翻板解码概念落地随后摄像机带视差平移到实时光标打字演示。prompt-type-submit-generate— 产品第一眼是它的创作框或搜索栏——长提示词或短查询带附件/下拉选择/实时自动补全输入导向确认控件。device-surface-showcase— 在持有的表面内完成无光标端到端流程设置/认证 → 动作 → 成功以标题卡首尾相夹。titlecard-reveal— 三节拍暗色标题前奏Logo 弹出 → 名称版本追加 → 标语卡在任何产品 UI 之前以模糊吸附交接链接。Key_Feature核心特性grid-card-assemble— 带标签的特性磁贴/药丸网格自组装或玻璃卡由摄像机拉远揭示或实时填充的数据面板——骨架填充、系留卡、组装后状态翻转。cursor-ui-demo— 端到端演示一个特定多步骤工作流落在动作按钮/结果上。device-surface-showcase— 设备/窗口主角屏幕循环静态导览·浮动窗口推滚·3D 手演示。comparison-split— 两个配对能力并排、镜像翻书倾斜A/B 或XY 组合。video-text-pivot— 特性剪辑滑开让位给铺满画面的指标然后是排版冲击行。dataviz-countup— 深色擦洗蒙太奇动效标题节拍与自绘图表和光标擦洗仪表盘chart-scrub-readout剪切拼接。prompt-type-submit-generate— 特性即一次 prompt→response 往返提交进入思考状态然后流式答案、动作日志、差异卡、图表或即时生成工件。agent-progress-theater— 特性就是 Agent 在工作计划/扫描/修复/自动化加载器 状态剧场归结为逐行打勾的检查清单或构建至确认收尾的线程。panel-edit-live-sync— 检查器/编辑器面板与绑定目标实时同步擦洗→它旋转、重打→它缩放、选取→它转换用于价值主张就是实时耦合本身的特性。camera-journey— 无光标电影感 3D 飞越产品表面——运动模糊、景深、倾斜压平——猛烈落在 CTA/主角卡上子形状 B。transcript-scroll-artifact-reveal— 纵向行进超长转录/流/文档作为生成工作的证据然后一次交互切入工件它做了这一切→这是交付物。Benefits收益kinetic-type-beats— 8–12 条短价值短语的快速断奏蒙太奇或 2–4 条慢速陈述接力、每条保持约 1.5s。grid-card-assemble— 纵向收益列表累积、步进或流经焦点槽可选清空到收尾行。titlecard-reveal— 平静的两行价值标题卡喘息/静止节拍。camera-journey— 一个面板中的小动作在另一区域兑现真实摄像机甩动在物理上连接因果子形状 A。zoom-out-workspace-reveal— 一个小区块的极限特写微动作然后一次快速减速拉远揭示巨大的多面板 Agent 工作区宽景保持时交付物收尾完成。fixed-anchor-cycle— 一个产品表面钉在正中整个主题逐拍换肤同一个提示词在每个工具里。cursor-ui-demo— 演示|文本|演示三明治两个静态舞台演示节拍经由全屏动效/标题插曲桥接再返回。Social_Proof社会证明constellation-hub— 产品标志为枢纽、合作方 Logo 环绕与你的技术栈协同。grid-card-assemble— Logo 墙构建后拉远揭示庞大生态。titlecard-reveal— 把繁忙的开场擦除掉露出干净品牌组合标志 N 团队所爱统计。constellation-hub— 散射漂移结束卡约 20 个 App 图标全幅弹出环绕衬线标题、静态画框下缓缓外漂连接数千个 App。dataviz-countup— 单个径向表盘计数仪表作为一记节拍嵌入动效打字接力。CTA行动号召kinetic-type-beats— 一句有力的收尾行或短价值栈逐拍弹到 Logo/URL 上或 3–5 节拍链、每拍自带动效恶作剧后 Logo 成形。logo-assemble-lockup— Logo 构建 → 摄像机推穿进入最终 URL/CTA 动词。cta-morph-press— 品牌标志在同一中心凝聚为 CTA然后光标落下一次有人味的点击。titlecard-reveal— 单色结束卡链陈述 → CTA 行 → 字标/Logo以瞬时硬切接缝最终 Logo 保持到最后一帧。constellation-hub— 轨道坍缩分类图标在空 CTA 周围漂移光标点击把轨道向点击点内爆产品演示从坍缩中弹簧弹出。prompt-type-submit-generate— 安装命令结束卡标题降级终端药丸弹簧进入命令输入并保持、光标闪烁。Brand_Outro品牌收尾kinetic-type-beats— 快速动词连发归结到品牌唯一关键词或放松的全幅节拍接力终止于长持 URL 结束卡。typewriter-reveal— 持久品牌标志 下方输入/切换 CTA 轨道。logo-assemble-lockup— 特性/UI 元素清场组合标志自绘成形。ticker-takeover— 选项循环然后品牌标志闯入并独占画框。fixed-anchor-cycle— 字标钉住赞美引文/标语高亮在其旁循环可选加速归结为完成的组合标志。覆盖度说明每个角色 ≥2 个选项每张蓝图服务 ≥1 个角色。kinetic-type-beats是全能王6 个角色dataviz-countup现覆盖 5 个device-surface-showcase曾角色狭窄现通过挖掘出的分步流程变体也服务 Product_Intro。五个形状——comparison-split、overwhelm-surround、ticker-takeover、video-text-pivot、cta-morph-press——由 hyperframes-animation 蓝图补充另外七个——prompt-type-submit-generate、agent-progress-theater、panel-edit-live-sync、camera-journey、transcript-scroll-artifact-reveal、zoom-out-workspace-reveal、fixed-anchor-cycle——从黄金片段语料中挖掘而来。五、选型四步法Picking Guidance原文档给出的实际操作流程找角色在菜单中找到帧的角色选择形状适合这个节拍的蓝图故事可能已提名候选 id——确认或否决。若两个都合适优先选择动作更接近你计划的那个。读配方打开blueprints/id.md阅读其时间编码模板、[slots]和命名的标志性动作。选姿势选择一种姿态——Reproduce复刻槽位干净映射、Adapt改编结构合适、内容/表面不同保留标志性动作、或Compose组合没有匹配 → 从动作词汇表构建。每帧具体怎么写保留/改变什么、每帧字段属于visual-design.md的职责以其为准。兜底组合若菜单中无匹配从动作词汇表motion vocabulary组合——仍要把揭示节奏对齐到 VO 口播不要强行套用错误的蓝图。六、Motion Coverage蓝图如何映射到底层规则黄金词汇表中的每一个反复出现的动作都由本技能本地的rules/目录支撑完整索引见 rules-index.md其中五个是为补齐语料而新增的depth-of-field-blur景深模糊选择性焦点motion-blur-streak方向性速度模糊/拖影depth-scatter-assemble3D 深度云散射重组spring-pop-entrance规范的入场弹入——区别于点击/按下的press-release-springambient-glow-bloom环境泛光晕开每张蓝图的rule mapping字段都会引用真实的规则文件。例如 prompt-type-submit-generate 的映射覆盖了完整链路字符级输入/占位符清除/退格重打 →discrete-text-sequencegsap-effects打字机配方闪烁光标 →context-sensitive-cursor输入卡随文字填充向下生长/换行 →anchored-layout-expand提交后内容消失/布局切换/代码↔预览翻转 →scale-swap-transition流式文本块/日志行推挤内容下移 →dynamic-content-sequencingspring-pop-entrance图表描线 →svg-path-draw计数滚动 →counting-dynamic-scale⌘K 模态 背景模糊 →depth-of-field-blurspring-pop-entrance长静帧收尾只留光标闪烁 →context-sensitive-cursor闪烁是被认可的唯一残余动作。变体的出处from shape-name标注了变体被反向工程出的黄金形状案例级黄金映射位于 c2v-bench 挖掘报告中仅维护者可见——消费方 Agent 只需要形状名即可。运行时硬约束蓝图必须运行在 HyperFrames 的核心契约之上——单条暂停的 GSAP 时间线注册于window.__timelines、data-duration决定长度、禁用Math.random/Date.now/performance.now、禁用repeat: -1、空间动效仅用 GSAP 变换别名x/y/scale/rotation布局常量化绝不在 tween 时调用getBoundingClientRect()。以 camera-journey 为例其 Seek-safety 条款强调整段旅程——每一腿、每个模糊包络、每次景深拉焦——都住在同一条暂停时间线上一因此任意帧寻址都能复现精确的旅程中途摄像机姿态单相机状态对象 单一写入器applyCamera()合成变换半途结束俯冲也没问题——寻址到最后一帧只是落在 tween 中途。同时摄像机旅行会让世界内容越过画框边缘需要在场景根上保持overflow: hidden并给移动的.world包装器标记data-layout-allow-overflow否则check会对每个被旅程抛在身后的面板报告text_box_overflow/container_overflow。七、蓝图使用场景什么时候该加载蓝图按照 SKILL.md 的路由建议蓝图不是默认起点——默认是组合 2–4 条原子规则更快、代码更少。加载蓝图的时机是场景匹配某个已有的预设计多阶段模板品牌揭示、社会证明等复用其阶段流水线能省下真实的创作时间你想要一段复杂 4–5 阶段编排的可运行 ground-truth 代码。不要投机性地阅读蓝图当已决定需要场景级编排时再加载。每个入口都指向blueprints/id.md配方文件。例如全套可运行示例位于 examples/ 目录如brand-reveal-assemble-zoom.html、comparison-split-cards.html、hook-counter-burst.html、takeover-ticker-displace.html、cta-orbit-collapse.html等可以直接对照蓝图配方查看真实的 GSAP 编排实现。八、总结菜单、选择器与已证明的形状蓝图层是 HyperFrames 动画技能中确定性 × 可复用 × 已被证明的镜头模板系统以时间码编码整段镜头的节奏以[slots]承载内容替换以 signature move 保证每张蓝图拥有可识别的标志性动作并以 Role → Blueprint 软菜单把故事板的角色枚举hook/pain_point/product_intro/feature_showcase/benefit_highlight/social_proof/cta/branding与已验证的形状连通。无论是从 blueprints-index.md 挑选形状、深入 blueprints/ 读取配方还是回溯到 rules-index.md 与 examples/ 落地实现这条链路保证了结构上复用、节奏上对齐口播、运行时确定可寻址——这正是 HyperFramesWrite HTML, render video工作流中视觉设计步骤的核心引擎。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考