# Steep-tilt page glide

A fixed camera holds an upright page in a strong 60° perspective tilt (near right, far left); the page glides sideways across the lens on its own (the object moves, not the camera), with speed-streak afterimages and floating text settling as it lifts from dark to light.

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

## Params

_No params._

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

## Prompt

## When to use

A showcase glide through long pages/multi-section UI (content passes the fixed camera in sequence); dark neon tone; a "lateral sweep" shot that complements the surface-hugging camera card

## Intention

The page becomes a slanted wall: the camera is locked down, a strong 60° perspective pins the right edge close to the lens and lets the left edge vanish toward the vanishing point, while the page glides sideways along its own plane — content passes by in sequence like train cars. The linchpin is **the object moves, the camera doesn't**: perspective/origin/rotY stay constant throughout; the only thing that moves is the page's local translateX — moving the camera would turn this into camera-move flair, when the point here is "the page showing itself off." The angle converged on exactly 60° over three rounds (-45° "not quite" → -53° "a bit more" → -60° chosen).

## Duration & energy

- Duration: 4s (120f) single shot; can extend as the page gets wider
- Energy: Medium-high (perspective flair plus sustained motion, but the pace stays even)

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

## 意图
把页面立成一堵斜墙：镜头钉死不动，60° 强透视让右缘贴脸、左缘
消失在灭点，页面自己沿自身平面横向滑移——内容像列车车厢一样
依次掠过。命门是**物动镜不动**：perspective/origin/rotY 全程常数，
唯一动的量是页面局部 translateX——镜头一动语义就变成运镜炫技，
这里的戏是"页面在自我展示"。角度经三轮收敛为精确 60°
（-45°"不对"→-53°"再大一点"→-60°选中）。

## 动效核心
- 镜头常数：perspective 1100、origin 30% 58%、rotateY(-60°)+
  rotateZ(-2°)，transformOrigin left top，全程一个数不变
- 页面：超宽面板（6200×2400@内容坐标），沿局部 X 轴 +60→-4100
  滑移，bezier(0.3,0.12,0.72,0.9)——起步柔和后近匀速，尾段斜率
  不归零（不安定停死）
- 速度重影：拖尾层=过去时刻（f-2.5/f-5）的局部位置重投影，
  透明度 ∝ 滑移速度（快时重影浓）
- 悬空贴落：页面元素 FloatWrap 悬浮 230–280px 带同形软影，随
  滑移进程错峰贴落（巡礼语法）
- 揭亮：起始面板压暗 0.7，~1.4s 揭到全亮；左缘额外渐变阴影同退

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 倾斜角 | rotateY **-60°**（用户精确定值） | -45° 被裁"角度不对"、-53°"再大一点"；>-70° 内容读不清 |
| 运动模型 | 镜头全常数、页面自移 | **命门**——镜头横移版被裁"镜头是固定的，页面本身往其3d空间的横面方向移动" |
| 滑移曲线 | 尾段斜率不归零的 bezier | 中途停死被抓（v4 返工）；全 linear 少了起步呼吸 |
| 重影 | 透明度∝速度，双层 f-2.5/f-5 | 恒定重影读作重像故障 |
| 页面宽度 | ≥3 屏内容 | 太窄滑两秒就完，撑不起一镜 |
| 悬空贴落 | 错峰（巡礼语法）+ 影随高度 | 语义判例见 graze-face-tour/orbit-drop 三卡族 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 角度判例：透视角是本卡身份，实战微调范围建议 55–65°，出这个
  区间等于换手法
- 与 graze-face-tour 分工：那张镜头动（贴面游走）、页面静；本卡
  镜头静、页面动。同段落二选一
- 与 runway-ground-skim 分工：那张是俯角平躺+垂直贴落+立起；
  本卡是侧立+横向滑移，轴向正交
- 超宽页面手绘成本高；实战可用真实长截图代替（滑移逻辑不变）

## 参考实现
demos/camera/steep-tilt-glide/
（SteepTiltGlide.tsx）
原片出处：clickup-30.mp4

## Reference implementation (Remotion)

- demos/camera/steep-tilt-glide/SteepTiltGlide.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/camera/steep-tilt-glide/SteepTiltGlide.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/steep-tilt-glide/SteepTiltGlide.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.