HyperFrames 动画蓝图详解：grid-card-assemble 网格/卡片自组装镜头
【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes
导读
grid-card-assemble是 HyperFrames 动画技能库（skills/hyperframes-animation）中一个覆盖Key_Feature（核心特性）、Benefits（价值收益）、Social_Proof（社会证明）三大叙事角色的多阶段镜头蓝图：N 个元素（特性卡片、胶囊徽章、Logo 块、收益文案行）以错落级联的方式自组装成网格或纵向列表并稳定保持，构成"一眼看尽广度"的节奏拍；可选配一个相机拉远（zoom-OUT）来揭示组装后的阵列位于更宏大整体中的位置。读完本文，你将掌握该蓝图的三段式镜头结构（开篇+阵列成形+收束/揭示/退场）、五大变体（特性网格、玻璃卡片揭示、收益列表、实时数据填充、Logo 墙拉远）、完整的动作词汇表及其到原子运动规则的映射关系，并能在 HyperFrames 的确定性时间轴约束下直接实例化该蓝图。
一、蓝图在技能库中的定位
在skills/hyperframes-animation中，动画知识被组织为四层：rules/（原子运动配方）、blueprints/（多阶段场景模板）、transitions/（场景转场）与techniques.md（通用技法）。blueprints-index.md明确说明：蓝图是产品无关、带时间码的镜头模板——格式为Scene N (a–b s): …，内含[slots]占位槽位与一个具名的 signature move（标志性动作），从 178 条黄金产品宣发片段中逆向工程而来。grid-card-assemble正是其中服务角色最多的蓝图之一，与kinetic-type-beats（6 角色）并列高覆盖度。
从角色选择路径看，该蓝图在 Key_Feature / Benefits / Social_Proof 三个角色的菜单中都有一席之地：
- Key_Feature：带标签的特性卡片/徽章网格自组装（或玻璃卡片被相机拉远揭示；或实时填充的数据看板）；
- Benefits：纵向收益列表持续累积、步进或流经焦点槽，可选清场落到 payoff 行；
- Social_Proof：Logo 墙构建后拉远揭示庞大生态。
该蓝图由4 份草稿 + 2 个挖掘簇折叠而成：key-feature-card-grid-assemble、key-feature-glass-card-camera-reveal、benefits-vertical-list、social-proof-logo-grid-zoom-out，以及live-data-populate-board、item-field-to-payoff-card。这意味着它天然是多用途的"广度枚举"形状，而不是单一效果的特化模板。
二、设计意图（Intent）与节奏基调
intent：N 个元素（tiles / cards / logos / list-lines）以错落级联的方式自组装进网格或纵向列表并保持——这是一个"看，我们/谁/它做了多少"的拍子，一次性枚举广度；可选的相机 zoom-OUT 拉远，将组装完成的阵列揭示为更宏大整体内部的一部分。
该蓝图的核心节奏哲学（继承自blueprints-index.md）是：揭示必须配合口播节奏铺开，而不是在 t=0 一次性倾倒。因此组装是级联的、分场景推进的，最终落在一个"活着但安放"的保持帧上。
Duration（时长规格）：整体 3.0–10.5 秒，随角色变体浮动：
| 变体 | 时长范围 |
|---|---|
| Social_Proof | 3.0–6s |
| live-populate（实时数据填充） | 4.2–7.8s |
| Key_Feature 网格 | 5.8–7.3s |
| Benefits 流式 / field-to-payoff | 5.9–8.4s |
| Key_Feature 玻璃卡片 | 6.5s |
| Benefits 列表 | 6.5–10.5s（随数量按约 1 item/s 缩放） |
三、镜头结构：三段式合并模板
蓝图提供了合并后的通用三段结构（consolidated template），每个[slot]都是可替换的占位参数。
Scene 1（0.0–约 1.0s）——开场 + 首批入场
- 在
[渐变 / 径向 / 深色背景]（可选[点阵网格 / 漂移水印]纹理）上建立空的[网格或列表区域]； - 元素开始以快速错落级联自组装（约 0.04–0.08s 间隔；列表节奏约 1 item/s）；
- 每个
[item: 特性卡片 / 胶囊 / Logo 块 / 收益行]淡入 + 短距离滑入/缩放入位——低戏剧性：不散射、不大弹跳，spring 过冲仅保留给强调标记； - 相机保持静止；
- 开场
[headline / hook]可逐行填入阵列上方，任何[证明数字]在[强调渐变]中计数递增。
Scene 2（约 1.0s–约 Xs）——阵列成形 + 保持
- 剩余元素完成入场，布局解析为最终形态：
[2-col-brick / 3×3 网格 / 密集马赛克 / 堆叠列表]； - 完整阵列保持——"活着但安放"：卡片上有轻柔的持续视差/正弦浮动，和/或相机缓慢推近（微弱放大）；
- 可选：
[强调色]光晕在卡片上/后扫过（traveling glow）。
Scene 3（约 Xs–结束）——收束 / 揭示 / 退场
结束方式四选一：
- 静止收束：一切落定并保持到结束；
- 相机修饰器：运行下方"zoom-OUT reveal"（可选）；
- 文案收尾：
[closing line / CTA]为阵列收尾； - 清场到 payoff：阵列退场，居中的简洁
[claim / price / URL]落地——价格用极快的字符 snap-build（含一帧半成品中间态）；URL 用从左到右揭示，在[accent]中保持，只在最后一拍翻转为[ink]； - 穿透英雄元素：相机向高亮
[hero item]做单次快速加速推近（push-through），随后叠化进入第二个更宏大的后退式[word-grid depth field]（连续缩小以揭示更多元素），再淡出到 payoff。
四、五大变体详解
变体 1：Key_Feature 网格（特性卡片网格）
元素为带[icon + feature-label]标签的卡片/胶囊，组装进 2-col-brick / 3×3 网格；近静态保持 + 缓慢推近 + 可选 traveling-glow 扫光；headline 首尾呼应（[hook]→[CTA]）。无相机揭示。用于枚举多项能力，无实时 UI、无光标。
变体 2：Key_Feature 玻璃卡片相机揭示
此变体的组装是相机驱动的，而非元素错落：
- 开场紧贴
[2–3 个发光图标]； - 相机 zoom-OUT，N 张玻璃卡片从图标背后生长出来（图标缩小约 50% 成为卡片头部）；
[center card]放大约 105% 并前移交叠两侧卡片（快速 spring）；- 卡片保持并排，持续视差浮动；
- 退场 = 快速运动模糊 SWEEP 将卡片扫出画幅。
这是一个"支柱一次性揭示"（pillars revealed at once）的揭示变体。
变体 3：Benefits 纵向列表
单列[benefit-line]堆栈，约 1 item/s，三种子模式：
- (a) BUILD（构建）：每行全程点亮；入场 =
[marker]spring-pop +[check/icon]勾画 +[pill]遮罩擦除文本； - (b) SNAP（步进）：整个堆栈每拍上移一个槽位（约 0.1s 缓动），新行落入明亮的焦点槽，离开它的行按位置变暗；
- (c) STREAM（流式）：列表快速持续滚动经过焦点槽——中央元素不透明
[ink]且略微放大，相邻元素淡出/缩小——然后减速停在[chosen item]上；可选用静态[label]对侧分屏对照；随后清场到居中[payoff line]。
静态相机；对侧可选常驻[装饰轨道/圆盘]。无相机揭示。
变体 4：Key_Feature 实时数据填充（live-populate）
组装以数据填充波的形式发生：无光标、锁帧（可有一次温和的开场拉远为[headline]腾位）。两种看板形态：
- (a) ANCHORED（锚定式）：
[白色数据卡片]逐个 spring 入场，每张由细线拴在[地图/看板表面]上的[marker]处，标记脉冲（扩张的衰减圆环）； - (b) TABULAR（表格化）：新
[列]以灰色骨架胶囊出现，进度填充从左到右、自上而下交错运行（彩色填充 + 前导尖头），每条柱在完成时切换为真实[value/avatar chip]。
组装后阵列保持活性：[status pills]以快速利落的切换翻动状态（颜色编码、连续多次），或[headline]交叉淡出后在新揭示区域运行第二波填充——表格内容在粘性首列下方水平滚动以暴露之。保持帧落在完全填充、完全更新的最终状态。"看，广度有多大"变成了"看，它此刻正在实时做"。
变体 5：Social_Proof Logo 墙拉远（logo-wall-zoom-out）
开场拍（[trusted-by headline]卡片或[产品截图]）交叉淡出/硬切到中央 Logo 网格，以三种方式之一构建：整体入场 / 随机 pop-in / 按列上滑；随后持续相机 zoom-OUT 将整个网格向中央缩小，揭示宏大生态并保持；可选固定 HUD/取景器括号；可选退场 = 整个网格上滑飞出画幅顶部。
五、动作词汇表（Motion Vocabulary）
该蓝图背后的完整动作词汇（每个动词在下一节的规则映射中都有对应的 rule-id）：
- 入场：item stagger-assemble（淡入 + 短滑/缩放入槽）· randomized pop-in · column slide-up · spring-overshoot marker pop · check/icon draw-in · pill/label mask-wipe reveal · skeleton-pill progress fill（左→右、前导尖头、颜色过渡）· fill-completes-swap-to-real-data · tethered-card spring-in（细线连接锚点标记）· pill-widens-as-label-fills
- 布局：brick/grid/list layout resolve · vertical-list step（slot-machine snap-and-hold）· 粘性首列内部水平滚动 · rapid vertical stream past a fixed focal slot + deceleration stop
- 保持/活性：near-static hold · gentle parallax/sine float on hold · traveling-glow sweep · perpetual decorative orbit/loop · live status-pill state flips（组装后，颜色编码）· pulsing marker rings · 两波填充 + headline 交叉淡出
- 相机：slow camera push-in · camera zoom-OUT reveal（连续或分阶段拉回）· push-through-the-hero-item exit · receding word-grid depth field
- 文字：line-by-line headline fill · accent-gradient number count-up · price snap-build（极速半成品中间态）· left-to-right URL reveal + 最后一拍颜色翻转 · book-end headline fade · clear-to-payoff coda
- 退场：motion-blur slide-out sweep · grid slide-up fly-out · dim-by-position de-emphasis
六、规则映射：动作动词 → 原子规则（rule mapping）
蓝图文档以"动作动词 →rule-id"的映射表收束每个动作的落地配方。以下为完整映射，并补充关键规则的源码实现要点：
| 动作 | 规则 | 实现要点（来自skills/hyperframes-animation/rules/） |
|---|---|---|
| item stagger-assemble 入槽 | center-outward-expansion（每项错落 + 短路径滑入变体） | 每元素以data-target-x/y携带最终偏移，位置在中心与目标间插值x = targetX × progress；xPercent/yPercent: -50烘焙自居中 |
| brick/grid/list 布局解析 | center-outward-expansion（目标位置 = 最终布局槽位） | 同上；STAGGER 0.04–0.08s，power3.out，禁止in缓动 |
| randomized pop-in 错落 | gsap-effects（错落配方；随机from/顺序） | GSAP 通用效果配方规则 |
| column slide-up 入网格 | gsap-effects（按列错落上滑） | 同上 |
| 纵向列表步进 / slot-machine snap-and-hold | vertical-spring-ticker（STEPS = 行前进次数） | 弹簧 tween 相加产生总 Y 位移：translateY(-sumP × ITEM_HEIGHT)，back.out过冲制造"咔哒"节拍；STEP_SPACING ≤ STEP_DUR 保证叠加 |
| spring-overshoot marker pop | spring-pop-entrance（back.out spring）+gsap-effects错落链 | 注意规则默认power3.out平滑落定，back.out是明确的俏皮例外且 OVERSHOOT ≤ ~2 |
| check/icon 勾画 | svg-path-draw | SVG 路径绘制规则 |
| tile 内活线图标 | svg-icon-enrichment | SVG 图标细节增强规则 |
| pill/label mask-wipe 文本揭示 | techniques.md（clip-path reveal） | 技法库中的遮罩擦除配方 |
| dim-by-position 去强调 | gsap-effects（按槽位逐行透明度；无专有规则） | 简单的按位置 opacity 处理 |
| line-by-line headline 填充 | discrete-text-sequence | 稀疏{ t, text }状态数组 + 反向搜索逐帧渲染 |
| accent-gradient 数字 count-up | counting-dynamic-scale | 计数 + 动态缩放规则 |
| 保持帧的视差/正弦浮动 | sine-wave-loop（保持网格套用并发元素振幅/√N规则） | 连续循环规则；多元素并发时振幅按 √N 收缩 |
| 缓慢相机推近 | multi-phase-camera（steady-push 相位模式） | 相位序列：neutral → slight push → more push；相位 scale 与正弦漂移在单一onUpdate中合成 |
| center-card 放大 + 前向交叠 | spring-pop-entrance（快速 spring）+techniques.mdCSS-3D（z-depth 交叠） | 快速 spring + 3D 纵深 |
| 卡片从图标背后生长 / 图标缩为头部 | 由相机揭示驱动（multi-phase-camera）——缩放 tween 与拉回相位和弦编排；无独立规则 | 相位模式 "Dramatic reveal: push → neutral → pull" |
| 固定 HUD / 取景器括号 | ai-tracking-box（static-bracket 变体——覆盖框，非追踪） | 追踪框规则的静态变体 |
| book-end headline 淡入淡出 | discrete-text-sequence（或gsap-effects淡入） | 同上 |
| 常驻装饰轨道/圆盘/循环 | sine-wave-loop（若为轨道徽章环则用orbit-3d-entry） | 连续循环 / 3D 轨道入场 |
| traveling-glow 扫光 | ambient-glow-bloom（跨卡片的单次扫光） | 环境辉光泛光规则 |
| 运动模糊扫出退场 | motion-blur-streak（快速扫动上的方向性速度模糊） | 方向性拖影规则 |
| grid 上滑飞出退场 | gsap-effects（普通错落 translate 出画幅；无专有规则） | 基础退场 tween，非缺失能力 |
| skeleton-pill 进度填充 | stat-bars-and-fills（progress-fillscaleX形式；前导尖头是和弦子元素） | 条形/填充统计规则 |
| fill 完成切真实数据 / 状态胶囊翻转 / 两波间 headline 叠化 | discrete-text-sequence（时间阈值处整状态替换——胶囊状态即文本状态） | 同上 |
| 上到下交错填充级联 | gsap-effects（按行错落填充 tween） | 同上 |
| 拴线卡片 spring 入场 | spring-pop-entrance（卡片）+avatar-cloud-network（细连接线-锚点布局；锚点坐标必须与标记精确一致）+ 需要时svg-path-draw画线 | 头像云网络的连线布局配方 |
| 脉冲标记环 | cursor-click-ripple（其扩张环 + attack-decay 透明度包络，去掉光标/点击，有界循环） | 点击涟漪规则 |
| 粘性首列内部水平滚动 | viewport-change（内层列上的 PAN 形式；粘性列在平移层外）——移动层标记data-layout-allow-overflow并在表格卡片处裁剪 | 虚拟相机规则的单层复合变换T = -offset × S |
| 快速纵向流经焦点槽 + 减速停止 | vertical-spring-ticker（连续形式：一次长减速 translate 替代步进 tween；焦点槽强调复用 dim-by-position 映射） | 同上 |
| pill 随标签填充变宽 | card-morph-anchor的替换律（统一scaleX/clip-path——绝不 tweenwidth）+discrete-text-sequence填充标签 | 卡片变形锚规则 |
| 穿透英雄元素退场 | multi-phase-camera（单次加速推近相位）经coordinate-target-zoom瞄准高亮 chip，峰值处叠化 | 目标坐标缩放规则 |
| 后退式 word-grid 深度场 | viewport-change（一个.world包装器，cam.scale持续 ↓——指向词场的拉远揭示语法；尺寸/透明度层级伪造深度） | 同上 |
| 价格 snap-build（半秒中间态） | discrete-text-sequence（非线性打字 + 批量追加——恰是其 typo/中间态机制） | 同上 |
| 从左到右 URL 揭示 | techniques.md（clip-path reveal——与 pill mask-wipe 相同映射）；最后一拍颜色翻转 →gsap-effects（该拍一个tl.set，基础操作） | 同上 |
七、相机修饰器：zoom-OUT 揭示
这是玻璃卡片与 Logo 墙变体的角色定义性动作：一个包裹整个阵列的相机包装器在保持阶段持续缩小，揭示组装好的网格/卡片位于更宏大环境（生态规模，或一排卡片从紧贴图标展开）中的位置。两种实现路径：
| 场景 | 规则 | 关键点 |
|---|---|---|
| 连续单次拉远（Social_Proof 生态拉回） | viewport-change（一个包装器，cam.scale经onUpdate递减——单一事实来源） | 单层复合变换translate(x, y) scale(S)，CSS 先应用 scale 再 translate；T = -offset × S |
| 分阶段拉回 → 聚焦 → 落定（Key_Feature 紧贴图标 → 卡片展开） | multi-phase-camera（"Dramatic reveal: push → neutral → pull" / 拉回相位模式；卡片生长/收缩与拉回相位和弦） | 相位 scale 与正弦漂移在单一onUpdate写入；X/Y 漂移频率比约 1.3 产生有机 Lissajous |
从源码实现看（multi-phase-camera 规则），多阶段相机有四个预置相位模式表：Focus-in（back → neutral → slight push，默认产品揭示）、Dramatic reveal（push → neutral → pull，英雄镜头留呼吸）、Steady push（neutral → slight push → more push，持续叙事推近）、Bookend pull（neutral → strong push → neutral，CTA 强调后释放）。玻璃卡片揭示使用第二个，Logo 墙拉远属于viewport-change的连续形式。注意viewport-change的极端区间 4–12× 外向缩放（工作区揭示）同样可服务于"宏大整体"类拉远：按最终 1× 布局构建场景、以cam.scale = 8开场紧贴细节再拉出，切勿反向（把 1× 特写缩小到 0.08–0.25 会让落点文字全部低于可读像素）。
八、合并张力（Merge Tension）：密集 Logo 墙如何绕开 center-burst 上限
蓝图明确记录了折叠各草稿时的冲突及解法：center-outward-expansion（stagger-assemble 的天然支撑规则）在3–8 个元素时表现干净，并明确警告8+ 元素会产生飞行中段交叠混乱——但 Social_Proof Logo 墙是刻意密集的（12+ 个瓦片）。因此该变体的元素不得从共享中心爆发，而应短距离直接滑入自己的槽位（规则的 "starting partially-spread"/短路径形式，或gsap-effects逐项错落）。这已在合并后的 Scene-1 动词中固化为"直接短距离滑入其槽位"。对应到center-outward-expansion规则源码（rules/center-outward-expansion.md），即其Partially-spread start变体：6+ 元素时从{ x: targetX × START_PROGRESS, ... }（START_PROGRESS 0–0.5，约 0.3 避免堆叠）起步。
九、实例化方法论：Reproduce / Adapt / Compose
按blueprints-index.md与SKILL.md的实例化流程，落地该蓝图分四步：
- 选型：在
blueprints-index.md的 Role → blueprint 菜单中按帧的 role 定位grid-card-assemble（Key_Feature / Benefits / Social_Proof 三处均有触发条件），确认或覆盖故事板已命名的候选 id； - 读模板：打开
blueprints/grid-card-assemble.md，读取时间码模板、[slots]与 signature move（自组装级联；变体 2/5 的 signature 为相机 zoom-OUT 揭示）； - 定姿态：Reproduce（槽位干净映射）/ Adapt（结构契合但内容/表面不同，保留 signature move）/ Compose（不契合则从动作词汇构建）；
- 落地约束：遵守
SKILL.md与hyperframes-core的非协商规则——单一暂停时间轴、data-duration决定长度、无Math.random/Date.now/repeat: -1、禁止width/height/top/left布局 tween（空间运动只用x/y/scale/rotation别名）、布局常量在组合设置期预算而非 tween 时测量。
对于该蓝图特有的一些工程细节：垂直列表变体要求容器高度与条目高度像素级相等（overflow: hidden在容器而非内层堆栈）；vertical-spring-ticker严禁在步进间用innerHTML换内容（会破坏 slot-machine 错觉）；viewport-change的overflow: hidden与transform-origin: 50% 50%是硬性要求，背景放.scene而非相机包装器；discrete-text-sequence要求文字包裹层min-width不小于最宽状态以防右缘抖动。编写完成后可用node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> --out <composition-dir>/.hyperframes/anim-map审计编排（死区、错落一致性、生命周期告警）。
结语
grid-card-assemble是把"广度枚举"翻译成时间的成熟形状：Scene 1 的错落级联建立节奏，Scene 2 的保持帧让阵列"活着但安放"，Scene 3 的收束/揭示/退场完成论点落地。五大变体覆盖了特性网格、玻璃卡片相机揭示、收益列表、实时数据看板与 Logo 墙五种叙事需求，而完整的规则映射保证了每个动作动词都能在skills/hyperframes-animation/rules/中找到原子配方直接落地——这正是 HyperFrames 动画技能库"蓝图管编排、规则管原子"设计哲学的具体体现。
【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
