Agent Progress Theater：HyperFrames 动画蓝图中的“智能体工作进行时“状态剧场

Agent Progress Theater：HyperFrames 动画蓝图中的"智能体工作进行时"状态剧场

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes

导读

agent-progress-theater（智能体进度剧场）是 HyperFrames 动画技能库（skills/hyperframes-animation）中专门用于Key_Feature（核心功能）帧的蓝图之一：当产品卖点是"智能体正在替你执行多步工作"（制定计划、扫描仓库、修复漏洞、处理基础设施），而证据就是一段工作状态剧场——加载器旋转、状态短语轮换、计数跳动，随后工作成果以一张不断打勾的清单卡片（checklist/findings card）或一条逐条构建的对话线程形式呈现在观众眼前。读完本文，你将掌握该蓝图的时间编码结构（4 幕场景与 4.2–11.6s 时长分配）、两类子形状（A：清单/发现项剧场；B：消息线程回报）、完整运动词汇表、以及每一条运动背后的原子规则实现映射，并能在 HyperFrames 单一暂停时间轴（single paused timeline）的确定性渲染契约下直接落地编码。

---

1. 蓝图定位：这是一场"工作状态剧场"，不是输入输出演示

agent-progress-theater的intent定义得非常明确：智能体工作以WORKING-STATE theater（工作状态剧场）的形式呈现——一个短促的触发拍（trigger beat）把画面交给机器，然后机器在观众眼前肉眼可见地工作：加载器旋转、状态短语切换、圆点脉动、计数器跳动；随后"回执"（receipt）以两种形态到达：

• 一张清单/发现项卡片：行项目逐一级联进入，并发生CHANGE STATE（徽章翻转为对勾、标签被删除线划掉、严重程度药丸读出结果）；
• 或一条对话线程：消息逐条堆叠构建，最终以一次镜头推近（camera push-in）落到确认行上收尾。

主题是机器在时间中执行劳动（the machine performing labor over time）。为了精确划界，蓝图明确列出了三个"它不是什么"：

它不是什么	关键区别
不是"提示词等待输出"的演示	永远不出现打字输入——触发方式是点击、菜单选择或一个已经正在运行的扫描，屏幕上不出现 prompt/input 的键入过程
不是cursor-ui-demo	本蓝图至多一次"点燃式点击"，之后光标退出画面，UI 自行表演（而cursor-ui-demo由光标持续驱动整个工作流）
不是grid-card-assemble	那个蓝图的行项目组装成静态枚举并保持；本蓝图的行项目是"活的"——它们作为智能体输出抵达，然后在观众注视下逐个打勾变异（MUTATE）

这条划界逻辑在 skills/hyperframes-animation/blueprints-index.md 的蓝图菜单中得到呼应：agent-progress-theater被列为 Key_Feature 角色下"状态变异本身就是演示"的选项——"reach for it to dramatize an agent doing multi-step work where the state mutation IS the demo"。

2. 服务角色与使用场景（Roles Served）

蓝图声明了两个来源的 Key_Feature 角色定位：

1. 来自agent-progress-theater本体的 Key_Feature：当功能是"智能体执行多步工作"（build a plan / scan a repo / fix a vulnerability / handle infra for you），且证明方式是状态剧场——带打字标签的加载器锁屏（loader lockup）、在[accent]强调色加载器下成对切换的状态短语、随后一张在观众面前填充并逐项打勾的清单/发现项卡片。
2. 来自message-thread-payoff的 Key_Feature：当智能体的工作存在于对话或自动化线程中——用户/智能体气泡与工具调用/回复卡片按顺序弹出，工作状态由脉动的加载圆点或快速跳动的 diff 计数器承载，最终以一次镜头推近紧贴确认行解决（[reaction pill]、"Sent using[@Bot]"、一个感谢气泡）。

从 skills/product-launch-video/references/story-design.md 的角色体系看，两个来源最终都落到feature_showcase（Key_Feature）帧类型上——它属于产品推广视频中"展示功能"的核心帧，而不是 Hook 或 CTA。

3. 时长窗口（Duration）

蓝图给出的总时长窗口为4.2–11.6 秒，按成员长度分三档：

• 短成员：单张卡片+打勾，或单线程拍，约4–5s；
• 长成员：完整链路——触发 → 过渡间奏（interstitial）→ 状态切换 → 回执卡片，约9–12s；
• 线程回报（sub-shape B）：横跨4.2–9.1s。

这组时长约束与 HyperFrames 动画的确定性契约直接相关：单一暂停时间轴、data-duration决定长度、禁止Math.random/Date.now/performance.now（见 skills/hyperframes-animation/SKILL.md 的 Critical Constraints）。所有场景时间点都是预编码常量，允许逐帧 seek。

4. 镜头结构：四幕场景与两类子形状

蓝图整体画面基调是暖色平面画布：[off-white / warm beige / near-white bg]背景，可选[faint grid / dot-grid / wavy-line]纹理；白色圆角卡片配柔和投影；一个[working accent]强调色专属于机器（加载器、状态词、活动步骤），一个[done color]完成色专属于完成态（对勾、"Completed"）；相机保持静态或至多一次缓慢移动——运动压倒性地是元素级弹簧、交错（stagger）与状态翻转。

蓝图折叠为两个子形状，各自拥有独立的四幕编排：

• (A) checklist/findings theater：清单/发现项剧场；
• (B) message-thread payoff：消息线程回报。

4.1 Scene 1（0.0–~1.5s）——触发拍（The Trigger）

某个东西请求机器开始工作，用一拍完成。子形状 A 有四种变体：

• 选项菜单（Option menu）：居中白色药丸卡片提出[the question]；它向下弹开成一个圆角菜单，[3–4 个选项行]交错淡入/滑入，每行带数字徽章。光标进入，在行间"悬停舞蹈"（浅色[hover fill]高亮跟随光标），然后点击选中行（按下弹簧）；整个菜单向中心缩小并淡出。这是全片唯一一次光标出现。
• 模态点击（Modal click）：白色模态框特写，含[Dismiss]/[action button]；手形光标点击动作（快速按下弹簧）；模态淡出。可选：画布上出现衬线体[interstitial line]——单词交错落地、保持、再逐词淡出，同时背景切换。
• 已经在工作（Already working）：[Scan in progress]式状态——细[accent]圆弧加载器在标题+正文+[Starting…]药丸上方旋转（光标静止停靠其上）；只有加载器在动。整场随后快速放大并淡出——一种"推穿式退出"（push-through exit）。
• 工作区推穿（Workspace push-through）：快速镜头推近穿过多面板[workspace: builder / editor / terminal]——面板从视口边缘放大掠过，清场露出裸画布。

子形状 B 的触发变体：

• 线程开场（Thread opener）：[user bubble]弹簧弹出（"[the ask]"），或一张统计卡弹出，其绿色/红色[diff counters]快速跳动并落定——自动化流程的开场回执。

4.2 Scene 2（~1–4s）——工作状态（机器在表演）

画面属于机器；没有任何东西可点击。从 1–3 个工作母题（working motifs）中挑选并串联（CHAIN）：

• 加载器锁屏（Loader lockup）：旋转的[accent asterisk / arc]旁，[working label]快速打字（"Buildi→Building plan…"），字母上掠过从左到右的微光扫描（shimmer sweep）；加载器可短暂地在星号↔圆点间变形再变回。
• 状态对句（Status couplets）：2–3 对居中的短语——深色[action line]上方是[accent status word]（"Thinking…"、"Noodling…"）及其加载器——以稳定节奏快速淡入/滑出切换。
• 扫描/工具标签：向右打字/展开到完整字符串，然后缩小并停靠到左上角作为固定角标头（画布从此属于它产出的东西）。
• 状态标题时态翻转：行项目落地时标题从 "Using[Tool]" 翻转为 "Used[Tool]"，下方缓缓脉动的 "Thinking" 与灰色元信息行（"Exploring[N]files…"）淡入。
• 线程机制变体（B）：[agent reply]淡入/滑入，随后一条等宽字体[tool_call]行出现在其下——小图标 +[tool name]+三个脉动加载圆点；或指令气泡滚入视野（内部窗口滚动，画框静止），随后[brand logo]弹出在 "Sending message…" 行旁。结果落地的那一刻脉动立即死亡——载荷抵达时圆点消失。

4.3 Scene 3（~2–4s）——回执级联进入（回报引擎）

工作物化为一张自我构建的卡片：

• 清单变体（A）：白色[Progress / summary]药丸或卡片带弹跳弹簧弹出，然后向下弹开（或摘要卡向上滑动，较矮的[findings]面板在其下展开）。行项目逐一进入——滑入+淡出、交错排列——每行含[number badge / severity pill]+[label]+ 可选灰色[meta line]。随后状态变异运行：徽章逐枚从数字描边翻转为实心[done color]圆形+白色对勾（轻微缩放弹跳），被勾选的标签同时被删除线划过并变暗；待处理项保持半绘制圆弧描边动画。在列表中途结束运行——一些项已勾选、一些仍是数字——工作被明显呈现为"进行中"。
• 线程载荷变体（B）：镜头推近/下摇将[tool_call]行居中，一张白色载荷卡片从该行向下展开——2–4 行浅色等宽[key: value]行淡入。随后[resolution message]在其下方展开（内联[code chips]与[link]着色），或一张深色[thread card]从状态行放大到支配画框，同时背景变暗，其[reply]在 "1 reply" 分隔线下展开到位。

4.4 Scene 4（最后 ~1–2.5s）——解决（Resolve）

两种结局：

• 保持/滚动（Hold / scroll，A）：完成（或变异中途）的卡片堆保持静态直到结束，或视口向下滚动到最后一张卡片（最后一拍快速滚动），露出[第二个标题 + 编号列表]，在列表中途结束。其下可运行缓慢的持续推近（标题从画框顶部漂出）。
• 回报推近（Payoff push-in，B）：一次镜头推近+下摇紧贴回报行——"Sent using [@Bot]" / 确认 +[thank-you bubble]弹簧弹出——随后[reaction button]弹入活动药丸，带弹性过冲与计数。推近缓入几乎不可察觉的漂移，剪辑在特写上结束。无结束卡片（No end card）。

5. 运动词汇表（Motion Vocabulary）

蓝图附带的运动词汇表是完整可用的"零件清单"，涵盖触发、工作态、回报三个阶段（完整列表见原蓝图 skills/hyperframes-animation/blueprints/agent-progress-theater.md）。按幕归纳：

• 触发类：药丸弹簧向下展开成菜单/清单 · 选项行交错淡入滑入 · 光标悬停舞蹈 · 单次点燃式点击带按下弹簧 · 菜单缩小淡出 · 模态淡出 · 场景放大/淡出推穿退出 · 镜头快速推穿多面板工作区
• 工作态类：细[accent]圆弧加载器旋转 · 星号加载器 · 星号↔圆点变形 · 带光标的打字加载标签 · 左→右文字微光扫描 · 衬线间奏词交错淡入淡出 · 状态对句在[accent]加载器下快速切换 · 脉动 "Thinking" 标签 · 状态标题时态翻转 · 标签右向展开后停靠为角标 · 等宽 tool-call 行带三个脉动圆点（结果落地圆点即灭） · 绿色/红色 diff 计数器快速跳动落定 · 内部窗口滚动（画框静止） · 品牌 logo 弹出在状态行旁
• 回报类：摘要卡弹簧弹出带弹跳 · 卡片向上滑动、面板在其下展开 · 向下锚定面板/载荷展开 · 行交错进入（滑入+淡出） · 徽章从数字描边翻转为实心圆+白色对勾带缩放弹跳 · 完成项删除线+变暗 · 待处理项半绘制圆弧描边动画 · 严重度药丸读出（Critical / High） · 视口向下滚动 · 聊天气泡弹簧缩放弹出 · 回复淡入/滑入 · 载荷卡片从 tool-call 行向下展开 · 深色线程卡片从行放大到支配画框、背景变暗 · 回复消息展开到位 · 内联代码片/链接着色 · 反应按钮弹入活动药丸带弹性过冲+计数 · 镜头推近+下摇居中回报 · 轻微回拉 · 柔和结束漂移 · 静态保持

6. 规则映射：从蓝图到原子规则的落地路径

蓝图的核心价值在于每一条运动母题都被映射到本地rules/中的原子规则。映射表完整收录如下（规则文件均位于 skills/hyperframes-animation/rules/）：

蓝图中的运动	映射规则	规则要点
药丸向下弹开成菜单 / 面板在滑动画卡下展开 / 载荷卡片从 tool-call 行向下展开	anchored-layout-expand.md	边缘锚定容器沿单轴生长：高度遮罩包装器 + 内部反向平移；弹簧风味来自spring-pop-entrance
选项行/发现项行/任务行交错进入（滑入+淡出）	spring-pop-entrance.md（交错组形式，≤500ms 上限）或 gsap-effects.md（纯淡入+平移交错）	不是waterfall-entry——其"无淡出的二元到达"法则与本方言的柔和淡入/滑入级联相矛盾
光标滑到某行并点击；手形光标点击模态按钮	cursor-click-ripple.md（移动+按下）+ press-release-spring.md（按钮按下弹簧）	点击是"点燃"，之后 UI 自行表演
浅色悬停高亮填充跟随光标在行间移动	gsap-effects.md	背景填充逐行平移，无需专门规则
菜单缩小淡出 / 场景放大推穿退出 / 窗口换色	scale-swap-transition.md	两个元素在同一中心互相变形
细圆弧加载器旋转 / 星号加载器	svg-icon-enrichment.md	通过setAttribute('transform','rotate(deg cx cy)')旋转内部 SVG 部件；时间轴驱动、有限
星号↔圆点变形再变回	scale-swap-transition.md	两元素同中心变形
打字加载标签（"Building plan…"）/ 扫描标签打字到完整串	discrete-text-sequence.md（+ context-sensitive-cursor.md 提供光标）	稀疏状态数组 + 反向搜索，模拟打字节奏
左→右微光扫描穿过加载字母	ambient-glow-bloom.md（单次行进光泽）或 css-marker-patterns.md（高亮扫描）	浅色文字选光泽，绘制色带选标记
衬线间奏词交错淡入淡出；状态对句按节奏切换	dynamic-content-sequencing.md（短语窗口）+ discrete-text-sequence.md（整态交换）；逐词交错用 gsap-effects.md	短语窗口 + 整态交换
脉动 "Thinking" 标签 / 三个脉动加载圆点（相位错开）	sine-wave-loop.md（有限重复；在解决拍杀死补间——见 doctrine note）	有限重复、时间轴驱动、seek 安全
状态标题时态翻转（Using→Used）/ 灰色元信息行淡入	discrete-text-sequence.md	帧阈值处替换整个文本状态
标签缩小停靠为固定角标头	gsap-effects.md	纯缩放+平移补间，无需专门规则
快速镜头推穿多面板工作区	viewport-change.md（推近）+ multi-phase-camera.md（分相）+ 可选 motion-blur-streak.md（面板清出画框时的速度模糊）	相机移动与元素运动分离
缓慢持续推近回执卡（标题漂出顶部）	multi-phase-camera.md（稳态推近相）或 viewport-change.md	单次推近
摘要卡/进度药丸/聊天气泡/品牌 logo/文件片弹簧弹出	spring-pop-entrance.md	默认平滑长尾沉降，弹跳仅限明确俏皮场景
摘要卡上滑、findings 面板在其下展开	gsap-effects.md（滑动）+ anchored-layout-expand.md（面板）	生长与推动是同一补间
徽章翻转：数字描边→实心圆+白对勾带缩放弹跳	scale-swap-transition.md（同中心描边↔实心互换）+ svg-path-draw.md（对勾绘制）+ spring-pop-entrance.md（弹跳）；pending→active→complete 整体推进 → dynamic-content-sequencing.md（快照状态机，沿用 cursor-ui-demo 的 workflow-approve-press 先例）	状态机快照，见 workflow-approve-press.html
已勾选标签删除线+变暗	css-marker-patterns.md（删除线绘制）+ gsap-effects.md（透明度变暗）	删除线绘制 + 透明度
待处理项半绘制圆弧描边动画	svg-path-draw.md（部分 dashoffset，保持在中途绘制状态）	stroke-dasharray+stroke-dashoffset
视口向下滚动最后卡片 / 静态画框下内部窗口滚动	gsap-effects.md（遮罩窗口内纯变换内容平移）；仅当画框本身移动时才用viewport-change	滚动是内容在窗口内平移，不是相机
绿色/红色 diff 计数器快速跳动落定	counting-dynamic-scale.md（数值代理计数；抑制缩放增长分量——这里计数保持固定尺寸跳动）	数字代理 count-up，固定尺寸
深色线程卡片从行放大到支配画框	card-morph-anchor.md（行→全画框变形+交接），背景变暗作为 gsap-effects.md 覆盖层淡入	行→全画框变形
回复消息/解决行展开到位	spring-pop-entrance.md（柔和过冲）或 anchored-layout-expand.md（真正的向下生长）	弹性或向下生长
反应按钮弹入活动药丸带过冲+计数	spring-pop-entrance.md（弹出）+ press-release-spring.md（激活风味）+ counting-dynamic-scale.md（计数，如果跳动）	三规则组合
镜头推近+下摇居中 tool call / 回报行	coordinate-target-zoom.md（非居中目标：缩放+反向平移）或 viewport-change.md	目标落位到视口中心
轻微回拉后柔和结束漂移	multi-phase-camera.md（回拉相 + 连续微漂移；保持漂移几乎不可察觉）	分相相机
最终卡片堆静态保持	无需规则	—

7. 相机修改器：默认静态画框，至多一次真实移动

蓝图的相机原则是：默认静态画框（STATIC frame）——剧场是元素级的；每镜头至多一次真实相机移动，从以下三者中选择：

• 触发推穿（Trigger push-through）：快速推近穿过开场工作区，清场露出裸画布 →viewport-change+multi-phase-camera，可选motion-blur-streak。
• 回执推近（Receipt zoom）：整个变异运行期间对清单卡的一次缓慢持续推近，让标题从顶部漂出 →multi-phase-camera（稳态推）。
• 回报推穿（Payoff push-in，子形状 B 的标志性移动）：构建期间静态，然后一次推近+下摇收紧到确认行，缓入微漂移结束 →coordinate-target-zoom/viewport-change+multi-phase-camera（漂移）。
• 其余一切——切换、级联、打勾、滚动——都在锁定画框上发生（任何"滚动"都是内容在窗口内平移，不是相机）。

这条规则的工程支撑在 coordinate-target-zoom.md：向非居中元素推近必须使用嵌套包装器——外层做scale（围绕50% 50%），内层做反向平移T = -offset（目标偏离视口中心的取负）；并强调T不依赖缩放倍数 S，且默认应测量真实布局中心（getBoundingClientRect+await document.fonts.ready），一次测量后烘焙，绝不在onUpdate中逐帧读取。

8. Doctrine Note：空闲运动禁令下的"叙事性脉动"

蓝图专门附了一条 doctrine note，处理工作状态母题与运动教条（idle-motion ban）的紧张关系：

工作状态母题（加载器旋转、脉动圆点、脉动 "Thinking"）触及了 idle-motion 禁令——但在这里它们是DIEGETIC（叙事内的）：脉动表演着"机器正在工作"，是 Scene 2 的叙事内容，而非装饰性呼吸。

因此规则是：

• 每个循环有限（finite）、时间轴驱动、seek 安全——sine-wave-loop有限重复、svg-icon-enrichment旋转；
• 在状态解决的确切帧杀死循环——语料库明确如此执行：载荷卡片展开的瞬间加载圆点消失；加载器锁屏退出时加载器随之换出。

工程上的具体做法对应 sine-wave-loop.md 的约束：idle 必须"先 reveal、再 jitter、最后 breath"，幅度取区间下限（默认SCALE_AMP 0.008–0.015、Y_AMP_PX 2–3px），相位补间ease: "none"，并且禁止 CSS@keyframes驱动 idle（CSS 动画运行在浏览器渲染时钟上，与 HF seek 时钟不同步，会闪烁/失同步）。

9. 落地实现：关键规则的代码骨架

以下从仓库规则文件中提取与 agent-progress-theater 最直接相关的实现骨架，供直接套用（均满足 HyperFrames 单一暂停时间轴 +fromTo保证 t=0 正确性的契约）。

9.1 药丸向下展开（下拉菜单 / 清单面板）——anchored-layout-expand

核心法则：在 CSS 中以最终（展开）状态编写布局，再用变换伪装折叠状态；容器尺寸从不改变，浏览器只计算一次布局：

<div class="stack"> <div class="expander"> <div class="expander-head">{headerLabel}</div> <div class="expand-mask" id="expand-mask">.expander-head { position: relative; z-index: 2; } /* sheet 从头下抽出 */ .expand-mask { height: BODY_H; overflow: hidden; } /* 最终高度，绝不补间 */ .expand-sheet { height: BODY_H; will-change: transform; } /* 底部圆角：头+sheet 读作一张生长中的卡 */

// 生长：一个补间同时驱动缝的两侧 tl.fromTo( ["#expand-sheet", "#below"], { y: -BODY_H }, { y: 0, duration: GROW_DUR, ease: GROW_EASE }, // 默认 power3.out GROW_AT, );

该规则同时要求：严禁补间width/height/top/left/margin/padding；data-layout-allow-overflow是hyperframes check布局门禁（container_overflow）的授权豁免——这是技术按设计工作，不是 bug；折叠用同机制反向，power3.in且更快（0.2–0.35s）。

9.2 入场弹簧（摘要卡/进度药丸/聊天气泡弹出）——spring-pop-entrance

"平滑胜过弹跳"——默认power3.out长尾沉降、无过冲；back.out仅在明确俏皮寄存器下使用且OVERSHOOT ≤ ~2：

// 单英雄弹出——平滑长尾沉降，无过冲 tl.fromTo( "#hero", { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: POP_DUR, ease: "power3.out" }, ENTRY_AT, ); // 交错组弹出——一次到达拍 gsap.utils.toArray(".pop-item").forEach((el, i) => { tl.fromTo( el, { scale: 0, opacity: 0, y: Y_RISE }, { scale: 1, opacity: 1, y: 0, duration: POP_DUR, ease: "power3.out" }, GROUP_ENTRY_AT + i * STAGGER, ); });

关键值域：POP_DUR 0.4–0.7s、STAGGER 0.04–0.08s且min(0.06, 0.5 / ITEM_COUNT)、ITEM_COUNT 3–9（超过 9 交错感消失，改换扫过式揭示）、ENTRY_AT 0–0.4s且主体最迟 t≤0.5s 落地。入场必须在fromTo中显式声明折叠态——绝不依赖 CSS 隐藏起点（seek 下会在补间接管前渲染可见）。

9.3 徽章翻转（描边→实心对勾）——scale-swap-transition+svg-path-draw

徽章从数字描边翻转为实心圆+白色对勾是"回执引擎"的核心变异动作。scale-swap-transition通过两个同步补间模拟同形状状态互换：

// 出：快速缩小+淡出 tl.to("#outgoing", { scale: EXIT_SCALE, opacity: 0, duration: EXIT_DUR, ease: "power2.in" }, TRIGGER); // 入：带过冲弹出，在退出完成前 OVERLAP 开始 tl.to("#incoming", { scale: 1.0, opacity: 1, duration: ENTER_DUR, ease: `back.out(${BOUNCE_FACTOR})` }, TRIGGER + EXIT_DUR - OVERLAP);

关键值域：EXIT_DUR 0.3–0.5s、ENTER_DUR 0.45–0.7s（长于退出以便过冲沉降）、OVERLAP 0.1–0.2s（超过 0.3s 两元素同时可见=无变形；低于 0.05s 出现可见空隙）、EXIT_SCALE 0.6–0.8、BOUNCE_FACTOR 1.4 柔和 / 1.8 坚实 / 2.2 卡通。约束：进入元素 z-index 必须在出元素之上；两者共享transform-origin: 50% 50%；出用power2.in、入用back.out（颠倒则机械）。

对勾绘制由 svg-path-draw.md 承担——stroke-dasharray = <pathLength>使整条路径成为一个 dash，stroke-dashoffset从路径长度补间到 0；长度来自path.getTotalLength()，实测而非猜测。待处理项的"半绘制圆弧"即此规则的部分 dashoffset 保持中途形态。

9.4 打字状态标签与状态短语——discrete-text-sequence

打字标签（"Building plan…"）与状态标题时态翻转（Using→Used）都走离散文本序列：在帧阈值处替换整个字符串状态，而非逐字符平滑打字：

const SEQUENCE = [ { t: 0.0, text: "" }, { t: T_K1, text: "{p1}" }, // 首几次击键（3-5 字符，间隔 0.1-0.2s） { t: T_K2, text: "{p1 + ' ' + p2_typo}" }, // 含错字的续写 { t: T_BS, text: "{p1 + ' ' + p2_partial}" }, // 退格，回退到分叉点 { t: T_BULK, text: "{fullCorrectedText}" }, // 批量粘贴——一次跳变替换多字符 { t: T_DONE, text: "{fullCorrectedText + ' ✓'}" }, // 完成标记 ]; // 反向搜索：找到最近一个 t 已通过的条目 function textAt(time) { for (let i = SEQUENCE.length - 1; i >= 0; i--) { if (time >= SEQUENCE[i].t) return SEQUENCE[i].text; } return ""; }

约束：文本换行区min-width ≥ 最宽状态（防止右缘抖动）；离散跳变必须瞬时（任何过渡都会把跳变变成拖影）；等宽字体 +white-space: nowrap；光标闪烁用时间轴上的确定性正弦方波，绝不使用 CSS 动画。"Thinking 停顿"通过在下一条目t前留 0.8–2.0s 间隙实现（低于 0.5s 读作结巴而非思考）。

9.5 旋转加载器与脉动圆点——svg-icon-enrichment+sine-wave-loop

圆弧/星号加载器旋转属于svg-icon-enrichment的 Rotation 模式，必须使用 SVGtransform属性而非 CSS transform（transform-center gotcha：CSStransform-origin+transform-box: fill-box在细线条上会把原点解析到 bbox 局部坐标，导致沿偏心弧飞行）：

const hand = document.getElementById("hand-min"); const minState = { deg: 0 }; tl.to(minState, { deg: 360 * MIN_REVOLUTIONS, duration: TOTAL_DURATION, ease: "none", // 线性运动是重点 onUpdate: () => hand.setAttribute("transform", `rotate(${minState.deg} 60 60)`), }, 0);

脉动的 "Thinking" 标签与三个加载圆点（相位错开）则落在sine-wave-loop——有限重复、ease: "none"相位代理、onUpdate用Math.sin映射变换；在解决拍杀死补间正是 doctrine note 的要求。

9.6 相机推近与计数——coordinate-target-zoom+counting-dynamic-scale

回报推近使用coordinate-target-zoom的嵌套包装器公式：外层scale（origin50% 50%）+ 内层反向平移T = -offset；公式与 S 无关（1.5×、2×、3× 平移相同）；偏移默认实测：

await document.fonts.ready; const W = 1920, H = 1080; const r = document.getElementById("target-card").getBoundingClientRect(); const TARGET_OFFSET_X = r.left + r.width / 2 - W / 2; const TARGET_OFFSET_Y = r.top + r.height / 2 - H / 2;

diff 计数器的"快速跳动落定"是 counting-dynamic-scale.md 的代理计数——onUpdate中Math.round(value).toLocaleString()写文本，font-variant-numeric: tabular-nums保证数字等宽；本蓝图特别注明要抑制其缩放增长分量（这些计数以固定尺寸跳动）。

10. 蓝图选择与实例化建议

依据 blueprints-index.md 的四步选择法：先按帧的角色在菜单中找形状，再打开blueprints/<id>.md读时间编码模板与[slots]，然后选择姿势——Reproduce（槽位干净映射）、Adapt（结构合适、内容/表面不同，保留标志性动作）或Compose（都不合适就从运动词汇表构建）。对于agent-progress-theater，典型的 Reproduce 场景是"Agent 正在执行多步工作 + 状态变异即演示"；若工作发生在对话/自动化线程中且以确认行收尾，则取子形状 B（message-thread-payoff来源）。

需要警惕的相邻选择：若演示是"看我问、看它答"（键盘驱动、输入框打字），应选 prompt-type-submit-generate 蓝图而非本蓝图；若整条工作流由持续的光标点击驱动，应选 cursor-ui-demo；若内容是"AI 做了大量工作 → 这是交付物"的长列表纵向遍历，则 transcript-scroll-artifact-reveal 更贴切。

11. 契约与自检清单

最后，落地时必须同时满足 HyperFrames 动画的核心约束（skills/hyperframes-animation/SKILL.md）与蓝图的专属纪律：

1. 单一暂停时间轴：data-duration决定长度；无Math.random/Date.now/performance.now；无repeat: -1；无display或原始visibility补间；时间轴不在async/setTimeout/Promise内构建。
2. 预计算布局常量：绝不补间时读getBoundingClientRect()；坐标在合成设置时算一次并复用。
3. 空间运动只用 GSAP 变换别名（x/y/scale/rotation）；布局变化绝不补间width/height/top/left。
4. 每个循环有限且 seek 安全，并在解决帧精确杀死（doctrine note）。
5. 相机每镜头至多一次真实移动，其余滚动/切换全部是画框内元素运动。
6. 完成态保持：A 型结尾卡片堆静态保持或视口滚动结束于列表中途——"工作被明显呈现为进行中"本身就是叙事的一部分。

编码完成后，可使用 scripts/animation-map.mjs 审计编舞（死区、交错一致性、生命周期警告），并用npx hyperframes lint / check / snapshot / preview / render（见 hyperframes-cli）做门禁校验与出片。

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes