# Cursor Flyover Tour

After a full-page overhead view fades in, the camera flies in turn to zoom-in close-ups on four corners, an SVG cursor tracking along to point and leave click ripples.

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

## Params

_No params._

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

## Prompt

## When to use

A single-page product feature tour: one continuous shot walking viewers through four functional areas, with the cursor acting as a "tour guide's finger."

## Intention

A shot-saving alternative to "four features, four cuts": one continuous camera strings the four corners into a single tour route, with the cursor acting as the viewer's attention proxy — wherever it goes and clicks, that's where the viewer looks. Spatial continuity also lets the positional relationships between features get remembered along the way.

## Duration & energy

- Duration: About 6.0s (180f@30fps; overhead 0–1.2s · four steps, each 0.7s transition + 0.5s dwell).
- Energy: Medium (a steady cruise, with rhythm punctuated by click ripples).

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

## 意图
替代"四个功能四段剪辑"的省镜方案：一个连续相机把四个角串成一条参观动线，光标是观众的注意力代理——它到哪、点哪，观众就看哪。空间连续让功能之间的位置关系也被顺带记住。

## 动效核心
- 相机是查表步进：CAM[0] 俯瞰（scale 0.8 居中）→ 四角特写（scale 1.72，tx/ty 各角），五通道 `tx/ty/s/cx/cy` 用 `acc` + inOutCubic 插值
- 变换公式 `translate(50-tx*s%, 50-ty*s%) scale(s)`——tx/ty 是"相机对准点"，改表即换巡览路线
- 四段窗口 `[0.20,0.32][0.40,0.52][0.60,0.72][0.79,0.91]`：过渡 0.12 + 停留 0.08，等长节奏像"参观脚步"
- 光标（SVG 箭头 + 投影）坐标 cx/cy 与相机同表同插值——**相机和光标是一个系统**，永远同时到位；光标 `scale(1/s)` 抵消画面缩放保持视觉等大
- 每段落位瞬间（WIN[i][1] 起 0.055）触发点击涟漪：26px 圆环从 0.3 扩到 1.9 倍并淡出，光标头同拍闪白
- 开场 0–0.14 整页从 blur 5px 淡入聚焦

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 特写倍率 | s=1.72（俯瞰 0.8） | >2.2 时占位截图纹理会糊，换真实高分截图后可推到 2.5 |
| 步进节奏 | 过渡 0.12 / 停留 0.08 | 停留是读功能位，短于 0.05 变"扫过"没有"参观" |
| 点击涟漪 | 0.055 时长，scale 0.3→1.9 | 涟漪是节拍器，四次点击均匀落在 0.32/0.52/0.72/0.91——配 SFX click 四连 |
| 光标补偿 | scale(1/s) | 砍掉则特写时光标巨大化；保持"光标是 UI 层"的错觉必需 |
| 巡览顺序 | 左上→右上→右下→左下（Z 形反向） | 改 CAM 表即换路线；保持相邻角相邻访问，对角跳跃会晕 |
| 开场聚焦 | 0–0.14 blur 5px→0 | 与俯瞰同拍完成"这是全景"的交代；直接从特写开跳过它 |

## 已知坑
- 占位截图（窗口 chrome+侧栏+四象限控件）必须换成真实产品截图，四个 cx/cy 光标落点要重新标到真实控件中心
- 相机表的 tx/ty 是内容百分比坐标，截图宽高比变了（如换竖屏）需整表重标
- 光标与相机绑定同一插值意味着"光标先飞相机后到"这类编排做不了——需要解耦时给光标单独一张同结构的表
- 停留段完全静止，1080p 大屏下会显得"卡住"——可给 world 加 ±0.5px 的呼吸位移（确定性 sin），但幅度别过 1px

## 参考实现
demos/camera/cursor-flyover/
（CursorFlyover.tsx）

## Reference implementation (Remotion)

- demos/camera/cursor-flyover/CursorFlyover.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/camera/cursor-flyover/CursorFlyover.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/cursor-flyover/CursorFlyover.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.