# 3D space camera moves

Two 3D spatial camera moves — exploded-view (parts blow apart along Z then reassemble) and drone-dive-landing (a drone dives and lands).

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

## Params

_No params._

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

## Prompt

## When to use

Highlight passages that shoot a flat page as a 3D object; both are "big moves" — at most 2 uses total per film

## Intention

The depth-layer card adds depth to a pan — layers move, the page stays a page. These two go further: the whole page is treated as one 3D solid, and the camera (or the world) performs a live-action-grade maneuver around it. The two moves each cover distinct narrative ground: A says "see what it's made of" (a teardown reveal, Apple-keynote language); C says "a god's-eye view plunging into the hero" (wide shot to close-up focus, overview to focal point).

## Duration & energy

- Duration: A: 5s (full explode–hover–reassemble arc); C: 3–5s single-direction dive
- Energy: High

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

## 意图
depth-layer 卡是给平移加纵深——层在动、页面还是页面。这两式更进一步：
整页被当成一个 3D 实体，相机（或世界）绕着它做实拍级机动。两式叙事
语义各占一格：A 说"看看它由什么组成"（拆解展示，Apple 发布片语言）；
C 说"从全局俯瞰砸到主角"（上帝视角一头扎进 hero 特写，全景→焦点）。

## 两式选型

| 式 | 做法 | 适用段落 |
|----|------|----------|
| A exploded-view | 整页 3D 倾斜后构件沿 Z 轴错峰炸开悬停，一拍后逆序合体震屏收口 | 架构/组成展示："这个产品里有什么"；模块总览段 |
| C drone-dive-landing | 近垂直俯角悬停 → 猛扎俯冲 → 气垫减速停在 hero 卡特写 | 开场定场→入题；全局地图砸进单点的章节启动 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A 空间基座 | perspective 1600 + 整组 scale 0.76 + rotateX 18° rotateY -12° + preserve-3d | 倾角是空间感来源；正视炸开读不出深度 |
| A 炸开 | 各构件 translateZ 60–320px 错落分布，错峰 3f，每层 14f ease-out-back(1.7) | back 回弹给"咔"一声的机械感；深度全同读作整页浮起 |
| A 合体 | 逆序 ease-in 12f，归位帧 2f 指数衰减震屏（幅 ~13px） | 震屏是落锤——没有它合体读作软趴趴的淡入 |
| A 深度锚 | 投影随 z·p 下移变虚 + 底板压暗 22% + 远层 brightness ↓28% | 三个线索缺一层间关系就糊 |
| C 行程 | 同一条 p 驱动 rotateX 72°→0 + scale 0.42→1.35 + translate 收拢；origin 钉死 hero 卡中心（如 518,335） | 一条 p = 一台相机一次机动；分开驱动读作三个动画打架 |
| C 速度曲线 | 主俯冲 25f Easing.in(cubic) 吃 82% 行程 → 气垫 20f Easing.out(poly(5)) 走 18% | 切换帧速度骤降 = 气垫顶住的体感；82/18 比例比帧数更关键 |
| C 氛围 | 全场包 CameraMotionBlur(shutterAngle 220, samples 9)；俯视期页面下方椭圆软影随落地收干 | 软影卖"悬空高度"；blur 卖速度，缺一维就假 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 两式都吃真实截图分层/高清纹理：A 需页面按构件切块截图（顶栏/侧栏/
  卡各自独立成图，整页一张图炸不开）；C 终点是特写，素材先按
  审美准则 Q2 的高分辨率栅格化技法处理
- C 式易错：Remotion 无 Easing.quint，写 Easing.poly(5)（本批实渲踩坑）
- A 式构件布局要绝对定位复刻原页面网格（demo 里 8 层复刻 FakeDashboard
  A），流式布局做不了 per-构件 translateZ

## 参考实现
demos/camera/space-camera-moves/
（DroneDiveLanding.tsx / ExplodedView.tsx）

## Reference implementation (Remotion)

- demos/camera/space-camera-moves/DroneDiveLanding.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/camera/space-camera-moves/DroneDiveLanding.tsx
- demos/camera/space-camera-moves/ExplodedView.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/camera/space-camera-moves/ExplodedView.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/space-camera-moves/DroneDiveLanding.tsx, demos/camera/space-camera-moves/ExplodedView.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.