# Graze face tour

A steep-angle close-up skims low over the UI surface, text initially hovers above the interface with a matching soft shadow, and as the camera moves each piece accelerates down to settle into place.

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

## Params

_No params._

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

## Prompt

## When to use

A tour of feature areas (treating the UI as terrain to skim over); pairs with a dark scene and neon rim light for a "product's inner world" segment; interface content entering region by region.

## Intention

Shoot the UI as terrain: a steep-angle close-up turns the sidebar tree, navigation, and list rows into passing landscape, with shallow depth of field reinforcing the "skimming the surface" feel. The dramatic beat is **text landing from the air**: text/components don't fade in place — they hover above the interface (raised along the 3D z-axis), casting a matching soft shadow onto the interface while airborne, then accelerate down one after another as the camera advances, the shadow converging and vanishing as height decreases — the audience watches the interface "complete itself" as the camera passes. The shadow is the perceptible crux: without it, hovering just reads as an ordinary positional entrance; with it, the spatial relationship is instantly established.

## Duration & energy

- Duration: Single segment 4–5s; can chain multiple segments to extend
- Energy: Medium-high (sustained camera advance plus continuous element landings, high information density)

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

## 意图
把 UI 拍成地形：大倾角特写让侧栏树、导航、列表行变成掠过的地貌，
浅景深强化"贴面"。戏眼是**文字空中贴落**：文字/组件不是原地淡入，
而是悬浮在界面上空（3D z 轴抬高），在空中时往界面投同形软影，
随镜头行进先后加速贴落、影子随高度收敛消失——观众看见界面在
镜头经过时"完成自己"。影子是可感命门：没有影子，悬浮读作
普通位移入场；有影子，空间关系瞬间成立。

## 动效核心
- 机位：CSS perspective + rotateX/rotateY 大倾角（面几乎侧掠），
  沿界面一条路径持续推进；浅景深＝远处 blur 渐强
- 悬浮元素：初始悬浮高度 H≈120–180px（沿面法线方向抬起），
  easeFall 加速下落+软着陆（落地不回弹或极微回弹）
- 同形软影：元素原位渲染模糊压暗投影，blur/offset/opacity 全部
  随当前悬浮高度变化（高＝影大而糊而淡，落地＝影与本体重合消失）
- 错峰贴落：各元素落地时刻按镜头行进方向排布（先经过的先落），
  界面在镜头前"依次完成"
- 长镜可拆段接力：段间用相邻段交叉淡化（判例：透明度窗口不重叠
  会产生黑闪帧）

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 悬浮高度 | 120–180px | <80px 影子和位移都读不出；>250px 落地砸得太重 |
| 影子参数 | blur/offset/opacity 随高度线性收敛 | 影子恒定不随高度变＝贴纸感；落地影必须归零 |
| 贴落错峰 | 按镜头行进方向 0.2→0.85 归一化排布 | 同帧齐落读作开关；乱序落读作 bug；**错峰=错开起点但下落过程重叠并行**，串行等待（一个落完另一个才开始）被裁（runway 判例） |
| 下落曲线 | easeFall 加速+软着陆 | ease-out 下落读作气球飘落，重力感靠加速 |
| 段间接力 | 相邻段交叉淡化 ≥8f | 透明度窗口不搭接会黑闪（返工判例 f100 纯黑帧） |
| 景深 | 远处 blur 渐强 | 全清晰读作平面滚动，浅景深才有"贴面"体感 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 悬空元素别被环境压黑带吞掉（邻候选 runway 判例）：空中元素
  需追光/提亮 ~1.3x，否则悬浮状态不可感等于没做
- 与 space-camera-moves/tension-camera-moves 分工：那两张是相机
  语言本身；本卡=贴面机位 **+ 元素贴落** 的组合签名，缺一半就
  改用相机卡
- **贴落节奏语义判例**（与 neon-frame-orbit-drop 互为反例）：
  本卡巡礼镜=错峰并行；整体登场镜必须全体同帧齐落（那张卡的
  错峰版被裁）。选错语法两边都会被裁
- 原片（clickup-30）是一条连续上行长镜；复刻用三段接力，段落
  切换藏在交叉淡化里——实战若做真单长镜，路径规划成本高得多

## 参考实现
demos/camera/graze-face-tour/
（GrazeFaceTour.tsx）
原片出处：clickup-30.mp4

## Reference implementation (Remotion)

- demos/camera/graze-face-tour/GrazeFaceTour.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/camera/graze-face-tour/GrazeFaceTour.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/graze-face-tour/GrazeFaceTour.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.