# Runway ground skim entrance

From a low ground-skim angle, UI cards rain down fast and land with zero bounce, then the whole page stands up and squares to camera.

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

## Params

_No params._

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

## Prompt

## When to use

Entrance for a dashboard/card-flow interface (content "falls from the sky to complete itself"); a squaring-up close after a low-angle showcase segment; a heavy "land-all-at-once" version of the ClickUp-style hover-and-drop language

## Intention

Shoots the interface like a runway: in a low-angle perspective, UI cards hover at different heights, then rain down fast in reading order (row-first, left→right) — the falling feeling is crisp decisiveness. Three critical rules: **massively overlapping in parallel** (starting points offset by only 1.5f, each fall taking 9f ⇒ there are always 5–6 cards falling at once in the air, "almost together but with a ripple feel"; a version with two serial waiting rounds was rejected), **zero bounce** (they stop dead on landing; any bounce was rejected), and **fast** (a 9f fall; a 15f version was rejected as "needs to be a bit faster"). Once they've all landed, the page stands up from lying flat (rotateX 66°→0°) and the camera pulls back to center, taking the viewer from "watching the show" back to "looking at the interface."

## Duration & energy

- Duration: Hover display ~0.4s + drop ~1.2s + stand up & square ~1.8s; full shot 4s
- Energy: High (the falling feeling is the spectacle, standing up and squaring is the resolution)

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

## 意图
把界面拍成跑道：低角度透视里 UI 卡片悬空在不同高度，随后按界面
位置顺序（行优先左→右）一阵急雨式贴落——掉落感=干脆利落。
三个命门：**重叠并行**（起点只错 1.5f、下落 9f ⇒ 空中恒有 5–6 张
同时在落，"几乎一起但有涟漪感"；串行等待两轮被裁）、**零回弹**
（着地即停，弹起被裁）、**快**（下落 9f，15f 版被裁"快一点"）。
落齐后页面从躺倒立起（rotateX 66°→0°）、镜头拉远居中，观众从
"看戏"回到"看界面"。

## 动效核心
- 机位：低角度强透视（rotateX ~66° 起），页面平躺如跑道
- 悬空：卡片初始悬浮 560–880px（高度错落），空中卡追光提亮
  ~1.35x（判例：被环境压黑带吞掉=悬空不可感）
- 贴落：起点 = 6 + i×1.5f + jitter(≤1.2f)（保序），下落 9f 重力
  加速（距离∝t²），着地即停零回弹
- 立起：全员落定后 rotateX 66°→0° + 镜头拉远归中（easeRise），
  终态正视整页
- 压黑带控制在 ~32%，给空中卡留可见度

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 起点差 | 1.5f/张（jitter ≤1.2f 不乱序） | 3f 版被裁"不需要一个落下了再启动第二个"；0 差读作开关（那是 orbit 的同帧语法） |
| 下落时长 | 9f 重力加速 | 15f 被裁慢；<6f 读不出下落方向 |
| 回弹 | 零（着地即停） | 压弹 4.5% 版被裁"去掉弹起"——掉落感=干脆利落 |
| 悬浮高度 | 560–880px 错落 | 同高读作阅兵；>1000px 落地时间拉长 |
| 空中提亮 | ~1.35x 追光 | 不提亮悬空不可感（返工判例） |
| 立起段 | rotateX 66→0 + 拉远，~56f | 只落不立起=没有收束；立起太快读作弹板 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 贴落节奏语义（三卡判例族）：本卡=急雨式重叠错峰；
  graze-face-tour=巡礼错峰；neon-frame-orbit-drop=同帧齐落。
  按镜头语义选，错用即被裁
- 与 deck-deal-flyin 分工：那张是卡片飞入列队（水平方向运动）；
  本卡是垂直贴落+页面立起的两段式，掉落感是本体
- 立起段原片无对应参考（用户口述新增），终态版式对齐 clickup11
  正视图

## 参考实现
demos/ui-entrance/runway-ground-skim/
（RunwayGroundSkim.tsx）
原片出处：clickup-30.mp4 ≈46–50s

## Reference implementation (Remotion)

- demos/ui-entrance/runway-ground-skim/RunwayGroundSkim.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/runway-ground-skim/RunwayGroundSkim.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/ui-entrance/runway-ground-skim/RunwayGroundSkim.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.