# 3D terminal flythrough

Three terminal windows scattered in 3D space; the camera flies between them with a sinusoidal pull-back en route, typing out a command at each stop as results slide out line by line.

- 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/terminal-3d.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/terminal-3d/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/terminal-3d.html

## Params

_No params._

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

## Prompt

## When to use

CLI/workflow demos for developer products: shooting "three commands" as a three-stop journey through space

## Intention

Terminal output is naturally "flat scrolling," an anti-cinematic language; this card spatializes it: each command occupies a real window in space, and the camera visits window by window as if moving through a server room. The pull-back during flight lets the viewer glimpse "there are more windows" — a sense of the whole workflow.

## Duration & energy

- Duration: ~6.0s (180f@30fps; each of the 3 stops ~1.6s dwell + 0.85s flight)
- Energy: Medium (the flight gives motion, the typing gives rhythm; overall a steady, technical narrative)

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

## 意图
终端输出天生是"平面滚动"的反电影语言，这张卡把它空间化：每条命令占据空间中一个实体窗口，相机像穿过机房一样逐窗拜访。飞行途中的拉远让观众瞥见"还有更多窗口"——工作流的全貌感。

## 动效核心
- 三窗各持 pose（x/y/z/ry），相机走**逆变换**：`translateZ(300-pull) rotateY(-ry) translate3d(-x,-y,-z)`——写窗口姿态表即得相机路径
- 两段飞行窗口 STEP `[0.30,0.44][0.64,0.78]`（inOutCubic），途中 `sin(π)*210px` 正弦拉远鼓包——起飞时后撤、到站时贴近，"呼吸式"过渡
- 距离聚焦：每窗按与相机 x 距离算 focus，`opacity 0.34–1 + blur 0–2.2px + brightness 0.7–1`——离焦窗虚化成背景，不抢戏
- 打字机三要素：命令逐字符（0.09 窗口）、光标两种闪烁频率（打字中 40Hz 基快闪 / 打完 26Hz 慢闪）、输出行按 `0.022/行` 错峰从左滑入（−7px→0）
- 打字起点 TYPE `[0.05,0.47,0.81]` 均在到站后——飞行中不打字，注意力不分裂

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 拉远鼓包 | sin(π)×210px | 砍掉后飞行是"平移"没有"起降"；>300 会穿出背景渐变边界 |
| 飞行/停留比 | 0.14 / 0.20 | 停留必须容下打字 0.09 + 输出 0.145 + 读秒余量 |
| 聚焦衰减 | /420px，blur 峰值 2.2px | 分母越小离焦越狠；三窗 x 间距（约 640px）应 >1.5 倍分母 |
| 打字速度 | 命令 0.09 归一化（约 16 字符） | 换长命令保持字符数近似，或按字符数反算窗口宽度 |
| 输出错峰 | 0.022/行，各 0.035 时长 | 4 行输出合计约 0.15；行多时压缩间隔保证停留段内吐完 |
| 窗口姿态 | ry ±16–32°，z −110~+90 | 角度差是"空间散布感"来源；全部朝正前会退化成平面轮播 |

## 已知坑
- 相机是逆变换实现，**窗口自身 transform 与相机公式必须严格互逆**——改姿态表只改 pose 数据，别动两处 transform 字符串
- 命令/输出文案是通用工具链占位（git/npm/log），换项目真实命令时保持"命令短、输出 3–4 行"的信息结构
- 光标闪烁走 `floor(t*26/40)`，dur 改变后闪烁频率跟着变，需目检"打字中快闪、待机慢闪"的对比还在
- 第三窗打字 0.81 起步，输出到 0.955 + settle——TYPE 表后移时留 ≥0.04 尾量，否则末行没进完就切黑

## 参考实现
demos/camera/terminal-3d/
（Terminal3D.tsx）

## Reference implementation (Remotion)

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