# Basic 3D Scene Tour

An impress.js-style spatial deck: cards scattered through 3D space with distinct position/rotation/scale, the camera flies to align to the inverse of each step's pose, ending pulled back to an OVERVIEW.

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

## Params

_No params._

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

## Prompt

## When to use

Spatializing a concept/roadmap/three-step story; replacing flat slides with a "different spatial viewpoint per step" feel.

## Intention

Turn "turning a page" into "traveling through the space of an idea": each card has not just a position but a pose (step two tilts 40° sideways, step three rotates the whole frame 90°), and as the camera aligns to it, the viewer's world rotates too — the spatial change itself becomes the ritual of "entering a new chapter."

## Duration & energy

- Duration: About 6.0s (180f@30fps; four stops, three flights of 0.96s each).
- Energy: Medium (each transition is a spatial surprise; the dwell segments are quiet reading time).

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

## 意图
把"翻页"变成"在想法的空间里旅行"：每张卡不仅有位置还有姿态（第二步侧转 40°、第三步整个画框转 90°），相机对齐它时观众的世界也跟着转——空间变化本身成为"进入新章节"的仪式感。

## 动效核心
- 核心配方一行：**camera = stepTransform.inverse()**。每步只写卡片自己的 pose（x/y/z/rx/ry/rz/s），相机变换按 `scale(1/s) rotateZ(-rz) rotateY(-ry) rotateX(-rx) translate3d(-x,-y,-z)` 取逆，顺序严格相反
- 四站姿态各有戏剧点：STEP01 原点正视 → STEP02 右移 520px + ry−40°（世界左转）→ STEP03 rz90°（画框侧躺，相机跟着转正它）→ OVERVIEW s=3.1（相机 1/3.1 拉远总览）
- 飞行链式插值：三段 `flyAt=[0.22,0.48,0.76]` 各 0.16（inOutCubic），cam 从当前值向下一站 lerp——中断任一段都是合法姿态
- enter/exit 聚焦：`af`（累计飞行进度）与卡片序号距离决定 `opacity 0.28–1 + blur 0–3.5px`；OVERVIEW 段强制全员点亮（`max(1-d, over)`）
- OVERVIEW 卡本身放大 3.1 倍但内容预除 2.2——总览时它是"标题牌"而非巨物

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 站点姿态 | 每站至少一个新变换维度 | 只挪 x/y 是平移幻灯片；rz 站（画框旋转）是记忆点，一支片用一次 |
| 飞行时长 | 0.16（约 0.96s） | 有旋转的段别快于 0.12，观众需要时间理解"世界在转" |
| 停留间隔 | 0.10–0.12 | 读卡位；卡内文字多时优先加停留而不是减飞行 |
| OVERVIEW 缩放 | s=3.1（相机拉远 1/3.1） | 值越大总览越"高空"；保证所有卡都进画框再留 10% 边距 |
| 聚焦衰减 | opacity 0.28 底 + blur 3.5px 峰 | 底值别低于 0.2——离焦卡要"在场"，纯黑会丢空间感 |
| perspective | 1000px | 与最大 |z|（520）比值约 2:1；更深的 z 需同步加大 persp 防畸变 |

## 已知坑
- 逆变换的旋转顺序（Z→Y→X 反着正变换的 X→Y→Z）不能乱——乱序在单轴旋转时看不出来，多轴复合站会歪
- 卡片 pose 写在卡自身 transform 和相机公式两处消费，加站只改 poses 表，两处 transform 字符串别动
- rz90° 站的卡内文字会跟着躺倒，相机转正后才可读——这是设计（转正瞬间"啊看懂了"），但该站文案要短
- OVERVIEW 后无返程，作段落收尾用；要循环回 STEP01 就在末尾加一段 fly back（cam 再 lerp 回 poses[0]）

## 参考实现
demos/camera/basic-3d-scene/
（Basic3DScene.tsx）

## Reference implementation (Remotion)

- demos/camera/basic-3d-scene/Basic3DScene.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/camera/basic-3d-scene/Basic3DScene.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/basic-3d-scene/Basic3DScene.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.