# Panel grid rhythm moves

Three grid-rhythm techniques: flash-fill a grid, reshuffle it, or line up angled panels — all riding the beat.

- Category: rhythm · Tags: shotcraft, remotion, rhythm, ui-entrance
- Spec: 1920×1080 @ 30 fps · 4.72s (16:9)
- License: Apache-2.0 · Tier: free
- JSON: https://gimgs.net/motion/panel-grid-moves.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/panel-grid-moves/template.html
- Repo: https://github.com/Vincentwei1021/video-shotcraft
- Credits: video-shotcraft (Vincent Wei) — https://github.com/Vincentwei1021/video-shotcraft
- Page: https://gimgs.net/motion/panel-grid-moves.html

## Params

_No params._

Default params (base64url for `?p=`): `e30`

## Prompt

## When to use

Using the "grid" itself as a rhythm device: cell-by-cell reveal on the beat (A), collective repositioning on the beat (B), same-subject multi-angle freeze layout (C); all three ride the beat

## Intention

The difference from wall-reveal-moves is the anchor point: that card is about "how the whole wall enters" (a one-time reveal), this one is about "how the grid becomes a rhythm device" — splitting, reshuffling, and lining up panels all happen on the beat, each grid change is a drum hit. A fills: a 3×3 grid hard-mounts cell by cell in sixteenth-note scrambled order, holds a beat once full, then the center cell scales up 3.28x over 14f with Easing.in(cubic) to swallow the screen — a full feature matrix reveal in one second. B moves: six cards collectively swap straight-line positions on the beat (row → 3×2 grid), settling in half a second plus a deepening pulse to close it out — the layout reshuffle itself is a drum hit. C aligns: the frame cuts hard into 3 diagonal panels, the same product freezes in three different camera angles at once, holds half a beat, then one panel's diagonal edge expands to swallow the screen — Scott Pilgrim's split-screen language. Choose by need: multi-feature reveal uses A, layout narrative uses B, single-product multi-angle uses C.

## Duration & energy

- Duration: A ~4.7s / B ~4.8s / C ~5s
- Energy: A High / B Medium / C Medium-high

## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)

## 意图
与 wall-reveal-moves 的区别是本卡的定位锚：那是"整墙怎么入场"
（一次性揭示），这是"格子怎么当节奏器"——分格、重排、并列都发生
在节拍上，格变即鼓点。A 是填：3×3 格按十六分音符乱序逐格啪啪硬入，
填满停一拍，中心格放大吞掉全屏——功能矩阵一秒全亮相；B 是移：6 张卡
在节拍点集体直线换位（横排→3×2 网格），半秒落定 + 加深脉冲收束——
布局重排本身当一个鼓点；C 是并：画面咔咔切成 3 个斜线分格，同一产品
三种机位同时定格，停半拍后一格斜边扩张吃掉全屏——Scott Pilgrim 的
分屏语言。按需选：多功能亮相用 A，布局叙事用 B，单品多视角用 C。

## 三式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A grid-flash-mosaic | 3×3 格每 2f 一格按 h(i) 乱序条件挂载硬入（入格 3f scale 1.18→1 + 2f 加深脉冲），满墙呼吸一拍，中心格 14f Easing.in(cubic) 放大 3.28x 吞屏 | 功能矩阵一秒全亮相；高潮前铺排 |
| B flip-grid-reflow | 预写两套坐标表（横排/3×2 网格），每卡 delay=i×1.5f、16f inOut cubic 直线飞行 + scale 1→1.28 带 1.02 过冲；落定后 6f brightness 0.78 全画面脉冲 | 布局叙事：并列→分组的语义换挡 |
| C comic-panel-split | 三格各一份整页 clip-path 12° 斜边裁切 + translate/scale 摆机位（1x/1.9x/2.6x），逐格 2f 间隔弹入；定格 18f 各格缓推保活，末格斜边 12f out-cubic 扩张吃屏 | 同一主体多视角并列；漫画感段落 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A 硬入 | 未到拍点直接不渲染（条件挂载），零淡化 | 逐格硬入无淡化——命门；淡入就不是"啪" |
| A 描边 | 每格 3px 深色描边（border-box） | 白底提亮不可见判例的反向应用：白卡靠描边分格 |
| A 吞屏 | 中心格塞 0.3125x 整页，放大 3.28（>3.2）让描边滑出画外 | 描边残在收尾满屏上就穿帮 |
| B 坐标 | 两套表预写（行 y=330 / 网格列 571.6/960/1348.4、行 416.2/663.8），纯 transform | 免真 FLIP 量测；帧确定无随机 |
| B 交错 | 偶数索引上排、奇数下排，轨迹互不对穿 | 乱排轨迹会恶性穿帮 |
| B 脉冲 | f58–64 brightness 0.78，filter 仅窗口内条件挂载 | 摘罩判例；窗口外挂 filter 毁真静止 |
| C 斜缝 | SVG 双线：16px 墨 #2f2f2f 底 + 10px 白核，12° 斜角 | 斜缝白线是漫画感命门；直缝读作分屏工具 |
| C 保活 | 定格 18f 各格 scale 缓推 +3%/+5.5%/+8% | 三格全静读作截图拼贴 |
| 收尾 | A 68f / B 81f / C 93f 真静止（≥40f） | R1；C 摘罩帧与扩张终值对齐防跳变 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- C 三格必须是**同一主体的不同机位**——三格塞不同内容读作 bento
  排版不是漫画分格，语义就散了
- 三式都吃拍点、声音强依赖：A 逐格一声啪、B 起飞与脉冲各一声、
  C 逐格咔咔三声（sound-design §4.5）；不踩拍的分格只是布局动画
- 同片分格系 ≤1 段——格子语言辨识度太强，两段就撞
- A 与 wall-reveal-moves 别同片连用（都是"墙"，观众分不出
  入场还是节奏器）

## 参考实现
demos/rhythm/panel-grid-moves/
（ComicPanelSplit.tsx / FlipGridReflow.tsx / GridFlashMosaic.tsx）

## Reference implementation (Remotion)

- demos/rhythm/panel-grid-moves/ComicPanelSplit.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/rhythm/panel-grid-moves/ComicPanelSplit.tsx
- demos/rhythm/panel-grid-moves/FlipGridReflow.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/rhythm/panel-grid-moves/FlipGridReflow.tsx
- demos/rhythm/panel-grid-moves/GridFlashMosaic.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/rhythm/panel-grid-moves/GridFlashMosaic.tsx

The component imports shared fixtures from `demos/_fixtures` and helpers from `assets/lib` in the repo; SKILL.md there documents the render workflow.


## Flow

1. **Read the recipe**
   Prompt = when to use, intention, parameter table with typical values and how each one feels, known pitfalls. Treat values as calibrated starting points.
2. **Get the code** — tool: git
   `git clone https://github.com/Vincentwei1021/video-shotcraft && cd video-shotcraft && npm install`
3. **Register + render** — tool: remotion
   `npx remotion render <CompositionId> out.mp4   # component: demos/rhythm/panel-grid-moves/ComicPanelSplit.tsx, demos/rhythm/panel-grid-moves/FlipGridReflow.tsx, demos/rhythm/panel-grid-moves/GridFlashMosaic.tsx`
4. **Or re-implement**
   Port the timing/easing from the recipe to HTML + WAAPI (gimgs motion contract) or any engine; keep the same segment windows and easing.

## Render

Clone https://github.com/Vincentwei1021/video-shotcraft (npm install). The component lives under demos/{category}/{name}/ and imports shared fixtures from demos/_fixtures and helpers from assets/lib. Copy it (with those imports) into a Remotion project, register a <Composition> with the template's width/height/fps/duration in Root.tsx, then `npx remotion render <CompositionId> out.mp4`. SKILL.md in the repo documents the full Claude Code / Codex workflow. The prompt below is the shot recipe (timing, easing, parameter table, pitfalls) — enough to re-implement the shot in HTML/WAAPI or another engine if you prefer.

## Contract

React/Remotion composition (TSX) from the open-source video-shotcraft library (Apache-2.0). It is not a browser-playable template: clone the repo, register the component in a Remotion project and render with `npx remotion render`. The recipe (prompt) describes timing, easing and parameters so you can also re-implement the shot in any engine.