# Quad split parallel scenes

A hard-cut 2×2 grid runs four micro-scenes in parallel, with key beats staggered 3–6 frames apart for an information barrage.

- Category: rhythm · Tags: shotcraft, remotion, rhythm
- Spec: 1920×1080 @ 30 fps · 2.6s (16:9)
- License: Apache-2.0 · Tier: free
- JSON: https://gimgs.net/motion/quad-split-parallel-scenes.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/quad-split-parallel-scenes/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/quad-split-parallel-scenes.html

## Params

_No params._

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

## Prompt

## When to use

A rhythm section for "lots of features happening at once" montage; the density peak of a trailer's mid-section

## Intention

Replace sequential display with parallel density: four things happen in front of the viewer at once, too fast to read each one in detail, but every 3–6 frames one quadrant "moves" — pinning the scan rhythm firmly in place. This is a technique card: the content inside the panels is entirely swappable, the staggered-beat arrangement is the recipe.

## Duration & energy

- Duration: About 2.1s (63f@30fps, no transitions throughout)
- Energy: High (four parallel lines + staggered-beat impact, a standard spot for a BGM chorus)

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

## 意图
用并行密度替代顺序展示：四件事同时在眼前发生，观众来不及逐一细读，但每 3–6 帧就有一个象限"动一下"——扫视节奏被牢牢钉住。这是手法卡：格内内容全部可替换，错拍编排才是配方。

## 动效核心
- 四象限独立场景（内容为示例）：TL 迷你浏览器逐字符打字 + 6 个 tab 依次 outBack 弹入 + 全程 inQuad 慢推 1→1.45；TR mono 打字 + t=0.42–0.54 whip 急推 scale 1→2.1（带 sin 包络 blur 4px）；BL 三词按 0.24/0.46/0.56 逐词 outBack 弹入；BR 五步交互链（pill 滑入→光标贝塞尔巡游→点击缩放→改写文字→卡片弹出）
- **错拍是灵魂**：TL tab 从 0.08 起每 0.13 一枚、TR 急推 0.42、BL 三词 0.24/0.46/0.56、BR 点击 0.42/0.74——任意相邻事件间隔 3–6 帧，永远有东西在动但从不齐动
- 两处打字机光标闪烁频率错开（16 帧周期 vs 14 帧周期 +5 相位），避免同闪
- BR 光标走两段二次贝塞尔（`qBez`）巡游，点击瞬间 `sin(π)` 缩放 0.7 回弹
- 四格底色深浅交替（#c3c6cc/#f2f1ef/#e7e6e3/#b8bcc3）保证格线可读，无需描边

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 错拍间隔 | 相邻事件 3–6 帧 | <2 帧读作同拍（齐动=呆板）；>8 帧密度散掉，轰炸感消失 |
| TL 慢推 | inQuad 1→1.45，origin 50% 78% | 全程缓慢加速的"底噪运动"，让静格也不静；>1.6 会裁掉 tab 行 |
| TR 急推 | 0.42–0.54，scale 2.1 + blur 峰值 4px | 这是全卡最重的一拍，压 BGM 重音；blur 包络必须 sin（进出对称）|
| 打字速度 | TXT1 25 字符 / 0.02–0.95 | 换文案保持字符数近似，否则打字节奏与其他象限错拍关系漂移 |
| BR 交互链 | 滑入 0.12→巡游 0.3→点击 0.42→打字 0.46→二段巡游 0.62→点击 0.74→卡片 0.8 | 五步环环相扣，改任何一步需顺延后续；卡片 outBack 弹出是链尾重音 |
| 底色 | 中性灰阶四档交替 | 换项目主题色时保持相邻格明度差 ≥15%，否则格线感消失 |

## 已知坑
- 这是手法卡：四格内容整体可换（产品截图/录屏/其他动效卡），但**错拍表必须重排**——新内容的关键帧继承原时刻表，否则四格变四个独立视频拼贴
- 2.1s 是密度上限时长，拉长到 3s+ 时每象限需加第二轮事件，否则后半段"没东西动"
- 光标闪烁走 `floor(t*63)` 帧计算，改 dur 后重新核对两个光标的错相位
- 四格同时打字/同时弹入是最常见的退化写法——检查方式：逐帧过一遍，任何一帧不应有两个象限同时发生"重事件"

## 参考实现
demos/rhythm/quad-split-parallel-scenes/
（QuadSplitParallelScenes.tsx）

## Reference implementation (Remotion)

- demos/rhythm/quad-split-parallel-scenes/QuadSplitParallelScenes.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/rhythm/quad-split-parallel-scenes/QuadSplitParallelScenes.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/quad-split-parallel-scenes/QuadSplitParallelScenes.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.