Agent Progress TheaterHyperFrames 动画蓝图中的智能体工作进行时状态剧场【免费下载链接】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 角色定位来自agent-progress-theater本体的 Key_Feature当功能是智能体执行多步工作build a plan / scan a repo / fix a vulnerability / handle infra for you且证明方式是状态剧场——带打字标签的加载器锁屏loader lockup、在[accent]强调色加载器下成对切换的状态短语、随后一张在观众面前填充并逐项打勾的清单/发现项卡片。来自message-thread-payoff的 Key_Feature当智能体的工作存在于对话或自动化线程中——用户/智能体气泡与工具调用/回复卡片按顺序弹出工作状态由脉动的加载圆点或快速跳动的 diff 计数器承载最终以一次镜头推近紧贴确认行解决[reaction pill]、Sent using[Bot]、一个感谢气泡。从 skills/product-launch-video/references/story-design.md 的角色体系看两个来源最终都落到feature_showcaseKey_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 10.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 couplets2–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 / scrollA完成或变异中途的卡片堆保持静态直到结束或视口向下滚动到最后一张卡片最后一拍快速滚动露出[第二个标题 编号列表]在列表中途结束。其下可运行缓慢的持续推近标题从画框顶部漂出。回报推近Payoff push-inB一次镜头推近下摇紧贴回报行——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-dasharraystroke-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-changemulti-phase-camera可选motion-blur-streak。回执推近Receipt zoom整个变异运行期间对清单卡的一次缓慢持续推近让标题从顶部漂出 →multi-phase-camera稳态推。回报推穿Payoff push-in子形状 B 的标志性移动构建期间静态然后一次推近下摇收紧到确认行缓入微漂移结束 →coordinate-target-zoom/viewport-changemulti-phase-camera漂移。其余一切——切换、级联、打勾、滚动——都在锁定画框上发生任何滚动都是内容在窗口内平移不是相机。这条规则的工程支撑在 coordinate-target-zoom.md向非居中元素推近必须使用嵌套包装器——外层做scale围绕50% 50%内层做反向平移T -offset目标偏离视口中心的取负并强调T不依赖缩放倍数 S且默认应测量真实布局中心getBoundingClientRectawait 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并且禁止 CSSkeyframes驱动 idleCSS 动画运行在浏览器渲染时钟上与 HF seek 时钟不同步会闪烁/失同步。9. 落地实现关键规则的代码骨架以下从仓库规则文件中提取与 agent-progress-theater 最直接相关的实现骨架供直接套用均满足 HyperFrames 单一暂停时间轴 fromTo保证 t0 正确性的契约。9.1 药丸向下展开下拉菜单 / 清单面板——anchored-layout-expand核心法则在 CSS 中以最终展开状态编写布局再用变换伪装折叠状态容器尺寸从不改变浏览器只计算一次布局div classstack div classexpander div classexpander-head{headerLabel}/div div classexpand-mask idexpand-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/paddingdata-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-transitionsvg-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使整条路径成为一个 dashstroke-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-enrichmentsine-wave-loop圆弧/星号加载器旋转属于svg-icon-enrichment的 Rotation 模式必须使用 SVGtransform属性而非 CSS transformtransform-center gotchaCSStransform-origintransform-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-zoomcounting-dynamic-scale回报推近使用coordinate-target-zoom的嵌套包装器公式外层scaleorigin50% 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 正在执行多步工作 状态变异即演示若工作发生在对话/自动化线程中且以确认行收尾则取子形状 Bmessage-thread-payoff来源。需要警惕的相邻选择若演示是看我问、看它答键盘驱动、输入框打字应选 prompt-type-submit-generate 蓝图而非本蓝图若整条工作流由持续的光标点击驱动应选 cursor-ui-demo若内容是AI 做了大量工作 → 这是交付物的长列表纵向遍历则 transcript-scroll-artifact-reveal 更贴切。11. 契约与自检清单最后落地时必须同时满足 HyperFrames 动画的核心约束skills/hyperframes-animation/SKILL.md与蓝图的专属纪律单一暂停时间轴data-duration决定长度无Math.random/Date.now/performance.now无repeat: -1无display或原始visibility补间时间轴不在async/setTimeout/Promise内构建。预计算布局常量绝不补间时读getBoundingClientRect()坐标在合成设置时算一次并复用。空间运动只用 GSAP 变换别名x/y/scale/rotation布局变化绝不补间width/height/top/left。每个循环有限且 seek 安全并在解决帧精确杀死doctrine note。相机每镜头至多一次真实移动其余滚动/切换全部是画框内元素运动。完成态保持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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考