OpenMontage HyperFrames 蓝图解析：以 cursor-ui-demo 打造「光标驱动」的产品 UI 演示镜头

导读

cursor-ui-demo 是 OpenMontage HyperFrames 动画技能库中面向 Product_Intro（产品亮相） 与 Key_Feature（关键特性演示） 两类叙事角色的时间编码镜头蓝图：一个可见的自定义光标在真实（重建的）应用 UI 上完成点击、悬停、拖拽，屏幕随之逐镜改变状态，而虚拟摄像机始终「追击」每一次交互——产品表面是画面主角，光标是画面中的演员。读完本文，你将掌握该蓝图的完整三幕镜头结构、两条节奏型（扫掠介绍 vs 工作流演示）、全部 motion vocabulary 与规则映射关系，以及如何在遵循 HyperFrames 确定性渲染契约的前提下，用一套暂停式 GSAP 时间线把它落地为可 lint / validate / render 的合成画面。

一、蓝图在 OpenMontage HyperFrames 体系中的位置

OpenMontage 把创意产出区分为两个正交概念（见 skills/core/hyperframes.md）：renderer_family（创作语法，proposal 阶段选定）与 render_runtime（实现引擎，可选 remotion / hyperframes / ffmpeg）。当 brief 偏向 Kinetic Typography、产品 promo、营销标题卡或「网站转视频 / UI 驱动合成」时，决策矩阵倾向于选择 HyperFrames——它的 HTML + GSAP 语法天然贴合设计师对这类画面的思考方式。

在技能分层上，.agents/skills/hyperframes-animation/ 是承载全部动效知识（原子规则、多阶段蓝图、转场、运行时适配器）的 Layer 3 技能，其入口文档 SKILL.md 明确了三层写作方法：

• 默认：从 rules-index.md 挑选 2–4 条原子规则，用一条暂停式 GSAP 时间线粘合；
• 当场景命中现成的多阶段模板时：加载蓝图——蓝图是可复用的、带时间码的整镜模板，可省下大量编排时间；
• 转场、技法 与 运行时适配器 在需要时单独查阅。

blueprints-index.md 收录了 15 个从 50 条黄金产品发布片（外加反向翻译到同一 brief 格式的 13 条本技能蓝图）中逆向出的「已被验证的形状」，cursor-ui-demo 是其中为「第一眼看到产品表面」与「端到端演示某个工作流」而生的一个。它的作用是即插即用的整镜时间码模板——Scene N (a–b s): ... + [slots] 槽位 + 一个具名的签名动作，让内容按旁白节奏逐段抵达而不是在 t=0 一次性倾倒。

二、intent 与签名动作：产品表面是主体，光标是演员

原蓝图 cursor-ui-demo.md 的 intent 一句话概括了核心戏剧逻辑：

一个可见的自定义光标驱动一个真实的（重建的）应用 UI 穿过点击 / 悬停 / 拖拽，让屏幕逐镜地改变状态，而摄像机追着每一次交互——产品表面是主体，光标是演员。

这一 intent 带来两个层面上的第一性原则：

1. 交互即叙事引擎：每一次光标动作都必须换来 UI 的即时、同拍的「活」响应（滚动、数值爬升、区域重排、内容替换），而不是静态示意图上的装饰性位移；
2. 摄像机 = 观众的眼睛：视口跟随光标——相机对光标触碰到的任何目标做伺服追踪。这正是本蓝图区别于 dataviz-scroll-reveal 这类「无人操作的摄像机滚动」和静态设备/窗口巡览的关键（见下文「camera modifier」小节）。

三、服务的叙事角色与其时长预算

该蓝图同时服务三个具体角色，均以 roles served 形式给出了它们在 storyboard frame type 枚举中的落点（Hook / Problem / Product_Intro / Key_Feature / Benefits / Social_Proof / CTA / Brand_Outro，映射关系见 blueprints-index.md）：

角色	来源帧	戏剧任务	情绪基调
Product_Intro	product-intro-cursor-ui-demo（#14 Product_Intro_02、#15 Product_Intro_2、#17 Product_Intro_04）	第一眼看产品表面——光标扫掠/悬停以 介绍 应用并揭示「它是什么」，落在悬停的 hero 元素或刚刚弹出的结果上	轻、探索性；背景色随推进逐步换色
Key_Feature	key-feature-cursor-ui-demo（#23 Key_Feature_2、#24 Key_Feature_03、#27 Key_Feature_06）	用 2–4 个离散节拍端到端演示一个多步工作流（编辑 / 配置 / 选择），每一拍都是 UI 会实时响应的真实编辑，最终锁定在主操作按钮或产出结果上	目标明确、步步推进
Key_Feature（变体）	workflow-approve-press	由 3D 倾斜侧翼构成的「指挥舱」式审批/确认工作流——步骤清单从 pending → active → complete 逐项打勾（CSS 响应 [data-state] 的状态机），侧翼按钮承接 PRESS 作为回报（颜色翻转为成功色、盖上一个勾）	点击就是高潮，而非路过的手势

时长预算：4.0–9.3s，即两个角色的并集——Key_Feature 落在 4.0–7.3s，Product_Intro 落在 6.1–9.3s。规划合成时若两种角色都要覆盖，应把总时长设到并集长度内。

四、shot structure：固定表面 × 服务光标 × 逐镜状态切换

镜头结构的总纲是：一个[产品 UI 表面]——固定的应用窗口 / 仪表盘 / 编辑器、带视差的 [内容卡] 堆叠，或一个 [容器对象/图标]——居中于 [背景色/渐变] 上，以 [平铺] 或 [3D-等距] 呈现；一个自定义 [品牌色光标+图标] 是主角，摄像机对它所触碰的一切做伺服；UI 对每个光标动作实时、同拍响应。两类角色的节奏折叠进来：Product_Intro 扫掠介绍，Key_Feature 执行工作流。

Scene 1（0.0–~Xs）——表面确立 + 首次触碰

产品表面居中抵达背景之上，随后自定义光标进入并对 [光标目标 1] 执行第一个动作，UI 在同一拍内实时响应；摄像机保持或开始缓慢推近被操作区域。

• Product_Intro 变体（低承诺首触）：光标悬停/扫掠某个控件，或将某个字段扫掠高亮到 [强调色]；[容器] 亦可扇开。可选：标签/标题淡入或变形到表面上。目的是「证明表面存在且可被触碰」。
• Key_Feature 变体（实质性编辑）：光标拖拽滚动条 / 向字段内打字 / 拖动手柄，UI 予以实质响应（滚动 / 数值攀升 / 区域重排）。若表面以 [3D-等距] 开场，可在此处瞬间透视压平为 FLAT，以便阅读工作流。

Scene 2（~Xs–~Ys）——相机追向下一次交互（引擎所在）

相机移动到下一个目标（推近+摇移 / 甩镜 / 下摇至 [光标目标 k]），光标执行第 k 个动作，UI 实时更新。每一拍都是一次离散交互，由快速相机移动连接；表面内层内容随交互逐拍 SWAP。

• Product_Intro 变体（探索式导航）：缓慢摇移 + 跨视差卡堆的景深对焦，或 [容器] 扇出成 [N 张选项/内容卡] 弹射就位；内容替换时，背景同步分步换色（[bg step 1] → step 2 → …）。通常一到两次这样的移动。
• Key_Feature 变体（工作流推进）：重复共 [2–4 拍]，每拍都是 UI 应答的一个独立操作——计数器 COUNT UP、[pill/swatch] 选中、modal 滑升并打字——用甩镜 / 渐进式放大连接。工作流肉眼可见地走向结果。

Scene 3（~Ys–结束）——回报状态、相机静止、HOLD

光标落在最终目标上，屏幕到达回报状态；相机静止并保持。

• Product_Intro 变体：光标悬停 hero 元素——[内容卡] 悬停放大、节点获得 [Available] 式药丸徽标、或 [结果卡] 弹入——即「这就是产品」的回报。静止、保持。
• Key_Feature 变体：锁定在 OUTCOME 的特写——光标落在 [主操作按钮：Export / Save / Reimburse] 上，[悬停背板/高亮] 弹入（高潮就是操作按钮/产出结果）。保持。

两个节奏型的关键差异

• Product_Intro 偏向缓慢、探索性的平移 + 焦点变换来扫过表面，回报状态是「揭示产品」；
• Key_Feature 偏向更干脆的甩镜 / 渐进式放大穿越工作流，并在主操作按钮上静止锁定。

五、motion vocabulary：蓝图的完整动作词汇表

原文档列出的可复用动作集合可按用途归为四类（写作时据此在 [slots] 中挑选填充）：

① 光标交互原语：cursor-driven click（光标点击）/ hover（悬停）/ sweep-highlight（扫掠高亮）/ drag（拖拽）/ type（打字）；按下并泛起涟漪（press-and-ripple）的控件点击；按钮按压压缩（button press-compress）；上下文相关的光标形态（如拖拽手柄上 pointer↔grab）。

② UI 的实时响应：滚动、数值爬升、区域重排、内容逐镜 SWAP；计数器 count-up；pill/swatch 选中；modal 滑升 + 打字；标签/标题在两状态间变形；UI 关键词高亮光晕；悬停放大或结果卡弹入。

③ 相机运动：朝向各目标的推近+摇移 / 甩镜 / 下摇（camera push-in + pan / whip-pan / pan-down）；对操作区域的坐标放大；3D 容器飞入并翻滚落定；透视压平（3D→2D 瞬切）；跨视差卡堆的景深对焦；分步（分页）的背景色推进；回报元素上的弹簧悬停背板。

④ 结构与 3D 编排：卡片向四角扇出（spring）；[容器] 展开为多个选项卡并弹射就位；3D-等距 UI 与视差卡堆。

这一词汇表全部由本技能 rules/ 目录下的原子规则背书，见下一节。

六、rule mapping：整镜如何逐条映射到原子规则

cursor-ui-demo 蓝图的编排价值在于：它把上述动作词汇表逐条钉到了可落地的原子规则上。原文档的完整映射关系如下（每个规则文件均在 rules/ 下给出可运行的 HTML/CSS/GSAP 配方）：

蓝图里的动作	映射规则	备注
视口跟随光标、相机伺服到其触碰处（主要）	camera-cursor-tracking	primary，整镜的签名机制
光标移到目标、按下并泛起涟漪（点击本身——主交互原语）	cursor-click-ripple	primary
逐镜的屏幕状态 SWAP（节拍间表面内层内容变化）	scale-swap-transition	同一中心点上的退出/进入群组形态变化
推近+摇移 / 甩镜 / 下摇到下一目标	viewport-change	单 wrapper 的平移+缩放合成变换
把追逐切分成离散交互节拍	multi-phase-camera	分阶段缩放 + 持续微漂移
放大到被操作的具体 UI 区域	coordinate-target-zoom	scale + 反向平移
光标图标/形态随上下文改变（如可拖动手柄上 pointer↔grab）	context-sensitive-cursor	光标色/样式随文本段切换
每拍呈现的内容、逐步 UI 状态推进	dynamic-content-sequencing	由脚本驱动、内容决定时长
扫掠高亮字段、把 UI 关键词高亮到 [强调色]	asr-keyword-glow	被触碰元素上的关键词光晕
按钮按下压缩、释放回弹	press-release-spring	线性压缩 + 弹簧恢复
更重按压时光标与按钮一起压缩	physics-press-reaction	双元素同步压缩
面板/卡片在两状态间变形	card-morph-anchor	以 scale 替代被禁的 width/height tween
终末主按钮的悬停背板弹入、结果卡 pop-in	spring-pop-entrance	进场的标准 pop（区别于按压反应）
卡片扇出/选项卡弹射就位	split-tilt-cards + spring-pop-entrance	扇形散开 + 弹跳落定
3D-视差内容卡堆为表面、3D-等距 UI	3d-page-scroll	UI 作为倾斜滚动/视差卡
节点获得 [Available] 式药丸徽标	ai-tracking-box	追踪框跟随目标
响应过程中计数器/数值 count-up	counting-dynamic-scale	数值代理上的单条 tween
结果条/数字在工作流出结果时填充	stat-bars-and-fills	bar/ring/fill 三种数据图元
以实时 [视频] 屏幕录制片段作表面	technique: video compositing	合成技术，非常规规则
透视压平（3D-等距 → 平面 2D 瞬切）与等距倾斜本身	technique: CSS-3D	无专属规则；倾斜/压平是 CSS-3D 原语
相机在回报元素上静止 HOLD	spring-pop-entrance（settle 阶段）	静态 HOLD 本身无需规则
3D 容器飞入并翻滚落定	depth-scatter-assemble	自由翻滚 3D 容器/对象飞入落定
跨视差卡堆的景深对焦	depth-of-field-blur（配合 3d-page-scroll 与 viewport-change）	近远卡之间的 rack-focus
与交互同步的分步背景色推进	discrete-text-sequence	离散状态步进，此处作用于背景色而非文本
modal 滑升 + 弹内打字合为单拍	card-morph-anchor / scale-swap-transition + discrete-text-sequence	面板滑入 + 弹内逐字文本

从映射可见一个清晰的分层原则：交互原语与 UI 响应由「点击 / 光标 / 文本」类规则承担，追逐/取景由「相机与视口」类规则承担，状态推进由「过渡 / 序列」类规则承担——三者合起来恰好是「演员动作 → 屏幕反应 → 镜头回应」的因果链。

七、camera modifier：把整镜区别于静态巡览的「追逐式摄像机」

蓝图文档明确给出了它的签名机制——camera CHASE：

视口经 camera-cursor-tracking（primary）从一个目标追到下一个目标，在 viewport-change 下实现为具体的推近+摇移 / 甩镜 / 下摇，由 multi-phase-camera 切分为离散交互节拍，每拍目的地由 coordinate-target-zoom 定位（放大到被操作区域）。

• Product_Intro 偏向缓慢探索性平移 + 扫过表面的焦点变换；
• Key_Feature 偏向干脆的甩镜 / 渐进式放大，穿越工作流并在主操作按钮上静止锁定。

这种「摄像机伺服到光标」正是把本蓝图与无人操作的相机滚动（dataviz-scroll-reveal）以及静态设备/窗口巡览区分开的那道分界线。 换言之：写这一蓝图时，镜头不得像展示视频那样自说自话地移动，它必须被光标牵着走。

八、核心规则源码级深入：三条「光标主演」规则

8.1 camera-cursor-tracking：两相机模式 + 数学连续的相位切换

完整配方见 rules/camera-cursor-tracking.md。它将世界空间（包含全部内容的完整目标元素）与屏幕空间（视口）分离，提供两个相位：

• Phase 1（静态）：世界容器以固定初始偏移就位，相机不动——在追踪开始前把观众目光锚定在构图上；
• Phase 2（追踪）：当焦点（光标 / 高亮 / 最近打出的字符）越过目标屏幕位置（可配置的 CURSOR_TARGET_FRACTION × 视口宽）后，世界容器向左平移（x: -<delta>），把焦点钉在该屏幕位置。

关键的工程细节是相位边界的数学连续性——分片形式 finalWorldX = Math.min(INITIAL_OFFSET, trackingOffset) 保证追踪启动瞬间世界位置与静态阶段末值相等，交接无缝；规则文档明确警告：不要改用 if (typingProgress > threshold) 的硬分支，否则相机会肉眼可见地跳变。

其 HTML 结构要点（data-composition-id / data-start / data-duration / data-track-index 全齐）：

<div class="scene" id="tracking-scene" data-composition-id="tracking-scene"
     data-start="0" data-duration="5" data-track-index="0">
  <div class="viewport">            <!-- overflow: hidden，裁掉 pan 出屏的左侧 -->
    <div class="world">            <!-- white-space: nowrap，文本单行供相机计算 -->
      <div class="search-bar">
        <span class="text" id="reveal-text">{phrase}</span><span class="cursor">|</span>
      </div>
    </div>
  </div>
</div>

GSAP 时间线核心（暂停式、同步构建、注册到 window.__timelines["tracking-scene"]）：

window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
const textEl = document.getElementById("reveal-text");
const targetCursorScreenX = CURSOR_TARGET_FRACTION * VIEWPORT_WIDTH;
const fullWidth = textEl.scrollWidth;
const trackingDelta = Math.max(0, VIEWPORT_PAD_LEFT + fullWidth - targetCursorScreenX);

// Phase 1 — 文本线性揭示（max-width tween，不碰 width/height/top/left 布局属性）
tl.fromTo(".search-bar .text",
  { maxWidth: 0 },
  { maxWidth: fullWidth, duration: REVEAL_DUR, ease: "none" }, REVEAL_START);

// Phase 2 — 相机追踪（在揭示完成前启动，让交接连续）
tl.to(".world", { x: -trackingDelta, duration: TRACK_DUR, ease: "power2.inOut" }, TRACK_START);

// 光标闪烁：GSAP 有限 yoyo，绝不用 CSS @keyframes（见下方确定性红线）
const blinkRepeats = Math.ceil(SCENE_DURATION / BLINK_HALF_PERIOD) - 1;
tl.to(".search-bar .cursor", { opacity: 0, duration: BLINK_HALF_PERIOD,
  ease: "steps(1)", yoyo: true, repeat: blinkRepeats }, 0);

window.__timelines["tracking-scene"] = tl;

规则文档还给出了关键参数的取值建议（来自源码，可放心复用）：CURSOR_TARGET_FRACTION 范围 0.5（居中追踪）→ 0.75（右倾）；TRACK_DUR 0.8–2.0s（<0.5s 是 snap，>2.5s 拖沓）；光标半周期 BLINK_HALF_PERIOD 0.2–0.4s；相机 easing 用 power2.inOut / power3.inOut（不要用 back.out——过冲读起来像 UI 弹跳而非镜头），reveal 用 "none" 保持逐字节奏，blink 用 steps(1) 硬开关。

8.2 cursor-click-ripple：move → click → ripple 三段式点击

完整配方见 rules/cursor-click-ripple.md。它由单条暂停式 GSAP 时间线表达三个阶段：

1. Move：光标从进入点缓动平移到目标元素中心；
2. Click：光标与目标一起做缩放压缩（yoyo：先缩后回）；
3. Ripple：从点击点向外辐射 1–3 个错峰膨胀圆环并淡出。

时间线骨架（光标与按钮同拍压缩、涟漪从视觉中心而非 bbox 原点扩出）：

tl.to(".cursor", { x: TARGET_X, y: TARGET_Y, duration: MOVE_DUR, ease: MOVE_EASE }, 0);
// 点击：光标 + 目标同位置时间、同时长、同步 yoyo
tl.to(".cursor", { scale: CURSOR_PRESS_SCALE, duration: PRESS_DUR,
  ease: "power2.in", yoyo: true, repeat: 1 }, CLICK_AT);
tl.to(".target-button", { scale: TARGET_PRESS_SCALE, duration: PRESS_DUR,
  ease: "power2.in", yoyo: true, repeat: 1 }, CLICK_AT);
// 涟漪：N 环错峰膨胀淡出
tl.set([".ripple-1", ".ripple-2", ".ripple-3"], { opacity: 1 }, RIPPLE_AT);
tl.to([".ripple-1", ".ripple-2", ".ripple-3"], { scale: RIPPLE_SCALE, opacity: 0,
  duration: RIPPLE_DUR, ease: RIPPLE_EASE, stagger: RIPPLE_STAGGER,
  immediateRender: false }, RIPPLE_AT);
window.__timelines["cursor-click-scene"] = tl;

规则文档对 cta-orbit-collapse.html 示例给出过参考值：MOVE_DUR 0.5s、MOVE_EASE back.out(1.3)、点击在光标落定后 0.2s、PRESS_DUR 0.08s、光标压缩 0.85 / 目标 0.95、单环 0.7s 扩至 5 倍。两个关键工程点：涟漪 immediateRender: false 以保持 t=0 的 scale:0, opacity:0 初始态；光标与涟漪一律 pointer-events: none（纯视觉，不阻塞任何可交互导出）。在本蓝图里，这一规则正是 Key_Feature「按压回报」的主交互原语，也是第三个 Key_Feature 变体 workflow-approve-press 中「PRESS 即高潮」的底层实现。

8.3 context-sensitive-cursor：随文本段变色的打字光标

完整配方见 rules/context-sensitive-cursor.md。当 UI 演示涉及向字段/终端内打字时，光标不再是单一颜色——它随当前激活文本段切换：正在打品牌名时光标变为品牌强调色，打到占位符时变灰，命令段、成功段各有色板。驱动方式是一个 SEQUENCE 数组 + 驱动 tween 的 onUpdate 反向查找当前段：

const SEQUENCE = [
  { t: 0, text: "", segment: "main", color: "{mainColor}" },
  { t: T_LEADIN_END, text: "{leadInChunk}", segment: "main", color: "{mainColor}" },
  { t: T_BRAND_IN, text: "{...}", segment: "brand", color: "{brandColor}" },
  // ...
  { t: T_SUCCESS, text: "{...}", segment: "success", color: "{successColor}" },
];
function entryAt(time) {
  for (let i = SEQUENCE.length - 1; i >= 0; i--)
    if (time >= SEQUENCE[i].t) return SEQUENCE[i];
  return SEQUENCE[0];
}
// onUpdate 内：写文本 + 换光标底色；sin 方波驱动确定性闪烁

它与本蓝图常组合使用：camera-cursor-tracking 让镜头追着打字走、discrete-text-sequence 提供同样的 SEQUENCE 模式、打字完成后 press-release-spring 承接确认按压——恰好覆盖 Scene 1「打字」→ Scene 2「相机跟随」→ Scene 3「按压回报」的完整链路。规则文档强调：光标底色应使用 background 属性而非 color（光标是色块不是字形）、必须 display: inline-block、容器与文本要 white-space: pre（保留行尾空格以免光标悬空）。

九、支撑规则的调用链与示例落点

在 OpenMontage 的 .agents/skills/hyperframes-animation/examples/ 中保留了与本蓝图同族的可运行示例，可作为逆向参照与值域佐证：

• examples/cta-orbit-collapse.html —— cursor-click-ripple、spring-pop-entrance、scale-swap-transition 等规则文档反复引用的调参参照（0.5s 移动、0.08s 按压、点击后 0.2s 涟漪等）；
• examples/workflow-approve-press.html —— 蓝图第三个 Key_Feature 角色的命名来源：3D 倾斜侧翼、[data-state] 驱动的 pending → active → complete 步骤状态机、以及把 PRESS 作为高潮的回报按钮。

围绕该蓝图所依赖的「追逐 + 状态推进」体系，值得一并掌握的支撑规则还有：

• viewport-change：单 .world wrapper 的合成变换 translate(x,y) scale(S) 模拟缩放/平移/焦点锁定，其反平移数学为 T = -offset × S（注意与 coordinate-target-zoom 的 T = -offset 不同）；
• multi-phase-camera：三档相位缩放（pull-back → focus → push）+ 持续正弦微漂移；蓝图把它当作把追逐切成离散节拍的「分镜时钟」；
• dynamic-content-sequencing：由脚本 {textMain, textAccent, charSpeed, hold} 预计算扁平 [{startTime, endTime, ...}]，实现内容驱动时长，无需手工微调偏移——对应 Scene 2 中「每拍呈现不同内容」的需求；
• scale-swap-transition 与 card-morph-anchor：屏幕状态逐镜 SWAP 的两种形态——居中缩放互换与容器锚定形变；
• discrete-text-sequence：阈值驱动的整段文本替换，也被复用于分步背景色推进；
• spring-pop-entrance：标准进场 pop（scale:0→1 + back.out 过冲），承担结果卡、回报按钮悬停背板的弹入与落定。

十、OpenMontage 工程侧：这份蓝图如何进入真实渲染链路

蓝图本身是 HyperFrames 合成技能的创作资产，而 OpenMontage 在工程侧提供了把它送进渲染管线的机制（见 skills/core/hyperframes.md）：

• 当 proposal 选定 render_runtime = "hyperframes" 时，compose 阶段把 OpenMontage 工件翻译成 HyperFrames 工程文件：edit_decisions.cuts[] 的每刀 → index.html 中带 data-composition-id / data-composition-src 的片段；in_seconds / out_seconds → data-start / data-duration；选定 playbook 经 lib/hyperframes_style_bridge.py 翻译为 :root CSS 自定义属性与 DESIGN.md；
• 具体写入由 tools/video/hyperframes_compose.py 完成：写文件 → npx hyperframes lint → validate → render，返回含 MP4 路径的 render_report；
• 测试侧有 tests/tools/test_hyperframes_compose.py 保障链路行为。

预检 get_info() 返回 runtime_available / node_major（需 ≥22）/ ffmpeg_available / doctor_ok 等字段；渲染为本地零 API 成本但 CPU 密集，需经 cost_tracker 以 estimate / reserve / reconcile 记账。至于哪些管线采纳 HyperFrames：animation、animated-explainer、screen-demo 属 Wave 1（其中 screen-demo 的合成产品 UI 正是 cursor-ui-demo 这类光标驱动画面的典型落点，Terminal 特化场景仍优先 Remotion TerminalScene）；talking-head、avatar-spokesperson 等则因依赖 TalkingHead 平行移植而延后。

十一、落地方案：蓝图的 Reproduce / Adapt / Compose 与确定性红线

参照 blueprints-index.md 的挑选步骤，将 cursor-ui-demo 实例化的流程是：

1. 在 storyboard frame 的 role 菜单（Product_Intro / Key_Feature）中找到本蓝图；若两个都合适，选动作更接近你规划的；
2. 打开蓝图文件，通读其时间码模板、[slots] 槽位与签名动作（光标追逐）；
3. 选择姿态——Reproduce（槽位干净映射）/ Adapt（结构成立但内容/表面不同，保留签名动作）/ Compose（无合适蓝图，从 motion vocabulary 自建）；
4. 若都不匹配就不要硬套错误蓝图，改用词汇表自由编排，但揭示仍要按 VO 节奏散布在整镜而非 t=0。

写作时必须遵守 HyperFrames 动画层与核心层的共同确定性红线（见 SKILL.md 与 skills/core/hyperframes.md）：

• 时间线必须暂停（gsap.timeline({ paused: true })），绝不 tl.play()；HyperFrames 逐帧 seek 渲染；
• 注册键 window.__timelines["<id>"] 必须与场景根 data-composition-id 精确一致；
• 时间线需同步构建于脚本解析期——不要用 document.fonts.ready 门控，否则并行渲染的 worker 会在注册前 seek 到空帧，产生可见闪烁；
• 空间运动只用 GSAP transform 别名（x / y / scale / rotation），文本/布局只允许 max-width、opacity、color、backgroundColor、borderRadius 等非布局属性；
• 严禁 Math.random() / Date.now() / performance.now()、repeat: -1、CSS @keyframes ... infinite 与 timeline 构造期的异步上下文；光标闪烁一律用有限次 yoyo / sin 方波的 GSAP tween；
• 位置常量预计算，绝不在 tween 时读 getBoundingClientRect()（并行采样会导致布局测量脱同步）。

完成写作后走校验协议：npx hyperframes lint（静态契约：重复 id、轨道重叠、缺失 data-composition-id、未注册时间线）→ npx hyperframes validate（浏览器级运行时检查）→ npx hyperframes render --quality standard（lint / validate 不过一律不得渲染，这是把 HyperFrames 区别于 FFmpeg / Remotion 的价值所在）→ 渲染后 ffprobe / 抽帧 / 转录的最终复审。

延伸阅读

• 蓝图全文：blueprints/cursor-ui-demo.md
• 蓝图清单与角色菜单：blueprints-index.md
• 原子规则索引：rules-index.md
• 技能入口与运行时选择：SKILL.md、skills/core/hyperframes.md
• OpenMontage 合成链路：tools/video/hyperframes_compose.py、lib/hyperframes_style_bridge.py、tests/tools/test_hyperframes_compose.py
• 同族可运行示例：examples/workflow-approve-press.html、examples/cta-orbit-collapse.html