# Shot transitions six

Six shot hand-off techniques — flash-cut, fly-through, focus relay, black card, whip-pan, mask-wipe — chosen by energy delta.

- Category: transition · Tags: shotcraft, remotion, transition
- Spec: 960×540 @ 30 fps · 1.43s (16:9)
- License: Apache-2.0 · Tier: free
- JSON: https://gimgs.net/motion/shot-transitions.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/shot-transitions/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/shot-transitions.html

## Params

_No params._

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

## Prompt

## When to use

Any seam between two shots (a technique card: once shots are laid out at the storyboard stage, pick one style per seam)

## Intention

Every other shot card in the library only handles its own entrance and exit — how shots actually "connect" has never had a vocabulary. A recognized, excellent launch film (Linear Releases/Agent, frame-by-frame reverse-engineered 2026-07-11) never uses a single hard cut throughout: every scene change relies on either a depth journey, a focus relay, or a black title card to build momentum.

## Duration & energy

- Duration: n/a (a technique card; each style's frame cost comes from its parameter sheet, carved out of the neighboring shots' budget)
- Energy: n/a (a technique card, doesn't occupy an energy slot)

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

## 意图
库内各镜头卡只管自己的入场和收尾，镜与镜"怎么接"一直没有词汇——
接缝裸切会把逐镜头攒出的电影感一次漏光。公认优秀的发布片
（Linear Releases/Agent，2026-07-11 抽帧逆向）全程没有一次裸切：
换景要么靠深度旅行、要么靠焦点接力、要么靠黑场字卡蓄力。

## 六式选型

| 式 | 做法 | 适用接缝 |
|----|------|----------|
| A 推进流白 flash-cut | 前镜相机推进，切点跨骑一层白闪盖住换页 | 交互穿透、能量相近的页面→页面（库内已有，收编）|
| B 穿暗场直航 | 相机顺运动方向推出前景→纯暗场滑行几帧→后景从景深迎面放大而来，一条 take 不切 | 高能量→高能量的场景跳转；暗色调全片的主力转场 |
| C 虚焦接力 | 前景滑出焦平面（blur 渐深）同时后景反向收焦入场，焦点当剪辑点 | 同页面内区块→区块；文档/长页游览的分段 |
| D 黑场字卡 | 前镜收尾淡入黑场，字卡打字机/压印出现，再交棒后镜 | 章节级分段 + 呼吸位二合一（paper-title-card 的暗场变体）|
| E whip-pan 甩镜 | 机位一拍横甩到下一场景，中段运动模糊糊到不可辨，借糊帧换景 | 快节奏功能段连打（高能量→高能量的轻快款，比 B 式省帧提速）|
| F mask-wipe 穿窗 | 页面内真实元素（卡片）放大成全屏窗口，新场景从窗内长出接管 | 语义化接缝：功能总览→该功能详情（"点开这张卡进入它的世界"）|

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A flash-cut | `assets/lib/FlashCut.tsx`，from = 切点 − 5，两侧各 5f | 用法详见 type-and-filter 卡；白闪只盖硬切，不当装饰光效（Q4）|
| B 暗场滑行 | 前镜推出 8–12f → 暗场 4–8f → 后景放大入场 10–14f；后景从 scale ~0.6 + blur 起步收焦 | 暗场段不能全黑死场——保留背景微渐变/尘点让"still moving"可感；滑行帧过长读作断片，>10f 须有元素在动；推出/迎入的快速运镜可包 `<CameraMotionBlur>`（参数见 deck-deal-flyin 运动模糊行） |
| B 运动方向 | 出与入同向（前镜向右推出→后景从右迎来），速度曲线连续不回摆 | 方向不接读作两条片子硬拼；参考片 Releases 全程一条 take 的秘密就是方向连续 |
| C 焦点交换 | 前景 blur 0→8px 同时后景 8px→0，交叉窗口 10–16f；两景错开 2–4f 起跑 | 同帧起跑读作整屏糊掉；浅景深要贯穿该段落而非突然出现（DoF 语言先立后用）|
| D 黑场字卡 | 前镜淡出 6–10f → 字卡段（参数走 paper-title-card，底色换暗场）→ 淡入后镜 6–10f | 暗底字卡的字色用页面底色（浅色）/等宽字才不像报错弹窗；一支 30s 片 D 式 ≤2 次，多了节奏碎 |
| E 甩镜基本款 | 两端各 hold ≥20f → 甩动 8f 跨约 1.5 屏（ease-in-out 陡曲线）→ 直接落位；`<CameraMotionBlur shutterAngle={200} samples={8}>` 只包甩动段 | 跨度按"峰值速度 ≥300px/f"配，不足则糊不透露出换景穿帮；两景同一水平线上拼接（页面空间同 y），甩完即停 |
| E 甩镜急刹款 | 前 70% 路程用 30% 时间（糊段）→ 后 30% 路程 ease-out 长尾 ~48f 滑入落位 | 适合落点是"要读内容"的镜头——长尾给观众视线一个追上的坡；长尾 >60f 偷走后镜入场，宁短勿长 |
| F 穿窗 | 元素 45f 放大成全屏（单段 bezier），窗内新景从 ~0.42 缩放反向补偿长到 1，元素脸前半段渐隐（opacity 1−t·2.2） | 窗几何与窗内景必须同步驱动（同一个 t），异步读作穿帮；被放大元素用高清纹理（Q2，全程被特写）|
| F 穿窗纵深款 portal-wipe | 窗放大 40f 用 bezier(0.7,0,0.3,1) 先慢后快；窗内**只 2 层**视差（远景整页缩略系数 0.08 + 近景 2 卡 0.3，不加 blur），穿窗完成后 8f 缓停 → 静止 ≥30f 读清新景 | 层数/散开是可读性命门——3 层+0.85 散开+blur 版被裁，收敛后过；穿完必须真停，视差飘着不停偷走后镜阅读 |

## 已知坑
- 分镜表阶段就逐接缝标注转场式（写进"关键动效"列），逐镜头阶段才补
  等于全线挪帧——转场占用的帧从相邻镜头预算划走，规矩同 hold 预算（R3）
- B/C 两式借鉴自 Linear 发布片抽帧逆向（2026-07-11，进化轮 #3），
  非用户判例——是默认建议不是令，与判例冲突时判例优先
- B 式对源素材要求高：后景迎面放大 = 纹理被放大看，低倍截图先过
  审美准则 Q2 的高分辨率栅格化技法再上
- 转场不叠加：一个接缝只用一式；B 式暗场里再加 flash 白闪读作穿帮
- E/F 式参数经占位素材调校+真实素材转正，非用户
  实战判例——单例判例，与判例冲突时判例优先；E 基本款/急刹款按
  后镜性质二选一（后镜自带入场动效→基本款；后镜靠内容说话→急刹款），
  同片混用两款算两式各记一次
- F 式窗内新景语义应是被点开元素的"详情世界"（实战接真实详情页
  截图）——窗里塞无关场景语义断裂，沦为花哨擦除
- F 纵深款参数系灰阶占位调校起点、未经真实素材验证；
  参考实现 demos/transition/shot-transitions/PortalWipeV2.tsx

## 参考实现
A 式：template/src/aifl/Main.tsx flash-cut 层（组件 `assets/lib/FlashCut.tsx`）；
B 式（穿暗场直航）：demos/transition/shot-transitions/DarkTunnelTransition.tsx；
C 式（虚焦接力）：demos/transition/shot-transitions/FocusHandoffTransition.tsx；
D 式（黑场字卡）：demos/transition/shot-transitions/BlackCardTransition.tsx；
E 式（whip 甩镜）：demos/transition/shot-transitions/WhipPanReal.tsx / WhipBrakeReal.tsx；
F 式（遮罩擦除）：demos/transition/shot-transitions/MaskWipeReal.tsx（纵深款 PortalWipeV2.tsx 同目录）。

## Reference implementation (Remotion)

- demos/transition/shot-transitions/BlackCardTransition.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/shot-transitions/BlackCardTransition.tsx
- demos/transition/shot-transitions/DarkTunnelTransition.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/shot-transitions/DarkTunnelTransition.tsx
- demos/transition/shot-transitions/FocusHandoffTransition.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/shot-transitions/FocusHandoffTransition.tsx
- demos/transition/shot-transitions/MaskWipeReal.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/shot-transitions/MaskWipeReal.tsx
- demos/transition/shot-transitions/PortalWipeV2.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/shot-transitions/PortalWipeV2.tsx
- demos/transition/shot-transitions/WhipBrakeReal.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/shot-transitions/WhipBrakeReal.tsx
- demos/transition/shot-transitions/WhipPanReal.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/shot-transitions/WhipPanReal.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/transition/shot-transitions/BlackCardTransition.tsx, demos/transition/shot-transitions/DarkTunnelTransition.tsx, demos/transition/shot-transitions/FocusHandoffTransition.tsx, demos/transition/shot-transitions/MaskWipeReal.tsx, demos/transition/shot-transitions/PortalWipeV2.tsx, demos/transition/shot-transitions/WhipBrakeReal.tsx, demos/transition/shot-transitions/WhipPanReal.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.