# Cube Face Navigation

Content covers all six faces of a 3D cube; the camera goes from a front close-up → pulls back to an isometric view of the edges → alternates turning faces and pushing in, each face's shading computed live from its normal.

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

## Params

_No params._

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

## Prompt

## When to use

A "face-by-face navigation" layout for multi-module products: a spatialized walkthrough of 3–6 sections like Overview/Metrics/Timeline.

## Intention

Upgrade "switching pages" into "rotating a cube": modules aren't parallel tabs but six faces of the same object, and the camera alternates between close-up (reading content) and isometric (seeing the structure), so viewers always know "which face of the whole I'm on." Spatial continuity replaces transitions.

## Duration & energy

- Duration: About 6.0s (180f@30fps; five camera steps, each ~0.7s plus hold).
- Energy: Medium (a steady spatial cruise, with the beat coming from the perspective shift at each face turn).

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

## 意图
把"切页面"升维成"转立方体"：模块不是并列的 tab 而是同一个实体的六个面，相机在特写（读内容）与等轴（看结构）之间交替，观众始终知道"我在整体的哪一面"。空间连续性替代了转场。

## 动效核心
- 六面各自 `rotateX/Y(±90/180°) translateZ(95px)` 贴到 190px 立方体上，`backface-visibility:hidden`，每面独立色相（224/268/330/190/154/34）+ 标题 + 4 条信息条 + 角标 glyph
- 相机走 6 个关键位姿的查表插值（`acc` + inOutCubic）：正面特写（d=235）→ 等轴拉远（rx−22/ry−38/d=−130）→ 右面特写 → 等轴 → 背面特写 → 等轴收尾；特写与等轴的 d 值差 365px，"推近拉远"占透视变化的大头
- 五段窗口 `[0.10,0.24][0.30,0.44][0.50,0.62][0.66,0.78][0.84,0.97]`，段间 hold 读面
- **法线明暗**：每面法线经 Rx·Ry 旋转后取 z 分量，`brightness(0.5+lit*0.62) + saturate(0.8+lit*0.4)`——面转向相机时自然变亮，背离时沉下去，塑料感消失
- 开场 0–0.08 整体淡入

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 立方体尺寸 | S=190px，perspective 760px | persp/S ≈ 4 是"能看清棱角又不畸变"的均衡；persp <500 广角畸变强烈 |
| 特写距离 | translateZ(235px) | 越大越贴脸；等轴段 −130 拉远露三面，两值差决定"呼吸幅度" |
| 段窗口 | 每段 0.12–0.14 + hold 0.04–0.06 | 转面段短于 0.1 会看不清路径；hold 是读内容位 |
| 等轴角 | rx −22~−27 / ry 每步 −38~−52 | 等轴必须同时有 rx 和 ry，缺一个就是平面旋转 |
| 明暗系数 | brightness 0.5–1.12 | 下限 <0.4 背面全黑丢体积感；去掉明暗立刻变"纸盒" |
| 面内容 | 标题+信息条+glyph（占位） | 换真实截图时保留每面独立色相底——它是"面身份"的第一识别 |

## 已知坑
- 相机动的是 rig（`translateZ + rotateX/rotateY` 顺序固定），别改成动每个面——法线明暗公式依赖 rig 旋转矩阵
- 六面色相是导航记忆点，全部换成同色系会导致"转了但不知道到了哪一面"
- ry 步进值决定转向哪面（−90 右面 / −180 背面），加減面数需重排 CAM 表并保证 ry 单调（来回摆动会晕）
- 明暗 `max(0, z2)` 有意让背光面全暗——若想要环境光补一点，改成 `0.15 + 0.85*lit` 而不是提 brightness 下限

## 参考实现
demos/transition/cube-navigation/
（CubeNavigation.tsx）

## Reference implementation (Remotion)

- demos/transition/cube-navigation/CubeNavigation.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/cube-navigation/CubeNavigation.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/cube-navigation/CubeNavigation.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.