HyperFrames 网格/卡片组装蓝图详解用交错级联制造一览无余的产品叙事镜头【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontagegrid-card-assemble 是 OpenMontage 仓库 hyperframes-animation 动画技能库中的核心蓝图之一。它以N 个元素磁贴 / 卡片 / Logo / 清单行以交错的瀑布式级联依次自行组装进网格或纵列清单并保持为骨架服务产品短视频里三个高频叙事角色——关键特性Key_Feature、收益清单Benefits与社会证明Social_Proof。阅读本篇后你将掌握该蓝图的时间编码三幕结构、四类变体的取舍、动作词汇表与底层原子规则rules的映射关系以及如何规避其唯一的合并张力merge tension在实际 HyperFrames 合成中把一屏展示广度做成一个有呼吸、有节奏、可确定deterministic的镜头。蓝图在 HyperFrames 技能体系中的定位在 hyperframes-animation 中动画知识被组织为四层rules原子运动配方、blueprints多阶段镜头模板、transitions场景间转场与adapters各运行时 API。蓝图层的行为契约由 blueprints-index.md 定义蓝图是与产品无关、带时间编码的镜头模板——Scene N (a–b s): …含[slots]占位与一个具名的标志性动作signature move整个镜头跨全时长编码揭秘节奏对齐口播行而非在 t0 倾倒内容。grid-card-assemble 是其中第 6 个蓝图id列明其服务角色为Key_Feature, Benefits, Social_Proof时长3.0–10.5s。它同时是折叠 4 份草稿的蓝图——从源码文件末尾的声明BLUEPRINT: grid-card-assemble — serves Key_Feature, Benefits, Social_Proof (folded 4 drafts)可以看出它把四个曾经独立的草稿key-feature-card-grid-assemble、key-feature-glass-card-camera-reveal、benefits-vertical-list、social-proof-logo-grid-zoom-out归一到一个时间模板之下。适用角色与时长预算蓝图定义的使用窗口是按叙事角色拆分的角色变体来源时长窗口结构特征Key_Featurekey-feature-card-grid-assemble5.8–7.3s2 列砖式 / 3×3 网格图标标签磁贴逐项级联随后近静态保持 缓慢推近Key_Featurekey-feature-glass-card-camera-reveal6.5s相机变体特写发光图标后拉玻璃卡片从图标背后长出Benefitsbenefits-vertical-list6.5–10.5s约 1 item/sec 随条数伸缩单列收益清单逐条累积或 Slot-machine 换槽Social_Proofsocial-proof-logo-grid-zoom-out3.0–6sLogo 墙居中成阵持续后拉缩景展示生态在 blueprints-index.md 的角色菜单里本蓝图出现的触发条件是展示大量标注特性磁贴/胶囊网格自行组装Key_Feature、纵向收益清单累积或换槽Benefits、Logo 墙建起后拉远揭示广阔生态Social_Proof。该索引也强调菜单是软约束剧本真实优先若某个节拍与模板形状不符宁可基于动作词汇自由组合compose也不强行套用。三幕镜头结构统一模板蓝图正文给出的是合并模板——具体运动动词 [slots]而不是四份互不相干的实现。任何变体都可落到这三幕Scene 10.0–约 1.0s——开场 首批进场在[渐变 / 放射 / 深色背景]可选[点阵网格 / 漂浮水印]纹理上先建立空的[网格或清单区域]随后条目以快速交错级联间隙约 0.04–0.08s清单节奏约 1 item/sec开始组装。每个[条目特性磁贴 / 胶囊 / Logo 磁贴 / 收益行]以淡入 短程滑入/缩放直接落进自己的槽位——低戏剧性无散花、无大弹跳弹簧超调保留给强调标记使用。相机静止。开场[标题 / 钩子]可在阵列上方逐行填充任何[证明数字]以[强调渐变]计数上涨。Scene 2约 1.0s–Xs——阵列成形并保持剩余条目抵达布局解析为最终形态[2 列砖式 / 3×3 网格 / 密集马赛克 / 堆叠清单]。完整阵列保持——活着但静息磁贴上做轻微持续的视差 / 正弦浮游或做缓慢相机推近微弱放大。可选[强调色]辉光在磁贴表面/背后行进扫过。Scene 3Xs–结束——稳定 / 揭示 / 退场一切稳定保持到结束或执行可选的相机修饰见下文或由[收尾行 / CTA]为阵列画上句号。结构上贯穿的原则是内容持续抵达而非 t0 倾泻——每一幕都承担叙事递进这正是蓝图与一次性动画脚本的分水岭。四类变体详解统一模板之下四类角色分叉各有微调。写作/实拍时以哪个槽位承担哪一角色来区分变体 A — Key_Feature 网格feature-tile grid条目为标注[图标 特性标签]的磁贴/胶囊组装进 2 列砖式或 3×3 网格近静态保持 缓慢推近 可选行进辉光扫掠标题书挡[hook] → [CTA]。无相机揭示靠元素级动画驱动。变体 B — Key_Feature 玻璃卡片相机揭示glass-card camera-reveal组装由相机驱动而非元素交错。开场特写 2–3 个发光图标相机后拉让 N 张玻璃卡片从图标背后生长出来图标缩小约 50% 变成卡片标题[中心卡片]放大约 105% 并前移、以快速弹簧与两侧交叠卡片并排保持、持续视差浮游退场 快速运动模糊横扫把卡片滑出画外。变体 C — Benefits 纵列清单benefits vertical-list单一纵列[收益行]堆栈约 1 item/sec两种子模式(a)BUILD每行始终全亮入场 [标记]弹簧弹出 [勾选/图标]描画 [胶囊]对文本做遮罩擦除(b)SNAP整个堆栈每拍上移一槽约 0.1s 缓动最新一行落入高亮焦点槽离开的行按位置渐暗dim-by-position。静态相机可选对侧永久[装饰性轨道/圆盘]。无相机揭示。变体 D — Social_Proof Logo 墙后拉缩景logo-wall zoom-out开场节拍[trusted-by 标题]卡片或[产品截图]交叉淡化/剪切到居中的 Logo 网格并构建整体入场 / 随机弹入 / 按列上滑随后持续相机后拉把整个网格向中心缩小以揭示广阔生态并保持可选固定 HUD/取景器括架可选退场 整个网格上滑飞出画顶。动作词汇表镜头可用的字母表蓝图把本镜头可能出现的每一个动作都显式列成词汇表方便在套蓝图不合身时按词汇自由组合。核心动词包括条目交错组装淡入 短程滑入/缩放进槽· 砖式/网格/清单布局解析 · 随机化弹入 · 按列上滑 · 纵列换槽Slot-machine 吸附并保持· 弹簧超调标记弹出 · 勾选/图标描画 · 胶囊/标签遮罩擦除揭示 · 按位置渐暗弱化 · 标题逐行填充 · 强调渐变数字计数上涨 · 近静态保持 · 保持期轻微视差/正弦浮游 · 缓慢相机推近 · 相机后拉揭示连续或分段回拉· 卡片从图标背后生长 · 图标缩为标题 · 中心卡片放大并前向交叠弹簧· 行进辉光扫掠 · 固定 HUD/取景器括架 · 运动模糊滑出横扫退场· 网格上滑飞出退场· 书挡标题淡入 · 永久装饰轨道/循环。规则映射把动作动词落到原子配方蓝图的精髓在于每个动作动词都映射到一个rule-id——在 rules-index.md 中每个规则文件都自带 HTML/CSS/GSAP 完整配方与取值范围。完整映射如下动作动词规则rule-id在规则库中的落点条目交错组装进槽 / 砖式-网格-清单布局解析center-outward-expansion逐条交错 短程滑入变体目标位 最终布局槽位center-outward-expansion.md随机化弹入交错gsap-effectsstagger 配方随机from/顺序gsap-effects.md按列滑入网格gsap-effects逐列交错上滑同上纵列换槽 / Slot-machine 吸附保持vertical-spring-tickerSTEPS 行进行数vertical-spring-ticker.md弹簧超调标记弹出spring-pop-entranceback.out 弹簧gsap-effects交错弹链spring-pop-entrance.md标记内勾选/图标描画svg-path-drawsvg-path-draw.md磁贴内线稿图标内部部件动起来svg-icon-enrichmentsvg-icon-enrichment.md胶囊/标签遮罩擦除文本揭示techniques.mdclip-path revealtechniques.md按位置渐暗弱化gsap-effects按槽位做逐行 opacity无专用规则见 gsap-effects.md标题逐行填充discrete-text-sequencediscrete-text-sequence.md强调渐变证明数字计数上涨counting-dynamic-scalecounting-dynamic-scale.md保持期轻微视差/正弦浮游sine-wave-loop保持的网格需套用并发元素振幅 /√N 规则sine-wave-loop.md缓慢相机推近multi-phase-camerasteady-push 相位模式multi-phase-camera.md中心卡片放大 前向交叠spring-pop-entrance快速弹簧techniques.md的 CSS-3Dz 深度交叠spring-pop-entrance.md卡片从图标背后生长 / 图标缩为标题由相机揭示驱动multi-phase-camera——grow/shrink 是与回拉相位和弦的 scale tween无独立规则见 multi-phase-camera.md固定 HUD/取景器括架ai-tracking-box静态括架变体——叠加画框非跟踪ai-tracking-box.md书挡标题淡入discrete-text-sequence或gsap-effects淡入见上永久装饰轨道/圆盘/循环sine-wave-loop若为轨道徽章环则orbit-3d-entrysine-wave-loop.md磁贴表面/背后行进辉光扫掠ambient-glow-bloom单遍行进辉光横扫ambient-glow-bloom.md运动模糊滑出横扫玻璃卡片退场motion-blur-streak高速横扫带方向性速度模糊携带卡片出画motion-blur-streak.md网格上滑飞出退场gsap-effects普通交错 translate 出画属基础退场 tween非缺失能力见 gsap-effects.md蓝图末尾的RULE GAPS声明是显式给出的RULE GAPS: none——即本镜头需要的全部动作都有规则覆盖旅行辉光、滑出横扫与网格飞退分别落到 ambient-glow-bloom、motion-blur-streak 与 gsap-effects无需任何新规则即可完整实现。相机修饰zoom-OUT 揭示变体 B 与 D 的标志动作zoom-OUT 揭示是本蓝图定义角色的关键动作可选的相机包裹层在保持期整体缩小揭示已组装的网格/卡片坐落于更大环境之中生态规模或一行卡片从特写图标展开。两种实现路径按节奏类型区分连续单遍后拉Social_Proof 生态回拉→viewport-change单个包裹层通过onUpdate让cam.scale递减保持单一事实来源single source of truth。该规则的实现要点是单.world包裹层上的组合变换translate(x,y) scale(S)且反平移公式为T -offset × S。分段回拉 → 聚焦 → 稳定带内建漂移Key_Feature 特写图标 → 卡片展开→multi-phase-camera使用其 Dramatic reveal: push → neutral → pull / 回拉相位模式卡片的 grow/shrink 与回拉相位和弦同一进度、同一缓动视觉上是一个拍子。该规则把相机实现为一个包裹div其transform: scale() translate(x,y)由相位 scale在触发时刻逐级推进 正弦微漂移小振幅、慢频率叠加到相位变换上双驱动且都跑在 GSAP timeline 内从而能被 HyperFrames 逐帧确定性地 seek。唯一的合并张力center-outward-expansion 的密度上限蓝图把已知的唯一冲突merge tension显式标注出来这是最有工程价值的一段。默认的 stagger-assemble 天然对应center-outward-expansion元素从中心向目标位展开。查其规则正文可看到硬性取值范围条目数 3–88 会在中心处中段飞行的交叠造成视觉混乱stagger 间隙应在 0.04–0.08s太紧 同时和弦无法分离、太松 慵懒琶音且ITEM_COUNT × STAGGER EXPAND_DUR否则尾项未落稳会显毛糙缓动应使用 out 系power3.out默认、power2.out温和、expo.out戏剧性急停杜绝in缓动。但 Social_Proof 的 Logo 墙是刻意稠密的12 磁贴超出该规则的安全上限。因此该变体不得让元素从共享中心爆发而是让每项滑行短距离直接进入自己的槽位——即该规则标注的 starting partially-spread / short-path 形态或改用gsap-effects做逐项交错。这也正是统一模板 Scene 1 动词已写明的 short distance directly into its slot。换言之变体 A/C 可享受中心展开的自然戏剧性变体 D 必须降级为直入槽位的短程滑入。落地要点把蓝图实例化到 HyperFrames 合成中结合 SKILL.md 中的运行时与约束约定实例化该蓝图时有四条硬性纪律先选规则而非蓝图skill 的默认路径是先挑 2–4 个原子规则、用一条暂停的 GSAP timeline 粘合只有当镜头确实匹配现有 4–5 阶段编排模板本蓝图正是其一且复用能省时间时才读蓝图。选定后按 blueprints-index.md 的 Picking guidance先定帧角色 → 打开blueprints/id.md读时间编码模板、[slots]与标志动作 → 选姿势Reproduce / Adapt / Compose内容换皮时保留标志动作→ 若菜单不合身则从动作词汇自由组合并仍按 VO 跨镜头铺揭示节奏。遵守核心契约单一暂停 timeline、data-duration决定长度、无Math.random/Date.now/performance.now、无repeat: -1、不得对后续场景剪辑用gsap.set、不在async/setTimeout/Promise内构建 timeline详见 hyperframes-core。动画工艺层面的两条追加布局常量预计算——绝不在 tween 时用getBoundingClientRect()推导位置并行采样会失步空间运动只用 GSAP transform 别名x/y/scale/rotation永不 tweenwidth/height/top/left。可审计成帧后用仓库内的分析脚本核查编排——node .agents/skills/hyperframes-animation/scripts/animation-map.mjs composition-dir --out composition-dir/.hyperframes/anim-map会读取注册在window.__timelines上的每条 GSAP timeline、枚举 tween、采样 bbox 并输出animation-map.json用于发现死区、交错一致性与生命周期告警也可用 hyperframes-cli 的lint做进一步校验。选型速查与延伸阅读想让某个节拍一次枚举广度关键特性网格 / 累积收益清单 / Logo 墙→ 直接命中本蓝图。想要静态近保持、文字本身在变的工作马镜头 → 改选kinetic-type-beats想要它连接一切 / 一中心多环绕 →constellation-hub想要一两条收益 单一克制的揭示动作 →titlecard-reveal三者与 grid-card-assemble 相邻均可从 blueprints-index.md 的角色菜单横向比较触发条件。本蓝图的完整原文与全部细节见 grid-card-assemble.md原子配方浏览 rules-index.md运行时路由与约束总纲见 SKILL.md 及 hyperframes-core。一句话总结这条蓝图的使用心智组装永远让元素走短程直入槽位或受控的中心展开、保持期永远别让画面冻结浮游/推近/辉光三选一、要更大图景就让相机而不是元素去揭示——网格/卡片组装的价值不在花哨而在一屏数尽的秩序感与节奏感。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames 网格/卡片组装蓝图详解：用交错级联制造“一览无余“的产品叙事镜头
HyperFrames 网格/卡片组装蓝图详解用交错级联制造一览无余的产品叙事镜头【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontagegrid-card-assemble 是 OpenMontage 仓库 hyperframes-animation 动画技能库中的核心蓝图之一。它以N 个元素磁贴 / 卡片 / Logo / 清单行以交错的瀑布式级联依次自行组装进网格或纵列清单并保持为骨架服务产品短视频里三个高频叙事角色——关键特性Key_Feature、收益清单Benefits与社会证明Social_Proof。阅读本篇后你将掌握该蓝图的时间编码三幕结构、四类变体的取舍、动作词汇表与底层原子规则rules的映射关系以及如何规避其唯一的合并张力merge tension在实际 HyperFrames 合成中把一屏展示广度做成一个有呼吸、有节奏、可确定deterministic的镜头。蓝图在 HyperFrames 技能体系中的定位在 hyperframes-animation 中动画知识被组织为四层rules原子运动配方、blueprints多阶段镜头模板、transitions场景间转场与adapters各运行时 API。蓝图层的行为契约由 blueprints-index.md 定义蓝图是与产品无关、带时间编码的镜头模板——Scene N (a–b s): …含[slots]占位与一个具名的标志性动作signature move整个镜头跨全时长编码揭秘节奏对齐口播行而非在 t0 倾倒内容。grid-card-assemble 是其中第 6 个蓝图id列明其服务角色为Key_Feature, Benefits, Social_Proof时长3.0–10.5s。它同时是折叠 4 份草稿的蓝图——从源码文件末尾的声明BLUEPRINT: grid-card-assemble — serves Key_Feature, Benefits, Social_Proof (folded 4 drafts)可以看出它把四个曾经独立的草稿key-feature-card-grid-assemble、key-feature-glass-card-camera-reveal、benefits-vertical-list、social-proof-logo-grid-zoom-out归一到一个时间模板之下。适用角色与时长预算蓝图定义的使用窗口是按叙事角色拆分的角色变体来源时长窗口结构特征Key_Featurekey-feature-card-grid-assemble5.8–7.3s2 列砖式 / 3×3 网格图标标签磁贴逐项级联随后近静态保持 缓慢推近Key_Featurekey-feature-glass-card-camera-reveal6.5s相机变体特写发光图标后拉玻璃卡片从图标背后长出Benefitsbenefits-vertical-list6.5–10.5s约 1 item/sec 随条数伸缩单列收益清单逐条累积或 Slot-machine 换槽Social_Proofsocial-proof-logo-grid-zoom-out3.0–6sLogo 墙居中成阵持续后拉缩景展示生态在 blueprints-index.md 的角色菜单里本蓝图出现的触发条件是展示大量标注特性磁贴/胶囊网格自行组装Key_Feature、纵向收益清单累积或换槽Benefits、Logo 墙建起后拉远揭示广阔生态Social_Proof。该索引也强调菜单是软约束剧本真实优先若某个节拍与模板形状不符宁可基于动作词汇自由组合compose也不强行套用。三幕镜头结构统一模板蓝图正文给出的是合并模板——具体运动动词 [slots]而不是四份互不相干的实现。任何变体都可落到这三幕Scene 10.0–约 1.0s——开场 首批进场在[渐变 / 放射 / 深色背景]可选[点阵网格 / 漂浮水印]纹理上先建立空的[网格或清单区域]随后条目以快速交错级联间隙约 0.04–0.08s清单节奏约 1 item/sec开始组装。每个[条目特性磁贴 / 胶囊 / Logo 磁贴 / 收益行]以淡入 短程滑入/缩放直接落进自己的槽位——低戏剧性无散花、无大弹跳弹簧超调保留给强调标记使用。相机静止。开场[标题 / 钩子]可在阵列上方逐行填充任何[证明数字]以[强调渐变]计数上涨。Scene 2约 1.0s–Xs——阵列成形并保持剩余条目抵达布局解析为最终形态[2 列砖式 / 3×3 网格 / 密集马赛克 / 堆叠清单]。完整阵列保持——活着但静息磁贴上做轻微持续的视差 / 正弦浮游或做缓慢相机推近微弱放大。可选[强调色]辉光在磁贴表面/背后行进扫过。Scene 3Xs–结束——稳定 / 揭示 / 退场一切稳定保持到结束或执行可选的相机修饰见下文或由[收尾行 / CTA]为阵列画上句号。结构上贯穿的原则是内容持续抵达而非 t0 倾泻——每一幕都承担叙事递进这正是蓝图与一次性动画脚本的分水岭。四类变体详解统一模板之下四类角色分叉各有微调。写作/实拍时以哪个槽位承担哪一角色来区分变体 A — Key_Feature 网格feature-tile grid条目为标注[图标 特性标签]的磁贴/胶囊组装进 2 列砖式或 3×3 网格近静态保持 缓慢推近 可选行进辉光扫掠标题书挡[hook] → [CTA]。无相机揭示靠元素级动画驱动。变体 B — Key_Feature 玻璃卡片相机揭示glass-card camera-reveal组装由相机驱动而非元素交错。开场特写 2–3 个发光图标相机后拉让 N 张玻璃卡片从图标背后生长出来图标缩小约 50% 变成卡片标题[中心卡片]放大约 105% 并前移、以快速弹簧与两侧交叠卡片并排保持、持续视差浮游退场 快速运动模糊横扫把卡片滑出画外。变体 C — Benefits 纵列清单benefits vertical-list单一纵列[收益行]堆栈约 1 item/sec两种子模式(a)BUILD每行始终全亮入场 [标记]弹簧弹出 [勾选/图标]描画 [胶囊]对文本做遮罩擦除(b)SNAP整个堆栈每拍上移一槽约 0.1s 缓动最新一行落入高亮焦点槽离开的行按位置渐暗dim-by-position。静态相机可选对侧永久[装饰性轨道/圆盘]。无相机揭示。变体 D — Social_Proof Logo 墙后拉缩景logo-wall zoom-out开场节拍[trusted-by 标题]卡片或[产品截图]交叉淡化/剪切到居中的 Logo 网格并构建整体入场 / 随机弹入 / 按列上滑随后持续相机后拉把整个网格向中心缩小以揭示广阔生态并保持可选固定 HUD/取景器括架可选退场 整个网格上滑飞出画顶。动作词汇表镜头可用的字母表蓝图把本镜头可能出现的每一个动作都显式列成词汇表方便在套蓝图不合身时按词汇自由组合。核心动词包括条目交错组装淡入 短程滑入/缩放进槽· 砖式/网格/清单布局解析 · 随机化弹入 · 按列上滑 · 纵列换槽Slot-machine 吸附并保持· 弹簧超调标记弹出 · 勾选/图标描画 · 胶囊/标签遮罩擦除揭示 · 按位置渐暗弱化 · 标题逐行填充 · 强调渐变数字计数上涨 · 近静态保持 · 保持期轻微视差/正弦浮游 · 缓慢相机推近 · 相机后拉揭示连续或分段回拉· 卡片从图标背后生长 · 图标缩为标题 · 中心卡片放大并前向交叠弹簧· 行进辉光扫掠 · 固定 HUD/取景器括架 · 运动模糊滑出横扫退场· 网格上滑飞出退场· 书挡标题淡入 · 永久装饰轨道/循环。规则映射把动作动词落到原子配方蓝图的精髓在于每个动作动词都映射到一个rule-id——在 rules-index.md 中每个规则文件都自带 HTML/CSS/GSAP 完整配方与取值范围。完整映射如下动作动词规则rule-id在规则库中的落点条目交错组装进槽 / 砖式-网格-清单布局解析center-outward-expansion逐条交错 短程滑入变体目标位 最终布局槽位center-outward-expansion.md随机化弹入交错gsap-effectsstagger 配方随机from/顺序gsap-effects.md按列滑入网格gsap-effects逐列交错上滑同上纵列换槽 / Slot-machine 吸附保持vertical-spring-tickerSTEPS 行进行数vertical-spring-ticker.md弹簧超调标记弹出spring-pop-entranceback.out 弹簧gsap-effects交错弹链spring-pop-entrance.md标记内勾选/图标描画svg-path-drawsvg-path-draw.md磁贴内线稿图标内部部件动起来svg-icon-enrichmentsvg-icon-enrichment.md胶囊/标签遮罩擦除文本揭示techniques.mdclip-path revealtechniques.md按位置渐暗弱化gsap-effects按槽位做逐行 opacity无专用规则见 gsap-effects.md标题逐行填充discrete-text-sequencediscrete-text-sequence.md强调渐变证明数字计数上涨counting-dynamic-scalecounting-dynamic-scale.md保持期轻微视差/正弦浮游sine-wave-loop保持的网格需套用并发元素振幅 /√N 规则sine-wave-loop.md缓慢相机推近multi-phase-camerasteady-push 相位模式multi-phase-camera.md中心卡片放大 前向交叠spring-pop-entrance快速弹簧techniques.md的 CSS-3Dz 深度交叠spring-pop-entrance.md卡片从图标背后生长 / 图标缩为标题由相机揭示驱动multi-phase-camera——grow/shrink 是与回拉相位和弦的 scale tween无独立规则见 multi-phase-camera.md固定 HUD/取景器括架ai-tracking-box静态括架变体——叠加画框非跟踪ai-tracking-box.md书挡标题淡入discrete-text-sequence或gsap-effects淡入见上永久装饰轨道/圆盘/循环sine-wave-loop若为轨道徽章环则orbit-3d-entrysine-wave-loop.md磁贴表面/背后行进辉光扫掠ambient-glow-bloom单遍行进辉光横扫ambient-glow-bloom.md运动模糊滑出横扫玻璃卡片退场motion-blur-streak高速横扫带方向性速度模糊携带卡片出画motion-blur-streak.md网格上滑飞出退场gsap-effects普通交错 translate 出画属基础退场 tween非缺失能力见 gsap-effects.md蓝图末尾的RULE GAPS声明是显式给出的RULE GAPS: none——即本镜头需要的全部动作都有规则覆盖旅行辉光、滑出横扫与网格飞退分别落到 ambient-glow-bloom、motion-blur-streak 与 gsap-effects无需任何新规则即可完整实现。相机修饰zoom-OUT 揭示变体 B 与 D 的标志动作zoom-OUT 揭示是本蓝图定义角色的关键动作可选的相机包裹层在保持期整体缩小揭示已组装的网格/卡片坐落于更大环境之中生态规模或一行卡片从特写图标展开。两种实现路径按节奏类型区分连续单遍后拉Social_Proof 生态回拉→viewport-change单个包裹层通过onUpdate让cam.scale递减保持单一事实来源single source of truth。该规则的实现要点是单.world包裹层上的组合变换translate(x,y) scale(S)且反平移公式为T -offset × S。分段回拉 → 聚焦 → 稳定带内建漂移Key_Feature 特写图标 → 卡片展开→multi-phase-camera使用其 Dramatic reveal: push → neutral → pull / 回拉相位模式卡片的 grow/shrink 与回拉相位和弦同一进度、同一缓动视觉上是一个拍子。该规则把相机实现为一个包裹div其transform: scale() translate(x,y)由相位 scale在触发时刻逐级推进 正弦微漂移小振幅、慢频率叠加到相位变换上双驱动且都跑在 GSAP timeline 内从而能被 HyperFrames 逐帧确定性地 seek。唯一的合并张力center-outward-expansion 的密度上限蓝图把已知的唯一冲突merge tension显式标注出来这是最有工程价值的一段。默认的 stagger-assemble 天然对应center-outward-expansion元素从中心向目标位展开。查其规则正文可看到硬性取值范围条目数 3–88 会在中心处中段飞行的交叠造成视觉混乱stagger 间隙应在 0.04–0.08s太紧 同时和弦无法分离、太松 慵懒琶音且ITEM_COUNT × STAGGER EXPAND_DUR否则尾项未落稳会显毛糙缓动应使用 out 系power3.out默认、power2.out温和、expo.out戏剧性急停杜绝in缓动。但 Social_Proof 的 Logo 墙是刻意稠密的12 磁贴超出该规则的安全上限。因此该变体不得让元素从共享中心爆发而是让每项滑行短距离直接进入自己的槽位——即该规则标注的 starting partially-spread / short-path 形态或改用gsap-effects做逐项交错。这也正是统一模板 Scene 1 动词已写明的 short distance directly into its slot。换言之变体 A/C 可享受中心展开的自然戏剧性变体 D 必须降级为直入槽位的短程滑入。落地要点把蓝图实例化到 HyperFrames 合成中结合 SKILL.md 中的运行时与约束约定实例化该蓝图时有四条硬性纪律先选规则而非蓝图skill 的默认路径是先挑 2–4 个原子规则、用一条暂停的 GSAP timeline 粘合只有当镜头确实匹配现有 4–5 阶段编排模板本蓝图正是其一且复用能省时间时才读蓝图。选定后按 blueprints-index.md 的 Picking guidance先定帧角色 → 打开blueprints/id.md读时间编码模板、[slots]与标志动作 → 选姿势Reproduce / Adapt / Compose内容换皮时保留标志动作→ 若菜单不合身则从动作词汇自由组合并仍按 VO 跨镜头铺揭示节奏。遵守核心契约单一暂停 timeline、data-duration决定长度、无Math.random/Date.now/performance.now、无repeat: -1、不得对后续场景剪辑用gsap.set、不在async/setTimeout/Promise内构建 timeline详见 hyperframes-core。动画工艺层面的两条追加布局常量预计算——绝不在 tween 时用getBoundingClientRect()推导位置并行采样会失步空间运动只用 GSAP transform 别名x/y/scale/rotation永不 tweenwidth/height/top/left。可审计成帧后用仓库内的分析脚本核查编排——node .agents/skills/hyperframes-animation/scripts/animation-map.mjs composition-dir --out composition-dir/.hyperframes/anim-map会读取注册在window.__timelines上的每条 GSAP timeline、枚举 tween、采样 bbox 并输出animation-map.json用于发现死区、交错一致性与生命周期告警也可用 hyperframes-cli 的lint做进一步校验。选型速查与延伸阅读想让某个节拍一次枚举广度关键特性网格 / 累积收益清单 / Logo 墙→ 直接命中本蓝图。想要静态近保持、文字本身在变的工作马镜头 → 改选kinetic-type-beats想要它连接一切 / 一中心多环绕 →constellation-hub想要一两条收益 单一克制的揭示动作 →titlecard-reveal三者与 grid-card-assemble 相邻均可从 blueprints-index.md 的角色菜单横向比较触发条件。本蓝图的完整原文与全部细节见 grid-card-assemble.md原子配方浏览 rules-index.md运行时路由与约束总纲见 SKILL.md 及 hyperframes-core。一句话总结这条蓝图的使用心智组装永远让元素走短程直入槽位或受控的中心展开、保持期永远别让画面冻结浮游/推近/辉光三选一、要更大图景就让相机而不是元素去揭示——网格/卡片组装的价值不在花哨而在一屏数尽的秩序感与节奏感。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考