HyperFrames 镜头蓝图深度解析：transcript-scroll-artifact-reveal —— "AI 做了大量工作 → 这就是交付物"的纵向遍历与成果揭示

导读

transcript-scroll-artifact-reveal 是 HyperFrames 动画技能库（skills/hyperframes-animation）中 22 个时间编码镜头蓝图之一，服务于产品发布视频的 Key_Feature（核心功能展示） 角色。它的核心叙事公式是："AI 做了大量工作（遍历过程）→ 这就是交付物（成果揭示）"：镜头沿着一整条纵向长内容表面（Agent 对话记录、任务流、分析文档、故事草稿）行进，把"生成的工作量"当作证据展示给观众，随后用唯一一次焦点交互（点击文件 chip、高亮引文、展开可折叠行）把镜头切向背后的成果物——完整工作区、高亮单元格的电子表格、内联问答面板或子任务堆栈。

读完本文，你将掌握：这个蓝图的适用边界与判别标准、TRAVERSE → HINGE → ARTIFACT 三幕结构的精确时间分配、四种黄金变体（pan-to-workspace / feed-rush / document-to-artifact / selection-pivot）各自的遍历机制与揭示机制，以及它与仓库内原子规则库（rules/）逐条的映射关系——包括 3d-page-scroll 平面变体、viewport-change 相机平移、coordinate-target-zoom 目标缩放等底层实现细节，以及 data-layout-allow-overflow 布局豁免的正确用法。

一、蓝图定位：什么时候该用它

1.1 核心意图（intent）

蓝图原文将其意图概括为：镜头沿一条完整的长内容表面垂直行进——Agent 转写、运行中的任务流、分析文档、故事草稿——以全出血（full-bleed）方式渲染在平面画布上（无设备外框、无手持样机），通过相机平移或元素滚动完成遍历；遍历本身即是故事（"看看完成了多少工作 / 这里有多少内容"），直到唯一一次焦点交互——文件 chip 点击、引文高亮、可折叠行展开——将镜头转向成果/细节揭示：工作量背后的交付物。

关键设计词是"证据"与"回报"：长表面是证据（工具胶囊、已勾选进度项、任务行、标题、对比表格、故事段落），按遍历节奏被阅读；成果物是回报（带实时样机的完整工作区、高亮单元格的电子表格、内联问答面板、子任务堆栈）。

1.2 服务角色与判别标准

蓝图服务于 Key_Feature 角色（对应故事板 frame type 枚举中的 feature_showcase，见 blueprints-index.md），提供四种模式：pan-to-workspace、feed-rush、document-to-artifact、selection-pivot。

何时应该选它：当功能的"证据"是生成工作的体量与深度，且这个节拍应当通过一次交互兑现（而不是持机设备巡览、也不是光标追逐式工作流演示）时。蓝图原文明确给出了两个对照排除项：

• 不是 device-surface-showcase（device-surface-showcase.md）：那是"持机展示镜头"，把设备样机当作英雄元素呈现；
• 不是 cursor-ui-demo（cursor-ui-demo.md）：那是"光标追逐工作流"，相机伺服跟随每一次交互。

二者的本质区别在于相机纪律（详见第六节）：本蓝图全片最多两次真实相机运动，且都围绕 HINGE 展开；而 cursor-ui-demo 的相机跟随每个交互动作。从挖掘来源看，该蓝图是从 golden 片段语料中挖掘出来的七种蓝图之一（与 prompt-type-submit-generate、agent-progress-theater、panel-edit-live-sync、zoom-out-workspace-reveal、fixed-anchor-cycle 并列），对应四个具体黄金样本：001_claudeai、010_perplexity A/B、014_OpenAI。

二、总时长与三幕结构

2.1 时长规格

变体	时长
全蓝图区间	5 – 11.8s
feed-rush	5.4s
pan-to-workspace	5.0s
selection-pivot	9.3s
document-to-artifact	11.75s

时长直接决定三幕的时间分配：第一幕（遍历）约占全片 40–60%，第二幕（HINGE）约 1–2 秒，第三幕（揭示 + 定格）占据剩余时间。

2.2 舞台设定（Stage）

一条 [长内容表面：Agent 聊天记录 / 任务流 / 分析文档 / 故事文档] 以全出血方式放置在 [平面浅色画布] 上。画布遵循黄金规范（goldens）：暖米白 / 奶油色 / 米色 / 纯白——内容表面自身的背景就是场景背景，无需额外布景。文字为深色，配以小面积 [强调色] 标记：绿色动词高亮、模型标签胶囊、勾选圆圈、黄色单元格。

2.3 三幕总览

第一幕 TRAVERSE（0.0 – ~40–60%）：建立 + 纵向遍历（证据）
    ↓
第二幕 HINGE（~1–2s）：唯一一次焦点交互
    ↓
第三幕 ARTIFACT（剩余）：成果揭示 + 定格

相机纪律是本蓝图的签名：全片最多两次真实相机运动，且分别夹在 HINGE 的两侧；其余一切都是静态画面上的元素级运动。

三、第一幕 TRAVERSE：证据的纵向遍历

3.1 开场建立（Opener，三种之一）

1. 一个 [标题] 逐字打出；或
2. 一个居中的 [标题] 缩小约 50% 并滑向左上角，停靠为固定页头；或
3. 镜头从 [聊天面板] 的紧特写开始。

3.2 遍历本身

遍历开始后，帧向下行进内容（或内容向上流过帧），按阅读顺序逐段揭示渐进的工作成果。不同内容类型有各自的遍历顺序：

• 聊天记录：[提示词 → 工具胶囊 → 已勾选进度项 → 打字摘要]
• 任务流：[带标签的任务行 → 静默任务 → 清单块]
• 分析文档：[标题 → 段落 → 对比表格 → 要点]
• 故事文档：[标题 → 故事段落 → 对话]

**遍历纹理（texture）**按成员变化：

• 一条连续慢速平移（pan-to-workspace 变体）；
• 一条快速连续信息流冲刺（feed-rush 变体）；
• 分段滚动、每站减速（document-to-artifact 变体）——站间带速度模糊、内容在帧边缘渐隐；
• 一条平滑滚动渐停（selection-pivot 变体）。

此外，新行可能在滚动接管前级联进入（交错到达）；打字行可能在移动的帧下方完成。两种遍历机制的技术归属见第六节：元素滚动走 3d-page-scroll 平面变体，相机平移走 viewport-change pan 模式。

四、第二幕 HINGE：唯一一次焦点交互

遍历落定后，单个交互将镜头扳向成果。四种 HINGE 机制（四选一）：

1. 文件附件 chip：在打字的交接行下方弹簧弹入，光标滑入并点击它；
2. 句子/引文：获得选区高亮扫描，[提示词胶囊] 在句子上方弹簧弹出待点击；
3. 可折叠行：到达帧中央并展开；
4. 隐式触发：打字的 [校验器摘要] 完成本身就是触发器。

这是全片唯一的交互——光标（如果有）在这一刻第一次出现。从规则映射看，HINGE 交互由 cursor-click-ripple（光标滑入、落地、点击）驱动，并叠加 physics-press-reaction（按下时光标与目标一起压缩），详见第七节。

五、第三幕 ARTIFACT：成果揭示与定格

HINGE 兑现，选择一种揭示机制：

1. 工作区 zoom-out：快速平滑减速的拉远镜头重新取景整个 [工作区]——刚才遍历的面板变成侧边栏，旁边是 [实时样机] 和 [工具面板]；
2. 电子表格 artifact：[成果窗口：电子表格] 从很小向满帧放大，然后慢速推进 + 横向平移，落在 [高亮单元格] 上；
3. 内联面板：在高亮行下方展开 [内联面板]，一个 [后续问题] 在其中逐字打出；
4. 子任务堆栈：行展开成 [子任务堆栈]，滚动停在 [旁白文本] 上。

可选 coda：一次光标点击在揭示出的成果内部瞬时切换一个 [屏幕]（例如点击手机标签页）。之后帧锁定，仅保留元素级运动直到结束。

从运动词汇看，zoom-out 揭示走 coordinate-target-zoom 的拉远变体或 viewport-change 单次连续 pull；artifact 窗口放大走 spring-pop-entrance（英雄到达放大，overshoot 调到约 0 / power3.out，让窗口显得"有分量"而非"弹跳"）；展开类走 anchored-layout-expand + 子元素 waterfall-entry（详见第七节）。

六、四种黄金变体详解

6.1 pan-to-workspace（001_claudeai，5.0s）

• 遍历：真实相机平移——紧贴聊天面板开场，一次不间断的下滑（从不切走），扫过胶囊 → 勾选列表 → 打字的校验摘要；
• HINGE：摘要完成；
• 揭示：一次快速减速 zoom-out 到三部分工作区（聊天作侧边栏 / 手机样机 / 微调面板）；
• Coda：光标点击瞬时切换手机屏幕；
• 相机纪律：恰好两次相机运动（pan + zoom-out）。

6.2 feed-rush（010_perplexity A，5.4s）

• 遍历：完全没有相机——标题停靠为页头，五条带标签的行级联进入，然后一条快速连续向上元素滚动冲过静默任务和清单，到达一个可折叠行；
• HINGE：行本身；
• 揭示：行展开成六项子任务堆栈，落在旁白上；
• 相机纪律：零相机运动——整片都是元素滚动 + 展开。

6.3 document-to-artifact（010_perplexity B，11.75s）

• 遍历：分段元素滚动（静态帧）——文档快速分步爬升，每站减速，站间模糊/淡出，清空到空白画布；
• HINGE：打字的交接行 + 文件 chip 弹出 + 光标点击；
• 揭示：电子表格窗口放大，然后一次慢速连续推进 + 右向平移落到黄色高亮预测列上。

6.4 selection-pivot（014_OpenAI，9.3s）

• 遍历：打字标题 → 文档构建（气泡提示 + 打字标题 + 段落填充）→ 一次平滑向上元素滚动渐停；
• HINGE：选区高亮扫描 + 全片唯一一次 push-in 框住该句 + 提示词胶囊点击；
• 揭示：内联面板在行下方展开，带引用原文和一个快速打字的后续问题；
• 相机纪律：相机锁定在 push-in 后的缩放级别直到结束。

四个变体的机制对照：

变体	时长	遍历机制	HINGE	揭示机制	相机运动数
pan-to-workspace	5.0s	真实相机平移（1 次连续下滑）	摘要完成	减速 zoom-out 到工作区 + coda 点击切屏	2
feed-rush	5.4s	元素滚动（快速连续上行）	可折叠行本身	行展开为 6 项子任务堆栈	0
document-to-artifact	11.75s	元素滚动（分步减速 + 站间模糊）	交接行 + chip 点击	表格放大 + 推进平移落到高亮列	1（推进平移）
selection-pivot	9.3s	元素滚动（平滑渐停）	选区高亮 + 唯一 push-in + 胶囊点击	内联面板展开 + 后续问题打字	1（push-in）

七、运动词汇表（Motion Vocabulary）

蓝图枚举了完整可复用的运动词汇，可按需组合：

• 遍历类：连续慢速向下相机平移；快速连续向上信息流滚动；每站减速的分段文档滚动；平滑滚动渐停；滚动站点之间的速度模糊；帧边缘内容渐隐；
• 建立类：居中标题缩小 ~50% 并滑向左上停靠；任务行交错级联进入；打字行 / 打字标题 / 打字后续问题（带插入符）；绿色引导动词高亮和模型标签胶囊从旁掠过；勾选项删除线掠过；
• HINGE 类：文件附件 chip 弹簧弹入；提示词胶囊弹簧弹出；聊天气泡到达；光标滑入 + 点击；句子选区高亮扫描；向选区的一次相机 push-in；
• 揭示类：快速减速 zoom-out 到完整工作区；成果窗口从小到大放大；慢速推进 + 横向平移落到高亮单元格；可折叠行展开为子任务堆栈；内联面板在行下方展开；coda 标签点击瞬时切换手机屏幕；帧锁定定格。

八、规则映射深度解析（Rule Mapping）

蓝图最实战的部分是逐条规则映射——每个节拍应该调用仓库 rules/ 里的哪条原子规则。以下结合规则源码展开：

8.1 纵向遍历（两种机制，二选一，绝不并用）

元素滚动 → 3d-page-scroll.md 的 flat 变体（tilt ≈ 0）：内容表面 translateY 滚动到各个 section；多阶段滚动变体覆盖分段站点停留；所有步骤保持同一 easing 族——power3.out / power4.out 呈现 UI 滚动手感。从规则源码看，其核心是一条 tl.to(".page-content", { y: -SCROLL_DISTANCE, duration: SCROLL_DUR, ease: "power3.out" })，其中 SCROLL_DISTANCE 必须在设计期从真实布局测量（tilt-card 高度 < 内容总高度才有滚动可言），多步滚动时各距离都从 .page-content 原点测量（非上一步的 delta），且滚动窗口不得重叠（SCROLL_AT_A + SCROLL_DUR ≤ SCROLL_AT_B）。

相机平移（转写滑动） → viewport-change.md 的 pan 模式：世界在静态帧下反向平移，一次连续 tween，无剪辑。其底层是单一 .world 包装器承载 translate(x, y) scale(S)（CSS 先 scale 后 translate），相机状态收敛于一个 cam 对象 + 单一 applyCamera() 写入点。

8.2 分站内容揭示

每次遍历节拍揭示了哪些内容（逐站排序） → dynamic-content-sequencing.md：构建期将内容数组 reduce 成带 start/end 的平坦时间线，BASE_DURATION + body.length × SEC_PER_CHAR + hold 让更长文本获得更多阅读时间；驱动器的 onUpdate 反向搜索活动条目，仅在状态切换时写 DOM（lastTitle 守卫防闪烁）。

8.3 站间速度模糊

分段滚动站点之间的速度模糊 → motion-blur-streak.md：模糊在最大滚动速度处达峰、每次落定时归零。规则源码提供两条路径：路径 A 用内联 SVG feGaussianBlur（运动轴上 stdDeviation="X 0"，经代理对象 tween + onUpdate 写 setAttribute，writeBlur() 先播种首帧保证 seek 到 t=0 时显示拖尾起点）；路径 B 用 2–4 个递减透明度的重影副本沿运动向量落后于主元素并随落定塌缩。

8.4 标题停靠

居中标题缩小并滑向固定页头停靠 → gsap-effects.md（一次同时的 scale + translate tween；纯两属性移动，无需命名规则）。

8.5 任务行级联

滚动接管前任务行交错级联 → waterfall-entry.md（到达级联）或 spring-pop-entrance.md（交错组的卡片式行）。注意两处关键约束：

• waterfall-entry 规定透明度是二元的 0→1（tl.set 瞬时揭示），绝不用淡入；每个元素在上一元素落定前约 1–2 帧内开始，形成加速波；ease 用 power4.out（expo.out 更脆），入口绝不用 .inOut；
• spring-pop-entrance 是"平滑胜过弹跳"的到达原语：默认 power3.out 长尾落定无过冲，fromTo 显式声明 { scale: 0, opacity: 0 } 起始态以保证 t=0 在 seek 下正确；弹跳 back.out 是罕见、明确"好玩"的特例，OVERSHOOT ≤ ~2。

8.6 打字行

打字行——校验摘要 / 交接行 / 文档标题 / 后续问题 / 开场标题 → discrete-text-sequence.md，尾部插入符叠加 context-sensitive-cursor.md。规则源码的关键：打字被编写为稀疏 { t, text } 状态数组，onUpdate 里反向搜索最近已过的条目并渲染其文本；真实性来自节奏形状——快速键击簇（间隔 0.06–0.20s）、词间停顿（0.3–0.6s）、错字、退格剥回分叉点、批量粘贴；等宽字体是硬要求，min-width 预留防右缘抖动。

8.7 弹簧弹入

文件附件 chip 弹入 / 提示词胶囊弹出 / 聊天气泡到达 → spring-pop-entrance.md。这是"到达"，不是"反应"——与 press-release-spring.md（已在屏元素的点击反馈链）区分。

8.8 光标点击

光标滑入、落地、点击（HINGE 与 coda） → cursor-click-ripple.md，按压力度叠加 physics-press-reaction.md（按下时光标与目标一起压缩）。

8.9 选区高亮

句子上的选区高亮扫描 → css-marker-patterns.md 的高亮扫描模式（该规则最常见的模式即"文本背后的黄色标记扫描"）。

8.10 相机运动（三种情形）

向高亮选区的唯一一次 push-in / 慢速推进 + 横向平移落到高亮单元格 → coordinate-target-zoom.md（测量偏离中心的 target——横向平移就是反平移分量）；当它跟在窗口放大之后时，按 multi-phase-camera.md 排序为阶段序列。快速减速 zoom-out 到完整工作区 → coordinate-target-zoom 的 zoom-out 变体（从放大取景开场，power3.out/power4.out 拉到 scale 1）或 viewport-change（对 cam 对象的单次连续 pull）。

coordinate-target-zoom 的底层值得深挖（对揭示类运动直接相关）：双嵌套包装器——外层只做 scale（transform-origin: 50% 50%），内层只做 translate(x, y)；反平移公式是 T = -offset（不依赖 S，1.5×/2×/3× 的反平移相同；常见错误直觉 T = -offset × (S - 1) 只在 S=2 时巧合成立）。而 viewport-change 单包装器形式下 CSS 先应用 scale，公式为 T = -offset × S——两个公式不可互换，必须匹配包装器结构。offset 的获取默认走测量（await document.fonts.ready 后 getBoundingClientRect 读真实中心，构建期测一次并烘焙，绝不在 onUpdate 里逐帧重算）；对称等宽行才允许用公式捷径。headroom 预算：maxScale = min((0.88 * W) / r.width, (0.88 * H) / r.height)，目标峰值 ≤ 画布 ~88%，否则轻微偏心误差就会被放大成"裁切感"。

8.11 展开类运动

可折叠行展开为子任务堆栈 / 内联面板在高亮行下方展开 → anchored-layout-expand.md（流内手风琴增长，把后续内容向下推——绝不 tween width/height），到达的子元素叠加 waterfall-entry（或 spring-pop-entrance 交错）。规则源码给出了关键构造：在 CSS 里把布局写成最终展开态，再用变换伪造折叠态——expand-mask（overflow: hidden，高度 BODY_H 常量绝不 tween）+ expand-sheet（从 y: -BODY_H 藏于页头后方）+ #below（容器之后的一切内容，同起 y: -BODY_H）；增长与推移是一条共享 fromTo（["#expand-sheet", "#below"] 同 tween），保证底边与推下内容由构造保持精确接触——分开的匹配 tween 是经典接缝 bug。GROW_DUR 0.35–0.6s、默认 power3.out、COLLAPSE_DUR 0.2–0.35s 更快（关闭是果断决定）；展开必须有因果（点击 / 换行 / 状态节拍），否则"读起来像闹鬼"。

8.12 coda 切屏与静态样式

coda 标签点击时手机屏幕瞬时切换 → discrete-text-sequence.md（离散整态交换；瞬时完成，成果内部无相机运动）。绿色动词高亮、模型标签胶囊、勾选圈删除线、黄色预测单元格、边缘淡出遮罩 → 表面内容的静态样式，无需任何运动规则——这是常见过度设计点。

九、相机约束：全片最多两次相机运动

蓝图的相机法则（原文强调 goldens 的 brief 里带 CRITICAL 相机注释）：至多两次真实相机运动，夹住 HINGE。

1. 先选遍历机制：相机平移（viewport-change pan——仅 pan-to-workspace 变体）或元素滚动（3d-page-scroll 平面变体——其余全部）——两者绝不兼用；
2. 揭示消耗第二次（或唯一一次）运动：一次 zoom-out 到工作区，或一次 push-in 到细节（coordinate-target-zoom，阶段由 multi-phase-camera 排序）；
3. 此后帧锁定——剩余全是元素级运动（打字、展开、切屏）；
4. feed-rush 变体消耗零次相机运动：整片 = 元素滚动 + 展开。

这种克制正是它区别于 cursor-ui-demo（相机伺服到每次交互）和 device-surface-showcase（展示相机呈现持机英雄）的地方。

十、Overflow 处理：滚动画面的布局审计豁免

这是获得干净 check 结果的硬性要求：遍历会刻意让内容越过帧边缘移动。因此必须双层处理：

1. 场景级裁剪：overflow: hidden——视觉上把越界内容裁掉；
2. 标记移动的内层：给承载转写/信息流/文档的移动包装器（.page-content / .world）打上 data-layout-allow-overflow 属性——否则 hyperframes check 布局门会对每条滚出视口的行报 text_box_overflow / container_overflow。

裁剪解决视觉问题，属性告诉布局审计"这是有意的"。这个豁免标记在仓库内被广泛使用：它同样出现在 anchored-layout-expand（折叠态把 sheet 停在 mask 盒外是"技术按设计工作，而非 bug"）、coordinate-target-zoom、camera-journey、device-surface-showcase、grid-card-assemble 等规则与示例（如 proof-logo-chain.html）中。但要注意其边界：coordinate-target-zoom 明确警告——目标填满画布 97%+ 且中心略偏时，感知门会报 primary-offscreen，而 data-layout-allow-overflow 并不豁免该错误。

进一步了解该属性的校验语义，可查看 hyperframes-cli/references/lint-validate-inspect.md（lint/check 工具链）与 hyperframes-core/references/full-screen-motion.md、hyperframes-core/references/data-attributes.md（组合契约与数据属性）。

十一、落地实操：从蓝图到可运行合成

在 HyperFrames 中实例化该蓝图时，遵循动画技能库（SKILL.md）的编排约定：

1. 默认用 GSAP：所有原子规则均为 GSAP 实现——单条暂停时间线、seek 安全、确定性；
2. 遵守 core 不可协商约束：单条暂停时间线、data-duration 决定长度、无 Math.random / Date.now / performance.now、无 repeat: -1、禁止布局属性 tween；autoAlpha 与零时长可见性 set 仅限显式时间线边界、且只用于非 clip 元素或 clip 内包装器；
3. 预计算布局常量：绝不从 getBoundingClientRect() 在 tween 时推导位置（渲染器并行采样会失同步）；坐标在合成设置期算一次并复用；
4. 空间运动只用 GSAP 变换别名（x/y/scale/rotation），外加 core 白名单的 opacity/color/backgroundColor/borderRadius——永远不用 width/height/top/left 做布局变化（这与 anchored-layout-expand 的"mask 高度是 CSS 常量"法则一致）；
5. 组合策略：若场景与现有多阶段模板匹配就用蓝图（本蓝图即其一）；否则从 rules-index.md 挑 2–4 条规则用单条暂停 GSAP 时间线粘合，更快且代码更少；
6. 审计：用 animation-map.mjs 读取 window.__timelines 上注册的时间线，枚举 tween、采样 bbox、计算标志，输出 animation-map.json 审查编舞（死区、交错一致性、生命周期警告）。

结语

transcript-scroll-artifact-reveal 把"AI 产品发布"最核心的叙事——大量生成工作 → 明确交付物——压缩进一个不超过 12 秒、至多两次相机运动、一次焦点交互的镜头模板中。它的价值在于把"证据遍历"与"成果揭示"解耦成三个可独立调参的幕，并提供四种经过 golden 片段验证的变体组合，让创作者能针对聊天记录、任务流、分析文档、故事稿四种内容形态直接套用。配合仓库规则库中的 3d-page-scroll 平面滚动、viewport-change 相机平移、coordinate-target-zoom 目标缩放与 anchored-layout-expand 流内展开等原子能力，该蓝图可以几乎零成本地实例化为确定性、可 seek 的 HyperFrames 合成——这正是它作为 Key_Feature 角色首选模板的原因。