# Neon frame forerun

A steep-perspective neon frame draws itself in from both ends, the page brightens from dark inside it, components land from above with matching soft shadows, and background neon tubes dim out at the end.

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

## Params

_No params._

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

## Prompt

## When to use

A "grand entrance" ritual for a UI panel in a dark brand film (the frame arrives first, content lands after); a feature area's first appearance; the opening of a neon/cyberpunk-toned segment.

## Intention

Frame first, then fill it in: the neon wireframe draws itself in from both ends like runway lights, announcing "something is about to appear here"; as the page brightens from dark inside the frame, components land from above with a trailing shadow — the audience watches the interface being "placed" into the frame. The three layers of motion (frame drawing / page lighting up / component landing) must **lock together in sync**: the landing progresses in step with the lighting-up, finishing slightly after, and the frame's light eventually merges into the panel's glow. The background neon tubes dim out at the end, handing all the brightness to the lead subject to close the shot.

## Duration & energy

- Duration: Frame drawing ~0.6s + lighting-up and landing ~2s + background dim-out ~0.8s; whole segment 4–4.5s
- Energy: Medium-high (three layers of action stacked, all serving the same entrance)

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

## 意图
先立框后填肉：霓虹线框像跑道灯一样两头奔画圈出位置，宣告
"这里要出现东西"；页面在框内由暗转亮的同时，组件从空中带影
贴落——观众看见界面被"安放"进框里。三层动作（框奔画/页面点亮/
组件贴落）必须**同步咬合**：贴落进程与点亮进程同步推进、稍滞后
收尾，框光最终并入面板辉光。背景霓虹管群终段熄灭，把亮度让给
主角完成收束。

## 动效核心
- 霓虹框：强透视直角框（梯形），自左缘中点两头同时奔画（描边
  动画），带辉光亮头；成型后框光渐并入面板辉光
- 页面点亮：框内面板由暗灰到亮的显影推进（lit 窗口 ~54f）
- 组件贴落：框内全部元素套 FloatWrap（graze-face-tour 同款模式）：
  初始抬高 100–150px、easeFall 加速贴落、同形软影随高度收敛、
  侧栏自上而下/主区自上而下错峰落位；贴落窗口与点亮窗口同步
  推进、稍滞后 ~20f 收尾
- 背景：大霓虹管群先亮衬气氛，终段中亮尾熄（先中间后两端熄灭）

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 框奔画 | ~18f 两头对奔 | 单头描画读作画图；>30f 观众等不及内容 |
| 悬浮高度 | 100–150px、影随高度收敛 | 判例：高度过小+启动过早=影子不可感（v3 第 1 轮返工加大 1.7x 并延后） |
| 贴落窗口 | 与点亮窗口同步、滞后 ~20f 收尾 | 贴落先于点亮完＝黑屋子里落家具；滞后太多读作两段戏 |
| 错峰 | 错开起点、下落重叠并行 | 串行等待被裁（掉落节奏通用判例） |
| 背景熄灭 | 终段中亮尾熄 ~22f | 不熄灭主角不突出；同帧全熄读作断电 |
| 贴落粒度 | 行/卡级（原片为逐 UI 卡片级，更细） | 粒度越细越贵；行级已验证可读 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 悬空贴落=clickup 语言核心签名（已验证的口味信号），本卡
  与 graze-face-tour 共用 FloatWrap 模式——影子不可感等于没做
- 与 brand-frame-snap 分工：那张是品牌框咔哒定位的
  节拍戏；本卡是框先行+内容贴落的登场仪式，框只是序幕
- 衍生方向备忘：视角旋转变体（镜头左→右弧线旋转+同时贴落）
  曾被裁"改改再看"（要求所有组件同时贴落），已收敛进 neon-frame-orbit-drop 卡

## 参考实现
demos/ui-entrance/neon-frame-forerun/
（NeonFrameForerun.tsx）
原片出处：clickup-30.mp4

## Reference implementation (Remotion)

- demos/ui-entrance/neon-frame-forerun/NeonFrameForerun.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/neon-frame-forerun/NeonFrameForerun.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/neon-frame-forerun/NeonFrameForerun.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.