# Layered depth camera moves

Two layered-depth camera moves: multiplane parallax dolly (3 layers at graded speeds pan out depth) and fake dolly-zoom (subject pinned, background swells inward).

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

## Params

_No params._

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

## Prompt

## When to use

For sections where flat screenshots need to feel like they have depth; use dolly-zoom for dramatic build-up moments (≤1 per film).

## Intention

A whole-page pan is "looking at the page"; layered depth is "being inside the page's space". Parallax dolly adds depth to a lateral pan (Disney's multiplane-camera principle, the same texture seen in Linear's films); the fake dolly-zoom reverses it — the subject stays perfectly still while the whole world presses in, building tension for a dramatic moment.

## Duration & energy

- Duration: Parallax dolly: 4–5s sustained; dolly-zoom: 3–4s single-direction travel.
- Energy: Parallax = Medium (textural); dolly-zoom = Medium-high (mounting pressure)

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

## 意图
整页平移是"看页面"，分层深度是"在页面的空间里"。视差滑轨给横移
加纵深（迪士尼多平面摄影机原理，Linear 片同款质感）；伪 dolly-zoom
反过来——主角纹丝不动、全世界压过来，给戏剧性时刻蓄力。

## 动效核心
- **视差滑轨（3 层）**：背景整页（系数 0.35 + blur 2px + 降饱和
  0.92 + opacity 0.85，退成环境）、中景真实卡切片（系数 0.7，
  主阅读层，无 blur）、前景浮块（系数 1.4 + blur 3px，掠过镜头）。
  同一条 drive 位移乘各层系数
- **伪 dolly-zoom**：主体高清卡固定 px 钉屏中（不参与任何变换）；
  背景层（整页 + 卡群一体）scale 1→2.25 从画面中心膨胀 + blur 0→3.5px
  渐深；主体落影随进程加深（12→28px offset）强化"钉住感"
- 两款都不拆真实页面排版：整页作为一体成层，独立元素用切片另起层
  ——层间关系是"景深"，不是"页面被撕开"

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 视差层系数 | 0.35 / 0.7 / 1.4 | 梯度 ≥2 倍层间才可辨；层数 ≤4 防过载 |
| 层次锚 | 前后景 blur + 背景降饱和 | 没有 blur/饱和锚，读作"贴片乱飞" |
| dolly 膨胀行程 | scale 1→2.0–2.5 | 行程小了压迫感不足；背景 opacity ≤0.6 防读作故障 |

## 已知坑
- 主阅读层/主体必须高清纹理且无 blur——观众在读它
- 视差与 PageCam rot 3D 的组合（斜拍视差）未验证，实战先渲 still 确认
- dolly-zoom 是"戏剧调料"：一支片 ≤1 次，日常段落用视差滑轨
- 参数经占位素材调校转正，非实战定稿，首次实战后回验

## 参考实现
demos/camera/depth-layer-moves/
（DollyZoomReal.tsx / MultiplaneReal.tsx）

## Reference implementation (Remotion)

- demos/camera/depth-layer-moves/DollyZoomReal.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/camera/depth-layer-moves/DollyZoomReal.tsx
- demos/camera/depth-layer-moves/MultiplaneReal.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/camera/depth-layer-moves/MultiplaneReal.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/camera/depth-layer-moves/DollyZoomReal.tsx, demos/camera/depth-layer-moves/MultiplaneReal.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.