HyperFrames 面板编辑实时同步（Panel Edit Live Sync）蓝图详解：让"改这里、看那边"在同一个节拍内发生

本文围绕 HyperFrames 动画技能库中的 panel-edit-live-sync 蓝图展开。该蓝图服务于"特性演示"（Key_Feature）场景：当产品卖点本身就是实时编辑/实时检视——拖一个旋转数值旋钮、页面上按钮同步转动；敲一个 class 名、预览图标逐键缩放；选一个单位、面板读数原地换算——就用它来编排整段镜头。读完本文你将掌握：三种同步模式（写同步 A / 读同步 B / 自转换 C）的取舍、逐场景（Scene 0→N）的时间码模板、与之为伍的原子规则映射，以及"共生体"（live-sync couple）在 HyperFrames 确定性时间线上的落地实现方式。

蓝图的定位：Key_Feature 场景下的"共生体"编排

在 HyperFrames 动画体系中，**蓝图（blueprint）**是"经黄金样本反向工程、带时间码的分镜模板"。panel-edit-live-sync 是 blueprints-index.md 中收录的 22 个蓝图之一，专门服务 Key_Feature（feature_showcase）角色，推荐时长 5.3–11.9 秒。

它的意图（intent）可以概括为：一个二分的舞台（bipartite stage）——一个检查器/编辑器面板（panel）绑定一个目标表面（target surface）——光标或文本光标持续操纵一个控件（数值拖拽、单位/代码生成下拉、缓动手柄拖拽、行内改键），而与之耦合的表面在同一节拍内实时响应：页面按钮随数值拖拽旋转、预览图标随每次按键缩放、十六进制读数随每次悬停镜像、代码块随下拉选择即时转换。这里的"动"本身就是因果性——一个手势，两个表面在同一帧内改变。摄像机的职责是保证"这对共生体"的共同可见性（co-visibility），而不是追逐（chase）。

这与 cursor-ui-demo 形成关键区分：后者是光标驱动 UI 完成点击式工作流、摄像机追着每个交互跑；而 panel-edit-live-sync 处理的是"改这里，看那边"的实时耦合演示。从源码看，这两个蓝图的摄像机法则正是彼此的镜像（详见下文"摄像机修饰符"一节）。

出处（Provenance）：跨产品、跨方言的 7 个黄金样本

蓝图文档标注了其反向工程来源——4 款产品、两种视觉方言、三种同步模式下的 7 个 Key_Feature 黄金样本：

• 写同步（Write-sync，控制 → 目标）：视觉编辑器面板拖拽旋转/边距/内边距，页面上按钮同一节拍内旋转位移（含单位与字重下拉）；在发光代码标注（glowing code callout）内行内改键 className，预览图标随每次按键缩放（光标即演员，推进/拉回往返中两表面必须始终同框）；运动编辑器沿点状运动路径拖拽旋钮、把缓动手柄弯成 S 曲线，用一个大幅拉远镜头收尾——成品开关"表演"刚编辑好的缓动（延迟兑现 payoff）。
• 读同步（Read-sync，目标 → 面板镜像）：点击页面按钮弹出工具栏 → "Copy code" → 代码编辑器在持续缓慢拉远镜头中填入该元素的 CSS；悬停调色板色块，页脚十六进制读数随每次悬停实时更新，同时网格滚动。
• 自转换（Self-conversion，面板同时是控制与目标）：3D 倾斜的间距面板内单位下拉原地吸附转换（rem→px→%，0,375 rem → 6 px → 4,871 %）；代码生成下拉选择 SwiftUI，CSS 代码块在快速推近（punch-in）下交叉淡变为 SwiftUI。

文档特别给出浓度警示（Concentration caveat）：7 个样本中有 4 个来自同一支视频（CSS Scan Pro 2.0），但"耦合引擎"本身另外由 3 款产品、3 支不同视频、两种方言独立佐证（Figma Dev Mode、Figma 运动编辑器、bolt.new），且每款绑定的表面配对都不同（页面+检查器、画布+时间线+缓动面板、IDE 代码+应用预览），因此该形态是真实的通用形态，而非某支影片的制片风格。被标记为可选的"CSS-Scan-Pro 制片风格"包括：深色石板能力标题卡前奏、带白描边的超大黑色光标、绿色成功对勾翻转、闪现提示气泡。触发条件是产品相关的：当特性本身就是实时编辑/检视时才使用该形态。

三种同步模式：A 写同步、B 读同步、C 自转换

蓝图的核心是三种可折叠的子形态，它们回答同一个问题："共生体的哪一端在编辑，哪一端在响应？"

子形态	方向	动作	响应
(A) 写同步	控制 → 目标	光标/文本光标编辑一个控件（拖拽数值、改键、拖旋钮/缓动柄）	目标表面实时变换（旋转/位移/拉伸/缩放/重动画）
(B) 读同步	目标 → 面板	光标选择/悬停目标	面板读数实时镜像（CSS 流入、hex 页脚更新）
(C) 自转换	面板内自洽	编辑作用于面板自身读数	读数原地转换（单位吸附换算、CSS 交叉淡变为 SwiftUI）

一次 Key_Feature 演示通常把同一个能力演成 2–4 个编辑节拍（edit beats），每个节拍都是"一次连续操纵 + 耦合表面的实时应答"，收束在三种结局之一：最后一个编辑保持（landed edit）、拉远镜头让成品"表演"编辑后的参数（payoff zoom-out）、或箭头标注落在结果上（callout lands）。

时长预算

• 最短约 5.3 秒：读同步悬停演示（hover demos）；
• 多节拍拖拽/编辑类演示：8.7–11.9 秒。

镜头结构：Stage、Panel、Actor 三方同框

每个镜头的结构化骨架如下（[槽位] 表示可按产品替换的内容）：

一个 [目标表面——网页 / 设计画布 / IDE+实时预览] 与一个 [绑定面板——浮动检查器 / 停靠代码面板 / 时间线+缓动编辑器] 同框；[光标或文本光标] 是演员；每个节拍都把一次操纵手势与耦合表面上的同步响应配对；选择高亮装饰（selection chrome）声明哪个元素被绑定；摄像机取景锁定或保持活跃，但始终不拆散这对共生体。

Scene 0（可选，0.0–2.0s）——能力标题卡

深色 [石板/炭灰] 卡片；一行白色文字点出能力名（"Edit CSS visually"、"Auto measurement units conversion"、"Check color palettes"）——淡入/漂入、保持、然后硬切或快速运动模糊拉远落定舞台。这是偏 CSS-Scan-Pro 制片风格的变体（部分样本冷开场直接落在舞台上，或用一个巨型小写 [动词] 词压在预览之上）。

Scene 1（约 1–3s）——共生体确立

[目标表面] 与 [绑定面板] 一同到场：面板停靠、带微妙 3D 倾斜浮动、或从边缘滑入。选择高亮装饰弹出以声明绑定：[包围盒+角手柄 / 红色虚线检视辅助线 / 依次弹出的红线测量芯片 / 绿色类名头部]。光标入场并滑向第一个控件。

Scene 2..N（每节拍约 2s）——编辑节拍：手势与镜像同帧（引擎本体）

这是整张蓝图的"引擎"。每个节拍 = 一次连续操纵 + 它的实时应答：

• 变体 A（写同步）：光标点击并拖拽数字字段（数值随拖拽增减：0°→-10°、0→38 px），[按钮/元素] 实时旋转/位移/拉伸；或沿点状运动路径拖拽 [旋钮 / 将缓动曲线弯成 S 形的缓动手柄，坐标读数同步更新]；或文本光标在 [发光放大镜标注] 内行内改键数值（1xl→4xl→2xl），[预览元素] 随每次按键缩放。可用闪现 [提示气泡] 为手势命名。
• 变体 B（读同步）：光标点击/悬停目标元素——[浮动工具栏] 在其上方弹起，菜单选择触发（Copy code → 图标翻转为绿色对勾），[代码编辑器] 填入流式 CSS；或悬停的 [色块] 描边，[页脚 hex] 随每次悬停即时更新，网格滚动。
• 变体 C（自转换）：光标点击单位/代码生成 [下拉]——展开带悬停高亮行 + 对勾——选择后读数原地吸附转换（rem→px，数值重算）或整个 [代码块] 交叉淡变为新语言、标题翻转（Layout→HStack）。
• 每节拍摄像机：锁定广角同框；或推近（punch-in）到动作表面（面板滚动揭示下一节）——但写同步编辑期间手势与镜像必须保持同框可见（071 法则：推近从不裁掉预览）。

Scene N（末节拍 → 结束）——编辑兑现，HOLD

结局分三路：

• 最后一击保持：最终选择落定（100 - Thin 选中、4,871 % 应用）后状态直接保持——绝不允许结尾停在提示气泡上而下拉未展开。
• 兑现拉远（payoff zoom-out）：大幅拉远镜头揭示成品"表演"刚编辑的参数——开关以新缓动在完整手机样机内滑动、彩纸飘落；或拉回至完全相同的全景取景，[终端] 追加一行 HMR 日志。
• 标注落定（callout lands）：大号 [箭头标注] 滑入指向结果 / 导出菜单保持展开在光标之下；取景微妙外漂。

标志性动作（Signature Move）

实时同步共生体（live-sync couple）——一个被拖拽/输入/拖动的控件与其绑定表面同时变化、同框呈现、贯穿每个编辑节拍。这是该蓝图区别于其他所有蓝图的辨识度所在。

与核心规则引擎的映射：rule mapping 全解析

蓝图不是孤立模板，它把每一个可复用动作显式映射到 rules/ 下的原子规则。panel-edit-live-sync 的规则映射（rule mapping）如下，它是本蓝图可直接查证的技术清单：

动作	映射规则
光标滑向控件、按压、点击反馈	cursor-click-ripple
光标在可拖字段/可拖手柄上 指针↔抓取 状态翻转	context-sensitive-cursor
拖拽下数值读数增减	counting-dynamic-scale
实时同步共生体本身（控制手势在同一节拍驱动第二个元素属性）	control-target-sync（同时间线位置上的并发补间——读数补间 + 目标变换补间共用一个 label）
行内改键（退格、错字、停顿/按键阈值）	discrete-text-sequence（+ 光标闪烁用 context-sensitive-cursor）
逐键预览缩放	discrete-text-sequence（按键状态阈值）+ control-target-sync（耦合缩放步进）
数值吸附转换 / hex 读数切换 / 标题翻转 / 状态文本	discrete-text-sequence
语法高亮代码流入/粘贴、终端日志追加	discrete-text-sequence（批量追加明确属于适用范围）
下拉/菜单弹开、浮动工具栏弹起、提示气泡闪现、红线芯片依次弹出（交错，≤500ms）	spring-pop-entrance
下拉行悬停高亮步进与选择时序	dynamic-content-sequencing
虚线检视辅助线 / 选择轮廓描画	svg-path-draw；点状运动路径 + 路点也走 svg-path-draw（仅路径显示）
旋钮沿路径行进	路径跟随——见 hyperframes-keyframes（paths）
缓动手柄拖拽弯曲线（SVG d 插值）	SVG 路径变形——见 hyperframes-keyframes（morph；svg-path-draw 只能描边、不能变形路径）；旁侧坐标读数走 discrete-text-sequence
代码令牌上的发光放大镜标注（含 UI 令牌的实时放大副本）	组合：ambient-glow-bloom（辉光）+ spring-pop-entrance（标注弹入）
代码面板从边缘滑入 / 面板停靠	card-morph-anchor / scale-swap-transition（依 cursor-ui-demo 先例）
代码块 CSS→SwiftUI 交叉淡变；成功图标翻转为绿色对勾	scale-swap-transition（同锚点状态互换）
面板内滚动 / 色块网格滚动（遮罩内位移）	gsap-effects；3D 倾斜面板上则用 3d-page-scroll（倾斜平面 + 内部滚动）
浮动面板微妙 3D 倾斜漂移；保持时的连续微漂移	multi-phase-camera（微漂移相位）
推近到面板/时间线/代码并落定	coordinate-target-zoom + multi-phase-camera
缓动推近 → 保持 → 缓动拉回（保持共可见性）	multi-phase-camera（拉回/聚焦/推近时序）
单次持续慢拉远贯穿整段演示；大幅拉远兑现	viewport-change（单个 .world 复合变换）
快速运动模糊拉远落定过渡	motion-blur-streak + viewport-change
结果元素以编辑后的缓动重动画（开关以新 S 曲线滑动）	gsap-effects（兑现元素上的自定义缓动补间）
兑现时的彩纸飘落	particle-burst（确定性彩纸）+ sine-wave-loop（有界漂移）
大号箭头标注滑入 + 保持	gsap-effects（单次滑动补间）
深色标题卡前奏（能力行淡入/漂入、硬切出）	跨蓝图：titlecard-reveal 领域；漂移/淡入本身走 gsap-effects——此处 EXIT-N/A
标题与演示间的硬切；结尾静态保持	EXIT-N/A（过渡注册表 / 无需规则）

摄像机修饰符：共可见性是第一法则

文档明确给出三条经证实（attested）的取景姿态，其与 cursor-ui-demo 的"追逐"法则互为镜像：

1. LOCKED（锁定）：整段演示固定取景，面板与目标同框，所有运动停留在元素级（样本 CSS_39.0、CSS_102.8 落定后）。
2. ONE CONTINUOUS MOVE（单次连续移动）：一条缓慢拉远（或漂移）贯穿整段演示镜头，编辑在其内部发生（CSS_10.9、CSS_63.5 的倾斜漂移）→ viewport-change。
3. PUNCH-AND-RETURN（推近并返回）：缓动推近到动作表面、编辑期间紧贴保持、缓动拉回至与开场完全相同的取景（071_bolt、080_figma、017_figma）→ multi-phase-camera + coordinate-target-zoom——硬性约束：写同步编辑期间镜像表面绝不裁出画面。

文档的判据很尖锐："如果摄像机在目标间逐个追逐、每个节拍都切换状态，那你是在 cursor-ui-demo，不是在这里。"

源码纵深：control-target-sync 规则如何实现"共生体"

蓝图所指认的核心引擎规则是 rules/control-target-sync.md——"THE live-editing move"。它把"改这里、看那边"读作因果性，并用一份"耦合契约"来生产这种读感。

连续编辑：一个 label、两个补间、同一节拍

一个编辑节拍（edit beat）是在同一个时间线 label 上的一组并发补间：先 tl.addLabel("edit1", …)，然后把读数补间（数值代理 + onUpdate 只写 textContent）和目标变换补间（rotation / x / y / scale 到同一端点）都放在该 label，共享同样的 duration 和 ease。两条运动是同一个手势的两个投影——值到 40% ⇒ 目标到 40%，每一帧都如此、任意 seek 下也如此。这种数学级锁步读起来就是"面板在编辑页面"，而不是"两条动画碰巧重叠"。

// ---- 连续共生体：ONE label；两个补间共享 duration 与 ease ----
tl.addLabel("edit1", EDIT1_AT);
const rotState = { v: 0 };
const rotReadout = document.getElementById("rotation-readout");
tl.to(
  rotState,
  {
    v: ROT_TARGET,
    duration: SCRUB_DUR,
    ease: SCRUB_EASE,
    onUpdate: () => {
      rotReadout.textContent = `${Math.round(rotState.v)}°`;
    },
  },
  "edit1",
);
tl.to(
  "#target-button",
  { rotation: ROT_TARGET, duration: SCRUB_DUR, ease: SCRUB_EASE },
  "edit1", // 同一 label —— 镜像在同一帧应答
);

HTML 侧按"二分构造"（bipartite by construction）组织：目标表面与检查器面板共享画框；每个被拖拽的读数都要加 font-variant-numeric: tabular-nums 和固定 min-width（≥ 最长值），否则数字变化时面板边缘会抖动：

<div class="target-surface">
  <div class="target-button" id="target-button">{buttonLabel}</div>
  <div class="preview-row">
    <div class="preview-icon">{iconA}</div>
    …
  </div>
</div>
<div class="panel">
  <div class="field-row">
    <span>Rotation</span><span class="field-value" id="rotation-readout">0°</span>
  </div>
  <div class="field-row">
    <span>Class</span><span class="field-value mono" id="class-readout">text-1xl</span>
  </div>
</div>

离散编辑：一个状态数组同时驱动两端

对于离散编辑（逐键改键、下拉选择、单位吸附），共生体以"步进"而非"滑动"工作：单个阈值状态数组同时携带两端——每个状态同时持有读数文本与目标属性值——由一个驱动者应用当前生效的状态。两端读同一份状态对象，因此构造上就不可能失步（desync by construction）。首个条目必须等于初始 DOM 状态：

// ---- 离散共生体：ONE 状态数组驱动两端 ----
const STEPS = [
  { t: 0.0, text: "text-1xl", scale: 1.0 }, // 必须等于初始状态
  { t: 0.4, text: "text-4xl", scale: 1.9 },
  { t: 1.0, text: "text-xl", scale: 0.85 }, // 退格
  { t: 1.35, text: "text-2xl", scale: 1.3 }, // 落定
];
const stepAt = (time) => [...STEPS].reverse().find((s) => time >= s.t) ?? STEPS[0];

tl.addLabel("edit3", EDIT3_AT);
const classReadout = document.getElementById("class-readout");
const stepDriver = { t: 0 };
let lastStep = null;
tl.to(
  stepDriver,
  {
    t: STEPS_TOTAL,
    duration: STEPS_TOTAL,
    ease: "none",
    onUpdate: () => {
      const s = stepAt(stepDriver.t);
      if (s !== lastStep) {
        classReadout.textContent = s.text; // 控制端步进
        gsap.set(".preview-icon", { scale: s.scale }); // 目标端步进 —— 同一状态对象
        lastStep = s;
      }
    },
  },
  "edit3",
);

注意 onUpdate 中用一个 lastStep 守卫避免每帧重复写 DOM——这与 HyperFrames 渲染并行采样的契约一致（详见下文"确定性约束"）。

变体：自转换、延迟镜像、读同步镜像、颜色共生体

规则文档在蓝图之上又给出了四个实现变体，与蓝图的三种模式一一对应：

• 下拉选择 → 原地转换（自转换，C）：选择把面板自身读数原地转换（tl.set("#padding-readout", { textContent: "6 px" }, "pick")）——控制与目标坍缩为同一元素。下拉组件由相邻规则组合：菜单弹开走 spring-pop-entrance、行悬停步进走 dynamic-content-sequencing。转换必须是瞬时吸附——在单位字符串之间补间读起来是坏的，而且"瞬时"本身就是被销售的特性。
• 缓动手柄拖拽 → 目标重动画（延迟镜像）：这次编辑编写的是一个行为，因此镜像是一次**回放（replay）**而非并发变换：节拍 1 拖手柄（手柄补间 + 坐标读数），随后在更晚的 label 让目标以新编写的曲线执行运动（tl.fromTo("#toggle-knob", { x: 0 }, { x: KNOB_TRAVEL, duration: REPLAY_DUR, ease: AUTHORED_EASE }, "replay")），通常配合拉远镜头（viewport-change）。这是唯一被允许"响应不在手势节拍内"的情形；回放仍必须 unmistakably 是刚编辑的参数。
• 读同步镜像（B，反向）：手势发生在目标上（悬停色块、选择元素），面板读数是被绑定的一端。同样的离散契约——一个 { t, hoverTarget, readout } 状态数组同时驱动高亮与文本。
• 颜色共生体：读数计数（0 → 80）的同时目标 backgroundColor 在同一 label 于两个调色板端点间补间。保持两个固定端点（GSAP 插值）；绝不要手写逐帧十六进制字符串。

参数取值表

token	范围	说明
SCRUB_DUR	0.8–1.6 s	观众必须看到两端同时运动——低于约 0.6s 镜像最多只能被潜意识感知
SCRUB_EASE	power1.inOut / power2.inOut	两个补间逐字共享。绝不用 back.out / elastic.out——过冲的数值读作坏的铰链；读数是一等数据
edit endpoints	可见但合理	−10° 倾斜、38px 位移、1xl → 4xl → 2xl；转 2° 演示不了任何东西
HOLD_BETWEEN	0.3–0.8 s	每个落定值喘口气；低于 0.3s 节拍糊成一次手势
BEAT_COUNT	2–4	一次编辑只是瞬间，不是演示；超过 4 节拍读作设置浏览
STEP gaps（离散）	0.15–0.5 s	按键节奏按 discrete-text-sequence；首个状态必须等于加载态
VALUE_MIN_WIDTH	≥ 最长值宽度	没有它，数字计数变化时面板边缘抖动

硬性约束（Critical Constraints）

• 一个 label、一个手势——读数补间与目标补间共享位置、duration、ease；绝不"先读数后目标"地排序，也绝不让目标滞后读数哪怕 0.1s——延迟响应读作"动画跟在编辑后面"，而不是"被绑定的表面"。ease 不匹配即使端点一致也会在中途失步。
• 离散步进共享一个状态对象——两端读同一数组条目，构造上不可失步；首条目镜像初始 DOM 状态。
• 读数是一等数据——落定无过冲、无反弹；目标可以带手势的缓动，但必须精确落在编辑后的值上。
• 共可见性是承重结构——每个编辑节拍控制与目标共享画框；摄像机运动绝不能裁掉镜像（围绕节拍推拉，而不是穿过节拍）。
• 每个被拖拽读数都要 tabular-nums + 固定 min-width；onUpdate 保持 O(1)——只写文本，离散驱动用 last-state 守卫。
• 以落定编辑收尾——末节拍以值应用并保持（或延迟镜像回放）收束；绝不停在半手势或未展开的菜单上。
• 手势的演员是另一条规则——光标滑行、抓取翻转、点击反馈来自光标规则；本规则只拥有共生体。

配套规则速览：把蓝图拼装成可运行镜头

蓝图映射表中被反复引用的配套规则，各自在 rules/ 目录下有成文的 HTML/CSS/GSAP 配方。以下是与本蓝图关系最密切的几条要点：

discrete-text-sequence：行内改键与状态文本的驱动

行内改键（1xl→4xl→2xl）、hex 切换、标题翻转、代码流式填入，全都依赖 rules/discrete-text-sequence.md 的阈值状态数组模式：文本以稀疏 { t, text } 状态数组编写，每次 onUpdate 做一次反向搜索取最新已过期的条目渲染——显示在状态间硬跳、状态之间无动画，真实感来自调度形状：快按键簇（间隔 0.06–0.20s）、词间停顿（0.3–0.6s）、一个错字、退格剥回分叉点、一次批量粘贴。块状光标用时间线上的确定性正弦方波闪烁。关键约束：等宽字体、min-width 防右缘抖动、离散跳变必须瞬时、反向搜索每帧 O(n)（n ≤ 30 典型值）。

counting-dynamic-scale：读数计数的"数据感"

被拖拽的数值读数（0°→-10°、0→38 px）走 rules/counting-dynamic-scale.md 的代理模式：onUpdate 只写 textContent（Math.round(...)），绝不在每帧写 fontSize——最终字号是静态 CSS，只有 transform 在变。tabular-nums 强制等宽数字；计数器本身禁用 back.out/elastic.out（数据不过冲）。

摄像机三件套：viewport-change / multi-phase-camera / coordinate-target-zoom

蓝图的三种取景姿态分别落到三条摄像机规则：

• 单次连续拉远 → rules/viewport-change.md：单个 .world 包装层承载整个摄像机，translate(x,y) scale(S) 复合变换、单一 cam 状态对象 + 单一 applyCamera() 写入者；单包装层反平移公式为 T = -offset × S（与嵌套包装层的 T = -offset 不同，二者不可混用）。文档特别提到同一数学可扩展到 4–12× 向外拉远的工作区揭示：按最终 1× 布局搭建场景、以 cam.scale = 8 等放大比例开局，杜绝反向作者向（反向会把宽景落在模糊的缩小的栅格上）。
• 推近并返回（punch-and-return） → rules/multi-phase-camera.md：摄像机包裹整个场景，经 2–3 个离散相位（拉回/聚焦/推近）步进，叠加连续正弦微漂移（X/Y 频率比约 1.3 形成有机 Lissajous）。相位缩放 < 1 时 .scene 必须 overflow: hidden，背景放在 .scene 而非 .camera。
• 推近到非居中元素 → rules/coordinate-target-zoom.md：外层缩放、内层反平移，嵌套包装层公式 T = -offset（与 scale 无关）。偏移量必须在 setup 时测量一次（await document.fonts.ready 后 getBoundingClientRect）并烘焙，绝不在每帧重算；缩放到峰值时目标保持 ≤ 画布约 88%（headroom budget），否则中心误差被放大成裁切。

入场与状态互换：spring-pop-entrance 与 scale-swap-transition

下拉/菜单弹开、浮动工具栏弹起、提示气泡闪现都走 rules/spring-pop-entrance.md 的规范入场：fromTo 从 { scale: 0, opacity: 0 } 到 { scale: 1, opacity: 1 }、默认 power3.out 长尾落定、无过冲——back.out 只在刻意俏皮的例外中出现（OVERSHOOT ≤ ~2），否则即"Agent 生成视频的第一大劝退点"。代码块 CSS→SwiftUI 交叉淡变、成功图标翻转为绿色对勾则由 scale-swap-transition（同锚点状态互换）承接。

确定性约束：为什么共生体能在 HyperFrames 里"同一帧"兑现

panel-edit-live-sync 的"同一节拍"承诺在 HyperFrames 里不是修辞，而是由 hyperframes-core 的确定性渲染契约（Non-Negotiable Rules）保证的工程事实。汇总相关约束（详见 skills/hyperframes-animation/SKILL.md 的 Critical Constraints 与 hyperframes-core 技能）：

• 单条暂停时间线：所有补间注册在一条 GSAP 时间线上，data-duration 决定总长——control-target-sync 的"两个补间共用一个 label"正是这条时间线上的位置标注。
• 禁止非确定性时钟：无 Math.random / Date.now / performance.now、无 repeat: -1——这保证任意 seek 到任意时间点，共生体的两端都停在精确的同一状态。
• 预先计算的布局常量：绝不在补间时用 getBoundingClientRect() 推导位置——渲染器并行采样会导致失步；坐标在组合 setup 时算一次并复用（这正是 coordinate-target-zoom 烘焙偏移量的原因）。
• 空间运动只用 GSAP transform 别名（x / y / scale / rotation）——共生体的目标变换全部落在变换属性上，配合 tabular-nums + 固定宽度，两端同帧变化而画面不抖动。
• onUpdate 保持 O(1)：只写文本、不做 DOM 创建、用 last-state 守卫——在并行采样的渲染器里，每帧 DOM 写入是抖动与闪烁的来源。
• 入场的 from 态显式写出（fromTo），绝不依赖 CSS 隐藏起点——否则 seek 到 t=0 时元素在补间接管前可见一帧。

在这个契约下，"一个手势、两个表面、同一帧"是数学锁步而非视觉巧合，这也正是 panel-edit-live-sync 与 cursor-ui-demo 在剪辑层面判然两分的底层原因。

相关资源

• 蓝图本体：skills/hyperframes-animation/blueprints/panel-edit-live-sync.md
• 蓝图总览与角色菜单：skills/hyperframes-animation/blueprints-index.md
• 核心引擎规则：skills/hyperframes-animation/rules/control-target-sync.md
• 配套规则：rules/discrete-text-sequence.md、rules/counting-dynamic-scale.md、rules/spring-pop-entrance.md、rules/dynamic-content-sequencing.md
• 摄像机三件套：rules/viewport-change.md、rules/multi-phase-camera.md、rules/coordinate-target-zoom.md
• 技能入口与运行时可选项：skills/hyperframes-animation/SKILL.md