HyperFrames 动画蓝图实战：prompt-type-submit-generate，让「提问 → 提交 → 生成」成为产品演示镜头的主角

2026-09-09 19:46:24作者：范垣楠Rhoda

这篇指南深入拆解 HyperFrames 动画知识体系（hyperframes-animation skill）中的核心蓝图 prompt-type-submit-generate——"AI 时代的产品演示镜头"：一个 [prompt / query / command] 逐字键入真实产品输入框（聊天输入框、搜索栏、终端提示符、URL 栏、侧边助手），随后机器给出回答（状态剧场 → 流式答案 / 动作日志 / diff 卡片 / 图表 / 生成产物）。读完本文，你将掌握该蓝图的四类应用角色（Hook / Product_Intro / Key_Feature / CTA）、三种子形态（A/B/C）、六段式镜头结构（Scene 0–5）、全部 60+ 条动作词汇，以及它们与 skill 内 20+ 条原子动画规则（rules）的完整映射关系，可直接复现或改写成自己的分镜。

蓝图是什么：从 178 条 golden-clip 反推出的分镜模板

在 HyperFrames 的动画知识体系中，blueprints（蓝图）是"经过验证的场景形状"层：一个产品无关、带时间码的镜头模板——以 Scene N (a–b s): … 的格式组织，包含 [slots] 占位槽与一个具名的 signature move（标志性动作）。它编码了整段镜头在其完整时长内的推进节奏——揭示动作与旁白台词对齐，而不是在 t=0 一次性倾泻。

这套模板并非凭空设计：根据 blueprints-index.md 的说明，它从两轮挖掘得到的 178 条 golden product-launch clips（另有 13 条 legacy 蓝图反向翻译为同样的 brief 格式）中逆向工程而来。prompt-type-submit-generate 正是这 22 个蓝图中的一员，且属于后来从 golden-clip 语料中挖掘出的七个"新形态"之一（同批还有 agent-progress-theater、panel-edit-live-sync、camera-journey、transcript-scroll-artifact-reveal、zoom-out-workspace-reveal、fixed-anchor-cycle）。

蓝图全文位于 blueprints/prompt-type-submit-generate.md，它的 intent 一句话概括了全部主题：

AI 时代演示镜头——[prompt / query / command] 逐字键入真实产品输入框（聊天 composer、搜索栏、终端提示符、URL 栏、侧边助手），机器应答：状态剧场过渡到流式答案 / agent 动作日志 / diff 卡片 / 图表 / 生成产物——或者镜头在提交处切断，提问本身即是看点。键盘是演员，产品是应答者。

与相邻蓝图的边界（关键区分）

蓝图在 intent 中明确划定了与两个"近亲"蓝图的边界，这是选型时最容易混淆的地方：

蓝图	引擎	边界
`prompt-type-submit-generate`	键盘驱动 + 产品应答	光标工作只用于"预备输入"或"落地提交"，之后的每个状态变化都是机器自己的行为
typewriter-reveal	裸排版打字	一行字作为纯排版打在空白字段上——没有产品表面，没有任何东西应答
cursor-ui-demo	光标点击驱动	光标点击重建的 UI 走完各个状态——指针驱动每一次变化

一句话：prompt-type-submit-generate 适用于"watch me ask, watch it answer"（看我提问，看它应答）的时刻——键盘驱动，而不是点击走完 UI（那是 cursor-ui-demo），也不是裸打字排版（那是 typewriter-reveal）。

覆盖四种角色与三种子形态

蓝图的 roles served 列出了它可以承担的四个故事板角色（对应故事板 frame type 枚举），每个角色都标注了变体的来源形状（from <shape-name> 即被挖掘的 golden 形状名）：

Hook（来自 app-window-push-in-prompt-typing）：开场是"watch me ask"——打字标题节拍，一次缓动 push-in 精准落在产品输入框上，提示词打完，镜头在提交时 / 提交后立即结束（子形态 A）。
Hook（来自 typed-command-output-scroll）：当演示循环本身即是钩子——命令输入、输出构建并滚动，在切换前第二条命令 / 重新输入开始，动作中途结束（子形态 B/C，带 restart 结尾）。
Product_Intro（来自 prompt-typing-composer）：当产品第一眼就是它的 composer——品牌节拍开启输入表面，长提示词带着 hovers / 附件 / 下拉选择逐字键入，相机轻轻转向输入框或确认控件（子形态 A，偶尔跑完整个 agent-log payoff）。
Product_Intro（来自 search-query-walkthrough）：通过搜索 affordance 介绍产品——短 [query] 带闪烁光标键入，自动补全 / 结果实时填充，确认点击落定结果状态（子形态 C，搜索皮肤）。
Key_Feature（来自 prompt-type-submit-generate）：能力以一次 prompt→response 往返演示——提交进入思考 / 状态，然后流式答案、带品牌图标的动作日志行、绿色 diff 卡片、自动绘制的图表、或即时生成的 app 揭示（子形态 A/B/C——该家族覆盖最广的角色）。
CTA（来自 install-command-end-card）：安装命令结束卡——结尾 [headline] 降级（缩小、变灰、上浮）为 [terminal pill] 让位，后者弹入并横向拉伸，[install command] 带闪烁光标键入，两侧元数据与 [tool-icon row] 依次弹出，成品卡片长时间定格。无提交、无响应——打出的命令本身就是请求（子形态 A，终端皮肤）。

时长预算

子形态	时长	说明
A（prompt-as-hook）	5.2–12s	含约 7.4s 的 CTA 结束卡
B（full generate loop）	5.45–11.9s	完整生成循环
C（instant-result surface）	5.7–11.9s	即时结果表面

这是一个 long-form 家族：大多数成员跑 7–12s，因为"响应需要空间抵达"——答案的逐块构建是蓝图的呼吸节奏，不能压缩。

三种折叠子形态（shot structure 的核心）

(A) prompt-as-hook：镜头在提交时 / 提交后立即结束（或停在字中间）——提问即是表演。
(B) full generate loop：提交 → 状态剧场 → 输出逐块构建。
(C) instant-result surface：机器以成品表面应答，通常在切换前被重新查询。

六段式镜头结构（Scene 0–5 全解析）

镜头的基本骨架：[product input] 位于 / 位于 [product surface — app window, web page, terminal, browser chrome, sidebar] 之上，背景为 [bg color]；输入框是引力中心——相机最多做一次或两次有目的的靠近 / 远离移动，其余时间锁定；打字是逐字符的，且在可见光标之后；响应内容渐进抵达，绝不一次性倾倒。

Scene 0（可选，0.0–约 2s）——开场引导节拍

在输入框占据镜头前，做一个确立性的移动（只做一次）：

一个 [headline] 居中打字并清场；
一个 [title card] 硬切离开；
品牌节拍（[logo/mascot] 居中，[serif title] 按词组构建，logo 缩小并上浮停靠在顶部居中）；
一个 [orb / mark] 带发光边缘成形；
[app window] 带运动模糊飞入并落定；
或全幅 [thumbnail grid] 在垂直中线上分开，为舞台清场。

保持 ≤2s——输入框才是主角。

三个变体：

Hook：打字标题节拍承担开场——"[Introducing X]" 打出来、停住、被 [tagline] 以相同风格替换；打字语域在产品出现前就被确立。
Key_Feature：能力声明以裸标题打出（"[Run a task across multiple models.]"），然后硬切到表面——或完全跳过 Scene 0，直接以工作流中途的实时表面开场。
CTA：[closing line] 分两步打出（"[Designed.] [Not generated.]"）并停住——它将在 Scene 2 中降级。

Scene 1（约 1–3s）——输入框取得焦点

[product input] 抵达或被预备：

[pill bar] 从 mark/chip 横向展开；
[prompt palette / card] 在中心弹入，带柔和阴影；
一次平滑缓动 / 加速 push-in 精确裁切到 app window 内的 composer（headline chrome 滑出画框）；
[⌘K search modal] 弹到中心，页面在背后模糊；
光标点击 [menu row / Assistant button]，prompt block 出现；
或 [✕ clear button] 清空上一条查询，回到 [placeholder]。

可选的 composer 仪式（打字前或打字中选 1–2 个）：[attachment] 拖入并在输入框下方托盘落定；[model / option dropdown] 在选择器下方展开，行悬停高亮、勾选落地、工具栏标签更新。

变体：

Product_Intro：仪式本身就是介绍——[chip grid] 淡入，光标弧线划过 2–3 个悬停高亮后点击打开 composer 的那个；affordance 就是导览。
Key_Feature：表面已承载一条旧 [query] 及其 [result panel]——清空它意味着"这是一个能用的工具，不是 mockup"。

Scene 2（约 2–6s）——提示词键入（引擎）

[prompt text] 在闪烁光标后快速逐字符键入；
输入卡片向下生长 / 换行，把底部控件和附件推下去；
键入的 [token] 可能在打字中途转化为内联 [brand pill]（[@browser] → 彩色 [Browser] chip，打字在其周围继续）；
相机可以执行一次缓慢连续的 push-in 靠近输入框，减速到近乎停靠在打好的问题上。
子形态 (A) 可以在此结束——停在字中间（光标闪烁），或停在打好的 prompt 上。
Hook (A)：打好的问题是悬崖式悬念——结束在完成的问题上，或在提交点击时界面在切换处变暗。
Product_Intro (A)：相机潜向底部输入框，[option pills] 在其上方级联；prompt 在切换时仍在字中间——产品被介绍为"你可以跟它说话的东西"。
CTA (A, 安装结束卡)：Scene-0 的 headline 降级——缩小约 50%、去饱和变灰、上浮——一个小 [$ chip] 在下方弹入并水平拉伸成宽 [terminal pill]；[install command] 在其内打出；微弱的 [repo link] 和 "[Works with]" 标签安静淡入；一排 [tool icons] 带柔和 spring scale 一个接一个弹入；完成的构图长时间定格，只有光标闪烁。

Scene 3（约 4–7s）——提交 + 机器剧场

[submit control] 被点击（光标滑动 + 按压下沉；按钮可能在第一次击键时就变形状态——waveform → up-arrow——并在流式期间可能翻转为 [stop] 控件），或重打暗示回车。表面立即以工作状态应答：

先前内容消失（chip grid 消失、面板折叠为窄标题、整个布局切换）；
然后剧场开演——[status phrases] 带左到右 shimmer 扫过交叉溶解（"[Thinking]" → "[Modeling…]" → "[Planning…]"），[spinner] 在加载条上旋转，一排 [loading cards] 排列，或 [checklist] 填充且其条目逐个翻转为绿色勾选加删除线，同时 [status heading] 翻转时态（"[Using X]" → "[Used X]"）。

变体 (A) status-flare exit：直接在剧场上结束镜头——"[Generating…]" / 旋转的 spinner——信号本身即是按钮，答案留给想象。

Scene 4（其余时间）——答案抵达

按子形态选择：

子形态 B（完整生成循环）：输出渐进构建，每个块把内容向下推——[answer text] 逐段流式；[action-log rows] 依序弹入，每条带 [brand icon]；[diff cards] 展开并高亮新增行（绿色）；[chart lines] 从共享原点交错左到右绘制；[ASCII / summary table] 绘入；实时计数器滴答；表面自动垂直滚动跟随最新一行（页面、终端或卡内滚动）——常常在结果窗口下配合一次缓慢连续 push-in。
子形态 C（即时结果表面）：机器以成品表面应答——匹配的 [result / article] 原位渲染；[autocomplete chips] 在查询键入期间在栏下交错弹出（机器对每次击键都作答），然后悬停把 [Search button] 填实、点击确认；[generated page] 作为圆角卡片升起并在钉住的 prompt 下持续滚动；blur-whip 解析到 [artifact window]，标签点击让 code → preview 瞬时翻转；或 zoom-out 揭示 prompt pill 其实位于完整 [workspace] 内，[content] 在其中实时重写。

Scene 5（最终节拍）——收束

按角色与子形态分叉：

Key_Feature (hold)：定格在完成的输出上——图表完成、diff 卡片 + [action buttons] 完全渲染；无淡出、无空白结束帧。
Product_Intro (confirm)：光标在镜头结束时落定确认点击（[Create PR] / [Generate] / [Search]），或附加元素淡出、最终 push-in 留下干净的结束状态；一个成员硬切到极简 [end card]——提交按钮独居中，带一个落定 pop。
Hook (restart —— 标志性动作)：第二条 [prompt / command] 在新提示行开始键入，或查询退格并重打、输出整体换成 [result 2]——镜头在动作中途结束，滚动中途或字中途：循环是无尽的，而这正是重点。
CTA：Scene 2 的结束卡直接定格到最后一帧；闪烁光标是唯一运动。

动作词汇表（motion vocabulary）

蓝图罗列了 60+ 条可复用动作，按逻辑聚类整理如下（每条都可在"规则映射"中找到对应实现）：

输入与打字

带闪烁光标 / 块状光标的逐字符键入；打字标题节拍相互替换；输入 pill 向下生长 / 换行为多行框；prompt palette / card 弹入；pill bar 从 mark 或 chip 横向展开；带发光边缘的 orb 成形；打字中 token → 内联 brand-pill 变形；placeholder 清除；✕ 点击清除查询；退格并重打查询互换；附件拖入 + 托盘落定；下拉打开 + 行悬停高亮 + 勾选选择 + 工具栏标签更新；chip-grid 悬停舞蹈。

光标交互

光标滑动 / 弧线 + 悬停高亮填充；点击按压下沉；提交按钮状态变形（waveform→up-arrow、submit→stop）；Search 按钮悬停填充状态切换。

状态剧场

提交时内容消失 / 面板折叠 / 布局切换；状态短语带左到右 shimmer 扫过交叉溶解；脉动的 "Thinking"；spinner 旋转；加载条；动画尾点；加载模型卡行；状态标题时态翻转（Using→Used）；checklist 方块翻转为绿色勾选加删除线。

结果产出

动作日志行带品牌图标依序弹入；流式文本块把内容向下推；绿色高亮 diff 卡片展开；交错左到右图表线绘制；ASCII / 汇总表绘入；count-up 计数器；垂直输出滚动（页面 / 终端 / 卡内）跟随最新一行；生成页作为圆角卡片升起并在钉住的 prompt 下滚动；自动补全 chips 快速交错弹出；标签点击 code↔preview 瞬时翻转；blur-whip 转场；提交时 prompt 跳到标题；zoom-out 从 prompt pill 揭示到完整 UI 窗口。

相机与转场

落点输入框的一次缓动 / 加速 push-in；结果窗口上的缓慢连续 push-in；带运动模糊的窗口飞入；缩放 + 平移裁切浏览器 chrome；⌘K modal 带背景模糊弹入；全幅网格在垂直中线分开。

收尾

headline 降级（缩小 + 去饱和 + 上浮）；chip 水平拉伸为宽终端 pill；安静的对比度元数据淡入；图标行依次 spring 弹入；切换时第二条 prompt 开始键入；切换时界面变暗 / 淡出；仅光标闪烁的长时间静态结束定格。

规则映射：动作 → 原子规则（rule mapping）

这是蓝图最实用的一节：把每个动作动词精确映射到 rules-index.md 中的原子规则（每条规则是"一个暂停时间线上的确定性配方"）。完整映射如下：

动作	规则
逐字符打字、placeholder 清除、退格重打、切换时第二条 prompt、打字标题节拍	discrete-text-sequence（打字 / 错字 / 停住 / 退格）+ gsap-effects（typewriter 配方）
闪烁光标 / 块状光标（贯穿停住状态）	context-sensitive-cursor
prompt / 状态 / 输出短语窗口、脚本驱动的节拍时长	dynamic-content-sequencing
输入卡片向下生长 / 换行	anchored-layout-expand（顶部锚定向下生长，在换行边界步进）
打字中 token → 内联 brand-pill 变形	组合：scale-swap-transition（在转换阈值处 token→chip 互换）+ card-morph-anchor（chip 周围的重排）
prompt palette / modal / dropdown 弹入；加载卡、日志行、diff 卡、自动补全 chips、图标行交错抵达	spring-pop-entrance（单个英雄或交错组）
pill bar 从 mark 展开；chip 拉伸为宽终端 pill	card-morph-anchor（容器变形）
光标滑动到控件、按压、涟漪	cursor-click-ripple；按压下沉 + 恢复 → press-release-spring（或光标 + 按钮一起压缩用 physics-press-reaction）
悬停高亮填充、Search 按钮瞬时实色填充、UI 关键词强调	asr-keyword-glow（静态时间线 glow 变体）或 press-release-spring（颜色过渡变体）
带光标的附件拖入	context-sensitive-cursor（pointer↔grab）+ spring-pop-entrance（托盘落定）
提交时内容消失 / 布局切换 / 面板折叠；code↔preview 瞬时翻转	scale-swap-transition（成对同中心互换）或经 discrete-text-sequence 语义的硬 `tl.set` 状态切换
提交时 prompt 跳到标题	FLIP 重定位——见 `skills/hyperframes-keyframes`（FLIP 配方）；行程本身用 nudge-curve（慢-快-慢组滑动）
状态短语交叉溶解 + shimmer 扫过	discrete-text-sequence（短语互换）+ ambient-glow-bloom（Shimmer sweep 变体——单次穿越光泽，裁切到文本）
spinner 旋转、动画尾点、脉动 loader 字形	svg-icon-enrichment（旋转 / 脉动内部 SVG 元素）；有界的 "Thinking" 脉动 → sine-wave-loop（有限重复——这个脉动在表演状态，不是闲散晃动）
checklist 状态翻转、状态标题时态翻转、状态 pill 互换	discrete-text-sequence（离散状态步进）；勾选印章 → svg-path-draw 或 spring-pop-entrance
流式文本块 / 日志行把内容向下推	dynamic-content-sequencing（逐块窗口）+ spring-pop-entrance（逐行抵达）
垂直输出滚动跟随最新一行（页面 / 终端 / 卡内）	组合：内容 translateY 与内容窗口的同一时间线对齐 + 帧自身移动时匹配的 viewport-change 反向摇摄
生成页作为圆角卡片、内部内容滚动	3d-page-scroll（扁平变体——页面卡内部滚动）
交错图表线绘制	svg-path-draw（stroke-dashoffset，交错开始）
count-up 计数器 / 实时计数器	counting-dynamic-scale；结果条 / 填充 → stat-bars-and-fills
落点输入框的一次缓动 push-in；结果上的缓慢连续 push-in	multi-phase-camera（push 阶段），目的地用 coordinate-target-zoom 取景
从 prompt pill 到完整 workspace 的 zoom-out；缩放 + 平移裁切 chrome	viewport-change（`.world` 包装器上的复合 pan+scale）
带运动模糊的窗口飞入；blur-whip 转场	motion-blur-streak
⌘K modal 带背景模糊	depth-of-field-blur（模糊页面平面，保持 modal 锐利）+ spring-pop-entrance
全幅网格在垂直中线分开	center-outward-expansion（两半锁定步调向外滑动）
带发光边缘的 orb 成形	ambient-glow-bloom + spring-pop-entrance
headline 降级（缩小 + 去饱和 + 上浮）	gsap-effects（普通复合 tween，无需专门规则）
切换时界面变暗、硬切到极简结束卡、字中途 / 滚动中途结束	退出约定，无需规则
仅光标闪烁的长时间静态结束定格	context-sensitive-cursor（闪烁是被允许的残余运动）

底层实现要点：从规则源码看关键机制

几条被重度引用的规则，值得从源码层面理解其原理：

打字引擎 —— discrete-text-sequence：打字被建模为稀疏数组 SEQUENCE = [{ t, text }]，每次 onUpdate 用反向搜索找到最新一个 t 已通过的条目并渲染其文本。显示在状态间跳跃、中间无动画——真实感来自调度形状：快速击键簇（间隔 0.06–0.20s）、词边界停顿（0.3–0.6s）、一个错字、退格剥回分叉点、然后批量粘贴一次替换多字符。块状光标用同一时间线上的确定性 sin 方波闪烁。关键约束：min-width 必须 ≥ 最宽状态防止右缘抖动；显示跳变必须瞬时（任何过渡都会把"打字感"毁成涂抹）。

闪烁光标 —— context-sensitive-cursor：光标颜色（以及可选的高度 / 闪烁行为）匹配正在键入的文本段——打品牌名用品牌强调色、placeholder 用暗色、完成用成功色。光标是"色块"，所以颜色写在 background 而非 color。闪烁由时间线驱动的 sin 方波产生（Math.sin(blink.p) > 0），纯函数、无可变追踪器，因此双向 seek 均正确——这正是蓝图"静止定格中只有光标闪烁"的合法性来源。

内容窗口 —— dynamic-content-sequencing：prompt / 状态短语 / 输出段落的时间窗被预计算为扁平 [{startTime, endTime, ...}] 数组：每段时长 = BASE_DURATION + body.length × SEC_PER_CHAR + hold——内容越长自动获得更多阅读时间，无手调偏移。DOM 只在条目切换时写入（lastTitle 守卫），逐帧写入会在 HyperFrames 渲染中闪烁。

输入卡生长 —— anchored-layout-expand："换行增长"变体直接服务 Scene 2：composer 卡片随打字换行变高，量化为每个换行边界一步（每步一个 LINE_H），换行时间来自确定性的打字调度而绝不在渲染时测量。两条实战陷阱：composer 无钉住头部，须组合 proxy counter-scale 与换行量化，并把表面拆成 sheet（承载上圆角）+ footer（承载下圆角）；换行时间与换行位置是两个不同的权威——在打字串中显式写 \n（配 white-space: pre-wrap）让两者源自同一事实。该规则的核心法则也是 HyperFrames 的铁律：布局按最终（展开）状态在 CSS 中书写，再用变换伪造折叠状态——容器从不改变尺寸，只有可见区域改变（因为 width / height 补间是被禁止的）。

弹入 —— spring-pop-entrance：入场基元 scale: 0 → 1，默认 power3.out 长尾落定、无过冲——back.out 弹跳是"agent 生成视频第一大劝退项"，仅在明确俏皮的品牌语境使用且 OVERSHOOT ≤ ~2。组交错被 items × stagger ≤ ~0.5s 自封顶，保证一组到达读作一个节拍。

提交点击 —— cursor-click-ripple 与 press-release-spring：Scene 3 的提交 = 光标滑向控件（cursor-click-ripple 的移动 + 按压下沉 + 扩散涟漪），按钮本身的压缩 - 恢复反馈链走 press-release-spring（线性压缩然后 spring 恢复）。若要让光标与按钮一起压缩产生触觉接触感，则用 physics-press-reaction 传同一 targets 数组。

图表自绘 —— svg-path-draw：Scene 4 的交错图表线绘制 = stroke-dasharray / stroke-dashoffset——组合阶段用 getTotalLength() 测量、初始 dashoffset 设为长度、GSAP 补间到 0，交错开始产生"从左到右依次画出"。

相机修饰规则（camera modifier）

蓝图的相机纪律总结为一句话：相机永远服务提问或答案；许多成员完全静止——打字、提交剧场与流式本身就撑起了镜头。具体规则：

一次平滑缓动 / 加速 push-in，精确落在输入框上并锁定（Hook、Product_Intro）→ multi-phase-camera（push）+ coordinate-target-zoom（目标输入框）——这是"watch me ask"开场具有定义性的移动。
一次在打字或输出构建下方运行的缓慢连续 push-in，减速到近乎停靠（Product_Intro、Key_Feature）→ multi-phase-camera——给响应以分量，但不从它那里抢戏。
一次 zoom-out 揭示——prompt pill 原来住在完整 workspace 内（Key_Feature、子形态 C）→ viewport-change（拉远）——反向移动；"提问比你想象的更贴近产品"。
仅入场点缀：带运动模糊的窗口飞入（motion-blur-streak）、缩放 + 平移裁切浏览器 chrome（viewport-change）——两者都在打字开始前落定。
每镜头真实视口移动绝不超过两次；提交剧场与流式期间画框锁定（内容滚动，相机不滚）。

从实现看，multi-phase-camera 是一个包住整个场景的 scale() translate(x, y) 包装器，由两个通道在一个 onUpdate 写入器内合成：相位缩放（proxy 对象在触发时刻步进）+ 连续 sine 漂移（X/Y 频率比约 1.3 形成有机 Lissajous）。约束包括：相机必须包住场景内一切、单写入器、相位缩放 < 1 时 .scene 必须 overflow: hidden、场景背景画在 .scene 而非 .camera 上。

支撑这一切的底层契约：确定性动画

蓝图之所以敢用"反向搜索 + 预计算时间表 + 硬状态切换"这类看似取巧的手段，是因为整个 hyperframes-animation skill 建立在 rules-index.md 声明的统一契约之上（每个规则都遵守，由 hyperframes-core 的组合契约兜底，见 SKILL.md 与 skills/hyperframes-core）：

运行在一条暂停的 GSAP 时间线上，注册到 window.__timelines（绝不自动播放，绝无第二条时间线）；
双向 seek 安全：fromTo 显式 from 状态（t=0 在 seek 下正确）、绝对值而非相对 += 补间、状态是时间线时间的纯函数、无可变追踪器；
确定性：无 Math.random()、无 Date.now()——只用索引派生的伪随机与烘焙好的调度；有限重复，绝不 repeat: -1；
只动变换与仅绘制属性——width / height / top / left 补间被禁止（用 scale/translate 代理、mask 或 anchored-layout-expand）；
组交错封顶使到达读作一个节拍（items × stagger ≤ ~0.5s）；
动画元素上无 CSS transition，多处补间同时运行时提示 will-change: transform；
DOM 测量只在单场景组合的构建时进行；多场景蒙太奇中后段 clip 可能尚未布局——使用按 CSS 匹配的常量。

这也解释了蓝图里"光标闪烁是唯一被允许的残余运动""脉动在表演状态而非闲散晃动"等措辞：在确定性契约下，一切循环都必须有限、可 seek、由时间线驱动。

如何落地使用这张蓝图

根据 blueprints-index.md 的选型流程与 SKILL.md 的加载指引，使用 prompt-type-submit-generate 的推荐路径：

找到角色的触发器：从 Role → blueprint 菜单中选择——"watch me ask"开场（Hook）、产品第一眼就是 composer / 搜索栏（Product_Intro）、能力作为一次 prompt→response 往返（Key_Feature）、安装命令结束卡（CTA）。菜单是软性的：故事真实性优先，形状契合该节拍时才伸手拿它。
打开蓝图全文 blueprints/prompt-type-submit-generate.md，读它的时间码模板、[slots] 与具名 signature move（Hook 子形态的 restart 结尾是它的签名动作）。
选择姿态：Reproduce（slots 干净映射）/ Adapt（结构契合、内容 / 表面不同，保留 signature move）/ Compose（都不契合就从动作词汇组合——仍要把揭示节奏对齐 VO）。
实现时：通常选 2–4 条规则，用一条暂停时间线粘合即可（按 SKILL.md 的默认路径）；需要落地可运行的参考代码时，可参照 skill 的 examples/ 目录（如 examples/messaging-multi-phrase.html 演示了多短语序列的 dynamic-content-sequencing 实现）以及 adapters/gsap-easing-and-stagger.md 中的缓动与 spring 辅助。