企业官网建设流程全解析

• AI 技能
• 媒体生成
• 视频

本篇技术指南围绕 video-shotcraft 仓库中「分格节奏」镜头卡（references/shots/rhythm/panel-grid-moves.md）展开，系统讲解以格子为节奏器的三种高能拍法：九宫格闪切填墙吞屏、网格集体重排、漫画斜格三机位并列。读完你将掌握每式的节拍骨架、全部核心参数的典型值与调节手感、源码级实现原理，以及同片选型与音效钉帧的实战约束，可直接复刻进自己的 Remotion 产品视频。

这张卡的定位：格子是节奏器，不是入场动画

在 video-shotcraft 的镜头卡体系里，wall-reveal-moves 回答的是"整墙怎么入场"（一次性揭示），而本卡panel-grid-moves回答的是另一个问题：格子怎么当节奏器。

核心心智模型是文档里那句"格变即鼓点"——分格、重排、并列三种变化全部发生在节拍上，每一次格的落位都是一记鼓点：

• A 是填：3×3 格按十六分音符乱序逐格"啪啪"硬入，填满停一拍，中心格放大吞掉全屏——功能矩阵一秒全亮相；
• B 是移：6 张卡在节拍点集体直线换位（横排 → 3×2 网格），半秒落定 + 加深脉冲收束——布局重排本身当一个鼓点；
• C 是并：画面咔咔切成 3 个斜线分格，同一产品三种机位同时定格，停半拍后一格斜边扩张吃掉全屏——Scott Pilgrim 式的漫画分屏语言。

按需选型：多功能亮相用 A，布局叙事用 B，单品多视角用 C。三式的时长分别为 A ~4.7s / B ~4.8s / C ~5s，能量分别为高 / 中 / 中高，均被标记为ui-entrance类目。

三式选型总览

A 式 grid-flash-mosaic：九宫格闪切填墙吞屏

参考实现：demos/rhythm/panel-grid-moves/GridFlashMosaic.tsx

硬入是命门：未到拍点直接不渲染

A 式的灵魂是"逐格硬入无淡化"。源码通过条件挂载实现：每格渲染前先判断当前帧是否到达自己的拍点，未到直接return null，零淡化、零透明度过渡：

const start = FILL_START + RANK[i] * STEP; // 每格各自的拍点帧 if (f < start) return null; // 硬入：未到拍点不渲染，无淡化

淡入就不是"啪"——这是文档标注的命门。第一格落下的帧号FILL_START = 25，步进STEP = 2，即每 2 帧一格（30fps 下正是十六分音符的密度）。

乱序用 h(i) 伪随机排序

顺序不是逐行逐列，而是用确定性哈希h(n) = frac(sin(n * 127.3) * 43758.5453)排序得到乱序落点表（GridFlashMosaic.tsx#L10-L28）。好处有二：帧确定、无随机源，渲染可复现；逐格乱序入场比顺序扫读更有"矩阵点亮"的冲击感。

每格入格动画：3f 弹 + 2f 加深脉冲

// 入格 3f scale 1.18→1 const popScale = interpolate(f, [start, start + 3], [1.18, 1], { ... }); // 2f 加深脉冲 const darken = interpolate(f, [start, start + 2], [0.45, 0], { ... });

每格落下时先放大到 1.18 再收正，同时叠一层黑色加深 0.45→0 的 2 帧脉冲，给"啪"的落点一个视觉重音。

白卡靠 3px 描边分格

每格使用border: 3px solid G.ink（#2f2f2f）且boxSizing: 'border-box'（GridFlashMosaic.tsx#L156-L163）。这是仓库中"白底提亮不可见"判例的反向应用：白色卡片在浅灰底上若没有深色描边，分格关系就消失，因此白卡靠描边确立网格。

吞屏：0.3125 倍整页放大 3.28 倍

中心格内塞的是整页FakeDashboard缩小版，缩小比例MINI_SCALE = CELL_W / 1920 = 0.3125；放大终点ZOOM_SCALE = 3.28（GridFlashMosaic.tsx#L35-L38）。注释揭示了选值的物理逻辑：3.2 恰好铺满全屏，多加 0.08 是为了让格子的深色描边完全滑出画外——如果描边残留在收尾满屏页面上，就穿帮了。吞屏曲线为Easing.in(Easing.cubic)，前慢后快，放大带"扑出来"的加速感。

满墙呼吸一拍

最后一格入格结束（f44）后、吞屏开始前，有 14f 的停顿段，整墙做一次正弦微呼吸1 + 0.008 * sin(...)（幅度仅 0.8%），GridFlashMosaic.tsx#L99-L103。呼吸段只在 f44–f58 窗口内生效，窗口外严格为 1——静止就是静止，不做无谓的常驻动画。

B 式 flip-grid-reflow：网格集体重排

参考实现：demos/rhythm/panel-grid-moves/FlipGridReflow.tsx

预写两套坐标表，免真 FLIP 量测

B 式不做运行时 DOM 量测，而是把横排与 3×2 网格两套目标坐标直接预写进代码（FlipGridReflow.tsx#L14-L34）：

• 横排坐标：6 张 280×170 卡，卡间距 24px，总宽 1800，x0 = 60，中心行ROW_Y = 330，即 x 依次 200 / 504 / 808 / 1112 / 1416 / 1720；
• 网格坐标：放大后卡为 358.4×217.6，列中心GC = [571.6, 960, 1348.4]，行中心GR = [416.2, 663.8]。

纯 transform 插值意味着帧确定、无随机、免量测成本，也便于逐帧核对轨迹。

交错映射防对穿

轨迹安排是 B 式最容易翻车的地方：乱排轨迹会恶性穿帮。源码用偶数索引上排、奇数索引下排的交错映射（card0→上左、card1→下左、card2→上中……），6 张卡全部沿直线飞行且互不对穿。

节拍点集体换位：16f 飞行 + 1.02 过冲

• 静止 30f 建立横排（BEAT = 30即节拍点）；
• 每卡 delay =i × 1.5f微错峰；
• 16fEasing.inOut(Easing.cubic)直线飞行（FlipGridReflow.tsx#L57-L62）；
• scale 1→1.28，且在 16f 内先冲到1.28 × 1.02，再用 3fEasing.out(cubic)回落过冲归位（FlipGridReflow.tsx#L64-L71）。

末卡完全落定帧30 + 5×1.5 + 16 + 3 = 56.5，整个重排动作约半秒——布局重排本身被拍成一记鼓点。

加深脉冲必须"摘罩"

全部落定后（f58–f64，谷值 brightness 0.78）叠加一次全画面加深脉冲。实现上 filter 只在脉冲窗口内挂载、窗口外完全不挂（FlipGridReflow.tsx#L94-L100）：

const pulsing = frame >= PULSE_IN && frame <= PULSE_OUT; ...(pulsing ? { filter: `brightness(${bright})` } : {})

这是"摘罩判例"——窗口外挂 filter 会毁掉真静止（GPU 合成层常驻、或渲染不一致），条件挂载既保证视觉精确又保住静止段的干净。

C 式 comic-panel-split：漫画斜格三机位并列

参考实现：demos/rhythm/panel-grid-moves/ComicPanelSplit.tsx

斜缝白线是漫画感命门

三格由整页内容以12° 斜边 clip-path polygon裁切而成。斜缝用 SVG 双线绘制（ComicPanelSplit.tsx#L152-L168）：

<line x1={750} y1={-10} x2={520} y2={1090} stroke="#2f2f2f" strokeWidth={16} /> <line x1={750} y1={-10} x2={520} y2={1090} stroke="#ffffff" strokeWidth={10} />

即16px 墨#2f2f2f底 + 10px 白核（上下各留 3px 墨边）的双线斜缝。文档强调：斜缝白线是漫画感命门，直缝读作分屏工具而非漫画分格。

三机位：translate/scale 摆位

三格是同一主体的不同机位（源码为同一PageA的三份实例），通过translate/scale摆出三个取景点（ComicPanelSplit.tsx#L91-L108）：

逐格弹入与保活

• 逐格 2f 间隔弹入，每格 3fscale 1.06→1+ 加深脉冲（ComicPanelSplit.tsx#L123-L131）；
• 三格弹完（f27）后定格 18f，期间每格做一次极缓的微推近（push从 0→1，幅度 +3%/+5.5%/+8%）——文档点名：三格全静读作截图拼贴，缓推是"保活"手段。

摘罩帧与扩张终值对齐防跳变

第三格在定格结束后用 12fout-cubic扩张吃屏，斜边从1410/1180一路推到画外-60/-290。关键细节：扩张期间第 3 格的 push 增量按(1 - ex)退掉、scale 收敛回 2.6，与f57 摘罩帧（扩张完成后直接输出translate(442px,140px) scale(2.6)的特写直出分支）的终值完全一致（ComicPanelSplit.tsx#L53-L66）——摘罩帧与扩张终值必须逐像素对齐，否则切换瞬间会产生一跳。

参数表：全部关键参数的典型值与手感

三式的帧号均为写死的常数（如 A 式FILL_START=25 / STEP=2 / HOLD_END=58 / ZOOM_END=72），全部帧确定、无随机源，这与仓库"渲染可复现"的整体工程取向一致。

收尾真静止与音效钉帧

三式收尾都要求 ≥40f 的真静止（A 68f / B 81f / C 93f），这是仓库 R 系"呼吸判例"的要求：落定后的静止必须是字面意义上的静止，不能有常驻动画。C 式特殊之处在于摘罩帧（f57）必须与扩张终值对齐，防止静止段起始帧跳变。

三式都吃拍点、声音强依赖（references/sound-design.md §4.5 所述钉帧规则适用于本卡）：

• A：逐格一声"啪"（共 9 声）；
• B：起飞与脉冲各一声；
• C：逐格"咔咔咔"三声。

注意 sound-design 的硬规则：钉帧一律相对 shot 起点写SHOTS.<shot>.from + offset，而非绝对帧号——这样镜头内部节拍不变时，改前面镜头时长只需分镜表更新一处，SFX 自动跟随。不踩拍的分格只是布局动画，格变必须落在鼓点上。

已知坑：实战调校与选型红线

文档明确列出的五条已知坑，是实战中反复踩出来的：

1. demo 参数是调校起点：三式均在灰阶/占位素材上调校通过（_fixtures/Fixtures.tsx的FakeDashboard/Card占位包），参数非实战定稿，首次实战必须以真实素材回验——真素材的密度、对比度不同，硬入的 0.45 加深脉冲、3px 描边的可感度都会变；
2. C 三格必须是同一主体的不同机位：三格塞不同内容读作 bento 排版，不是漫画分格，语义就散了；
3. 不踩拍的分格只是布局动画：三式都强依赖拍点与音效，脱离节拍就失去节奏器属性；
4. 同片分格系 ≤1 段：格子语言辨识度太强，两段就撞；
5. A 与 wall-reveal-moves 别同片连用：两者都是"墙"，观众分不出是入场还是节奏器。

参考实现与仓库资源

• 三式参考实现：demos/rhythm/panel-grid-moves/（ComicPanelSplit.tsx / FlipGridReflow.tsx / GridFlashMosaic.tsx）
• 占位素材包：demos/_fixtures/Fixtures.tsx（灰阶G色板、Card、FakeDashboard、TitleBlock）
• 卡面元数据（summary / use / duration / energy / styles）：gallery/source/panel-grid-moves.md 与 gallery/api/library.json 中的panel-grid-moves条目
• 音效钉帧与偏移补偿：references/sound-design.md
• 定位对照卡：references/shots/ui-entrance/wall-reveal-moves.md

复制这三个.tsx到自己的 Remotion 工程、把FakeDashboard换成真实产品界面后，即可按本文参数表完成"功能矩阵亮相（A）、布局叙事（B）、单品多视角（C）"三类节奏段落的落地——记住核心纪律：硬入零淡化、预写坐标防穿帮、斜缝白线定漫画感、收尾真静止 ≥40f、拍点与音效严格对齐。

• AI 技能
• 媒体生成
• 视频