OpenMontage HyperFrames logo-assemble-lockup 蓝图解析：从 logo 自动装配到 Lockup 收束的镜头级动画设计

本文面向需要在视频分镜帧中落地"品牌标志自行组装并收束为中心 Logo 组合"这一类镜头的动效工程师、AI Agent 与创作研究者。你将以本仓库 hyperframes-animation 技能 中的 logo-assemble-lockup 蓝图（blueprint）为核心，掌握它服务于 Product_Intro / CTA / Brand_Outro 三类叙事的四种形态、三段式时码骨架、完整运动词汇与"运动动词 → 原子规则"映射表，并学会调用 blueprints-index.md 与 rules/ 目录中的原子规则，把该蓝图真正编排进一条暂停式（paused）、确定性（deterministic）的 HyperFrames 时间线。

蓝图在 HyperFrames 技能体系中的定位

hyperframes-animation 把全部动效知识组织为五层：rules（原子动效配方）、blueprints（多阶段镜头模板）、transitions（场景间转场）、techniques（宏观动效技法）与 adapters（按运行时封装的 API）。技能默认的创作路径是"从 rules-index.md 挑选 2–4 个原子规则，用一条暂停的 GSAP 时间线组合"，而当镜头恰好命中某个预先设计好的多相位模板时，则加载蓝图以获得可运行的、覆盖整段镜头的编排结构。

从 blueprints-index.md 的定义看，blueprint 是"产品无关（product-agnostic）、按时码编码（time-coded）的镜头模板"——即 Scene N (a–b s): … 形式的骨架，内部填充 [slots] 占位符，并带有一个具名的 signature move（签名动作）。该体系宣称反推自 50 支黄金产品发布片，并对 13 支 hyperframes 蓝图做了同格式的逆向转写。关键设计哲学是：揭示动作（reveal）是随旁白逐拍（beat）铺开的，而不是在 t=0 一次性倾倒——按模板实例化结构，能让内容在整个镜头时长内持续到达而非凝固。在分镜编排的第 4 步（视觉设计）中，每个 frame 都要实例化一个蓝图（不匹配时再从运动词汇中自由组合），而 logo-assemble-lockup 蓝图正是 Product_Intro / CTA / Brand_Outro 三个角色分镜的候选形状。

logo-assemble-lockup 全库共 15 个蓝图中属于"品牌收束"路线的代表，其余可对照 blueprints-index.md 中的 kinetic-type-beats、typewriter-reveal、ticker-takeover、cta-morph-press 等同属品牌/CTA 类模板。与它最接近的 cta-morph-press 相比，后者的形状是"标识在同一个中心凝聚成更亮的 CTA 后用光标点击"，而 logo-assemble-lockup 则是多部分的自组装过程 + 一个决定性的运镜收尾，粒度更大、层次更完整。

适用角色与时长范围

按 logo-assemble-lockup.md 的 roles 声明，该蓝图服务三种叙事角色：

角色	来源叙事形态	一句话形状
Product_Intro	product-intro-logo-system-assemble	无台词的顶级品牌 STING：元素系统脉冲/生长/环绕，围绕一枚固定的中心 Logo 组装，配一次电影感俯仰运镜，无文案、无 UI
Product_Intro	brand-reveal-assemble-zoom	先上下文后聚焦：陪衬标语逐字打出建立语境 → 主标识在旁边弹出 → 陪衬退场、版式居中 → 镜头推近定格在主标识特写
CTA	cta-camera-push-lockup	Logo 组装是最终请求的引子：3D 标识组装 + 字标级联，然后镜头高速穿过标识的负空间，巨型 CTA 字母掠过镜头，收束在 [url] / [CTA verb] lockup
CTA	cta-button-wordmark-build	"描边自绘 → 字标逐字构建"子形状：CTA 按钮药丸描出发光边框，斜向条带 WIPE 翻场，字标在斜线旁逐字打入落定 lockup，相机静止
Brand_Outro	brand-outro-assemble-logo-lockup	收尾标识：功能药丸/UI 元素方阵从四边清场，空场上 Logo 逐笔描出自绘、字标揭示补全 lockup，随后淡出

时长跨度：约 4.6–11.0s。其中 Brand_Outro 约 4.6s、brand-reveal 约 5s、Product_Intro 约 7s、CTA 5.4–11.0s。这与 blueprints-index.md 登记的角色-时长（roles="Product_Intro, CTA, Brand_Outro" duration="4.6–11s"）一致。

统一时间轴骨架：Scene 1 → 2 → 3

该蓝图给出的是一份合并的单一时码模板，内部 [slots] 产品无关、可被任意品牌替换。整段镜头约 4.6–11s，分为三幕：

• Scene 1 — clear / ignite（0.0–约 1.0s）：为标识将要"组装进去"清空舞台；
• Scene 2 — assemble the mark（约 1.0s–Ys）：标识从部件中自组装；
• Scene 3 — resolve to lockup（Ys–结束）：lockup 完成并定格（Product_Intro / Brand_Outro），或被飞越/延展到 CTA（两个 CTA 变体）。

三种"构建中"的物理主体被区分得很清楚：element 组装/轨道环绕（Product_Intro）、3D 标识分件装配（CTA push）与描边自绘（Brand_Outro、CTA button-build 的按钮描边），落到场景编排查，Scene 1 甚至预置了"逐字母字标构建"（CTA button-build）。

Scene 1 — clear / ignite

舞台先被"清空"，为标识的组装腾出焦点，四种变体各走一条清场路径：

• Product_Intro：开场是干净的 [浅色背景] + 俯视视角下微弱的同心引导环；圆环从中心脉冲扩张；半拍处背景从浅色交叉淡化（crossfade）到 [深色渐变：主色→辅色]，环上出现微小的种子点，中央 [logo mark] 的辉光点燃（IGNITE）——标识从 t=0 即存在、正面朝前、固定不动。
• CTA push：在 [背景渐变] 上，[logo mark] 正在对象空间中安顿（一个带细线框边缘引导 + 中央后方微弱支架母题的 3D 标识）；镜头可能已开始极慢的持续推进。
• CTA button-build：在 [深色网格背景] 上，一个圆角 [CTA button "label"] 药丸升起/缩放入场（此前标题从上缘清场）；其细边框作为动画发光描边逐笔绘制（DRAWS ON），左缘带一个小 [accent] 彗星/火花图标。
• Brand_Outro：一个预先排布的 [功能药丸 / 元素网格] 方阵（每个含 [icon]+[label]）四散（DISPERSES）——元素从排布位滑向四边并飞出画面（边缘清扫式漂移，非中心起源的爆发），在干净的 [背景] 上把画面腾空。

注意骨架注释强调：四散清场用的是飞出所有四条画框边缘的构图，避免中心指向性爆发把视线重新拉回中央。

Scene 2 — assemble the mark

标识在约 1.0s 起开始"自组装"：

• Product_Intro：种子点放大（SCALE UP）为布置在圆环上的平面 [accent] 形状；同心环带向外涟漪（隧道感），形状开始围绕仍然固定的中心轨道环绕/漂移。
• CTA push：[wordmark] 从标识后方**级联（CASCADES）**涌出（字母自左向右带过冲 overshoot）进入完整 [brand lockup]；3D 标识可分拍装配（一个终端件脱开并以弹簧点弹出、一个部件铰链式开合咬合等弹性动作）。可选节拍：[cursor] 弧线划入并"点击"字标，或承载中间 [CTA line] 的磨砂玻璃药丸弹入、多层标识外壳扇形散向边缘。
• CTA button-build：一次图形化 WIPE 把画面翻到 [对比色背景]——一条细 [accent] 斜线扫入、膨胀为全幅斜向条带 BAND、再塌缩成一个小 [accent] 斜杠。
• Brand_Outro：在已清空的画面上，[logo mark] 通过描边逐段自绘（DRAWS ON）（逐弧段 / 逐分段构建）。

Scene 3 — resolve to lockup

收束时刻，也是决定"product/product 叙事是否延伸成 CTA"的分岔点：

• Product_Intro（唯一的运镜）：整个系统从俯视平铺平滑倾斜（TILT）为斜向等轴透视（ease-in-out，并带轻微拉远 zoom-out）——平面形状变为发光的 3D 形体、条带变为发光轨道线，而中央 [logo mark] 不倾斜（保持 2D、正面、固定）。相机缓停；元素保持连续轨道/漂移（内环快于外环）；标识辉光稳定。最终定格帧。
• CTA push（签名动作）：单次快速相机**推穿（PUSH-THROUGH）**标识的负空间 / 穿过玻璃药丸——重水平运动模糊、巨型 [CTA] 字母掠过镜头（光标退出）。收束到饱和 [背景] 上的最终 lockup：[url badge] / [CTA line] 由一条自左向右、带 [accent] 发光前缘的 WIPE（或干脆淡入）揭示，实体标识形状在其后做视差滑入。静帧稳定（慢速拉远/沉降）。
• CTA button-build：[wordmark] 在新背景上于斜杠右侧逐字母构建（letter-by-letter），落定中心的"[slash] [WORDMARK]"lockup，慢速沉降到静止。
• Brand_Outro：[wordmark] 在已绘制的标识旁揭示（滑动/淡入）补全 [lockup]；lockup 定格后淡出到 [black / bg]。

运动词汇表（motion vocabulary）

蓝图把以上所有节拍提炼为一张可复用的运动词汇表，供不匹配既有蓝图时自由组合（完整继承自原文档）：

环脉冲/扩张；背景交叉淡化（浅→深）；辉光点燃；种子点放大；连续轨道/漂移（内环快于外环）；单次 3D 透视倾斜（平铺→等轴）+ 绕固定 2D 锚点的轻微拉远；3D 标识组装（部件脱开 + 弹簧点、场记板铰链开合/咬合、外壳扇形散开）；带过冲的字标级联（字母自左向右）；按钮药丸升起/缩放入场；动画描边轮廓绘制 + 辉光（按钮边框与 Logo 标识皆用）；彗星/火花点缀；斜向条带 WIPE（扫入 → 膨胀 → 塌缩为斜杠）；逐字母字标构建；预排网格四边清场四散；标识描边自绘（顺序弧段/分段）；带运动模糊的快速相机推穿（CTA 脊柱）；持续慢速推进/拉远；光标弧线划入 + 点击；视差形状滑入；带发光前缘的自左向右 URL/badge WIPE；静态/淡出式的末端 lockup 定格；可选的在定格标识上的静止呼吸（idle breathe）。

词汇中反复出现的两个"刻意无动作"值得注意：固定不动的 2D 锚点 Logo，以及终端静态/淡出定格——蓝图明确它们是"有意的运动的缺席"（宇宙绕它动，它不动），不是规则缺口，不需要硬套 motion rule。

规则映射：运动动词 → 原子规则

blueprint 的最后一栏把每个运动动词映射到 rules/<id>.md 下的原子规则，这是从蓝图走向实现的桥梁。完整映射如下（规则路径均相对本技能目录，正文中已转为仓库根路径）：

运动动词	规则（仓库相对路径）	实现要点
中心环脉冲/扩张	center-outward-expansion	自共享中心辐射，复用 0→1 进度驱动器
背景 crossfade（浅→深渐变）	gsap-effects	纯 opacity/背景 tween，无需专门规则
标识辉光点燃	asr-keyword-glow	品牌元素上由包络驱动的辉光（attack-decay-rest）
种子点放大成形状	spring-pop-entrance	scale-in pop；点变形为形状时改用 scale-swap-transition
绕固定中心连续轨道/漂移	orbit-3d-entry	flip-in 后进入连续椭圆轨道；中心标签 = 固定标识
单次 3D 透视倾斜 + 轻微拉远	multi-phase-camera + CSS-3D	拉远走场景相机缩放相位；平铺→等轴的整体平面倾斜是 CSS-3D rotateX 技法，无精确相机规则，以 orbit-3d-entry 的"Tilted orbit plane"随时间动画近似
固定 2D 锚点 Logo 于运动宇宙中	无需 motion rule	静态锚点 = 有意的无运动
3D 组装——部件脱开 + 弹簧点	spring-pop-entrance	弹簧 pop，back.out 过冲
3D 组装——铰链开合/咬合（场记板）	hacker-flip-3d + CSS-3D	3D 旋转轴；弹性开合咬合是 3D-rotate 的改编
3D 组装——外壳扇形散向边缘	center-outward-expansion	从标识中心向外运行
字标级联 + 过冲（字母自左向右）	gsap-effects + spring-pop-entrance	逐元素交错滑入 + 每字母 back.out 过冲
按钮药丸升起/缩放入场	spring-pop-entrance	scale-in；备选 scale-swap-transition
描边自绘 + 辉光（按钮边框）	svg-path-draw + asr-keyword-glow	stroke-dashoffset 绘制 + 绘制描边上的辉光
按钮上彗星/火花点缀	asr-keyword-glow + techniques.md	小辉光点缀；运动路径走 MotionPathPlugin（techniques #9）
斜向条带 WIPE	techniques.md	clip-path 揭示（#12：动画化全画面 polygon(...) 对角线；膨胀-塌缩为斜杠 = 同一 clip-path 走 grow→shrink 关键帧）
逐字母字标构建	discrete-text-sequence + gsap-effects	smooth-slice/逐状态构建；打字机/追加词配方
预排网格四边清场四散	非规则缺口	飞出画框是 EXIT，管线禁止镜头中途退出——harness 转场才是出口（仅终帧可离场）。作为场景内 reveal-the-mark 清场时复用 center-outward-expansion 向外运行（center→target 机制插值到屏外目标，out-ease）
Logo 描边自绘（顺序弧段/分段）	svg-path-draw	典型的多段交错绘制
已绘标识旁字标滑入/淡入揭示	svg-path-draw + spring-pop-entrance	svg-path-draw 的 "brand-line 描边后淡入"尾段；滑动用 spring-pop-entrance
快速相机推穿 + 运动模糊	multi-phase-camera + motion-blur-streak	硬推相位；重速度模糊条带 = 推穿方向的定向速度模糊
持续慢速推入/拉远	multi-phase-camera	相位缩放 + 漂移
光标弧线划入 + 点击字标	cursor-click-ripple + techniques.md	move → click → ripple；弧线路径用 MotionPathPlugin（#9）
lockup 后视差形状滑入	depth-scatter-assemble + 3d-text-depth-layers	不同深度视差滑入；深度排序交给 3d-text-depth-layers
自左向右 URL/badge WIPE + 发光前缘	techniques.md + asr-keyword-glow	clip-path inset() 自左向右（#12）；发光前缘走 asr-keyword-glow
静态/淡出末端 lockup 定格	无需 motion rule	终端定格/透明度淡出，有意为之
定格标识可选静止呼吸	sine-wave-loop	沉降后的呼吸

这套映射体现了规则的"职责分离"：SVG 描边只画线、辉光只发光、弹入只负责入场缩放、clip-path 只做遮罩揭示——一个节拍常常由 2–4 个规则在同一暂停时间线上组合而成，与 rules-index.md 的默认创作路径一致。

相机修饰（camera modifier）：决定性的两次运镜

蓝图对运镜单独设节，强调两次"决定性"镜头移动背后的规则归属与近似处理，这是全库最能体现"规则边界"的设计决策：

CTA 推穿（CTA 脊柱）——场景包裹相机上的一次脚本化硬缩放相位，对应 multi-phase-camera 的 "Steady push / Bookend pull" 模式，push 相位就是高潮。当标识偏离画面中心、相机必须飞过特定负空间点，需要叠加 coordinate-target-zoom（外层放大、内层反向平移，使目标负空间点在 scale 爬升时恰好落到视口中心；偏移量在 setup 时测量）。签名性的重水平运动模糊用 motion-blur-streak（推送方向的定向速度模糊），在推窗内以 CSS filter: blur() 或复制拖尾层实现。

Product_Intro 倾斜（唯一的电影感移动）——平铺→等轴透视倾斜 + 轻微拉远是一次脚本化相机节拍：拉远部分走 multi-phase-camera（缩放相位 + "Targeted zoom into off-center element"/漂移机制）。关键约束是：multi-phase-camera 只会 scale+translate+drift，因此整幅舞台的透视平面 rotateX（平铺俯视 → 斜向等轴）不属于任何相机规则的能力范围，应视为 CSS-3D 技法（techniques.md 的 CSS 3D Transforms，动画舞台的 rotateX），最接近的参考是 orbit-3d-entry 的 "Tilted orbit plane" 变体随时间动画。

这条边界给了实作者一个明确决策：需要缩放 → 调 multi-phase-camera；需要平面三维倾斜 → 直接写 CSS-3D rotateX，不要硬套相机规则。

底层约束：暂停时间线与确定性契约

虽然本蓝图文件不重复展开运行契约，但技能 SKILL.md 的 Critical Constraints 指出其依赖 hyperframes-core 的不可谈判规则，任何实例化都必须遵守（这也解释了蓝图中反复出现的"确定性、无 Math.random"措辞）：

• 单条暂停时间线：gsap.timeline({ paused: true })，按 data-duration 决定时长；
• 禁止 Math.random / Date.now / performance.now：交错与倾斜一律由索引派生，保证每次 seek 渲染出逐帧一致的结果；
• 禁止 repeat: -1 与无限循环：定格后的"呼吸"交给 sine-wave-loop 的有限或有界形式；
• 入场用 fromTo：把 { scale: 0, opacity: 0 } 的起点显式写进 from 对象，使 seek 回 t=0 时元素恰好处于折叠态（见 spring-pop-entrance 的说明）；
• 只走 GSAP transform 别名（x/y/scale/rotation），布局变化禁用 width/height/top/left；tween 时刻不要从 getBoundingClientRect() 现量坐标，需在 setup 阶段预计算布局常量（参考 SKILL.md）。

就运行时而言，技能默认 GSAP 承载约 95% 的动效工作；同一组合内也可并存 Lottie、Three.js、CSS keyframes、WAAPI 等运行时，但各实例需注册在各自的全局上，供 HyperFrames 单遍 seek。

一个可运行的真实对照：brand-reveal-assemble-zoom

该蓝图 Product_Intro 的 brand-reveal-assemble-zoom 变体（陪衬标语逐字打出 → 主标识弹出 → 陪衬退出并居中 → 镜头推近特写），在 examples/brand-reveal-assemble-zoom.html 中有完整可运行的 HTML 落地方案。其文件头注释给出了 5 秒、5 相位的编排：

0.00 – 0.67s   "Just use" 以离散序列组装（带 hold）
0.73 – 1.23s   粉色 Logo 以 back.out 弹性弹入
1.50 – 2.20s   "Just use" 左滑 + 淡出；容器围绕品牌重新居中
2.67 – 3.57s   相机 5.5× 推入 Logo（scale + 反向平移）
3.67 – 5.00s   Logo 呼吸（sine onUpdate，乘性叠加在 pop scale 上）

它同时示范了本蓝图涉及的多个工程要点：单条暂停时间线注册到 window.__timelines["main"]；document.fonts.ready 后再用 getBoundingClientRect() 实测文案宽度、用实测值而非估算推出 HERO_FINAL_OFFSET_X；呼吸采用 onUpdate 乘性形式叠加在 pop scale 上而不是 fromTo + yoyo（避免覆盖 pop 值）；布局用**三层嵌套 transform（zoom-scale → zoom-translate → recenter-shift）**承载"推近 + 反向平移 + 重居中"；Logo 以静态 PNG 资产加载。这段 5s 代码恰好是 multi-phase-camera（推近缩放 + 漂移）、spring-pop-entrance（pop）与 sine-wave-loop（呼吸）三个规则在单条时间线上组合的最小闭环。

实例化姿势与延伸阅读

从 blueprints-index.md 的 picking guidance 看，实例化蓝图分四步：(1) 在角色菜单中按 frame 的 role 找到候选；(2) 打开对应 blueprints/<id>.md 读取时码模板、[slots] 与签名动作；(3) 选择姿势——Reproduce（slots 干净映射）、Adapt（结构可用但内容/表面不同，保留签名动作）或 Compose（无匹配则从运动词汇构建，仍需按 VO 逐拍铺揭示）；(4) 若菜单确实不匹配 beat，宁可自由组合也不要硬套错误蓝图。

本蓝图在 blueprints-index.md 角色菜单中对应的触发器分别是：Product_Intro 的 "wordless premium brand sting（元素脉冲/环绕并围绕标识组装）"、CTA 的 "logo build → 相机推穿到最终 URL/CTA verb"、Brand_Outro 的 "feature/UI 元素清场后 lockup 自绘"。写作时若镜头命中这些节拍，即可按本蓝图的三幕骨架 + 规则映射装配，并用技能自带脚本 animation-map.mjs 审计整条编排（死区、交错一致性、生命周期告警）。对照阅读 rules-index.md（全部原子规则目录）、techniques.md（clip-path 揭示 #12、MotionPathPlugin #9、CSS-3D #3 等技法出处）与 blueprints-index.md（角色 → 蓝图菜单），即可把这张"品牌自组装"镜头从模板落实为确定性的可渲染时间线。