# Neon frame orbit drop

Neon frame draws in, then the camera arcs across the page as every element drops into place on the same frame.

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

## Params

_No params._

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

## Prompt

## When to use

A single-page UI's one-time grand entrance (vs. a tour/reveal-by-section); the hero reveal for dark neon-toned sequences; sister shot to neon-frame-forerun

## Intention

A twin variant of neon-frame-forerun: the frame still leads and content still drops in after, but here the camera is not static — it arcs continuously from a left-side view of the page to a right-side view, and while it orbits, every component drops into place from above. The critical rule is **simultaneous landing**: all components and text rise and land on the same frame, with soft shadows converging and vanishing in sync — this is the grammar of a "unified entrance" (precedent: a staggered-drop version was rejected — "all components and text should drop into place from the air at the same time"). Staggered drops belong to tour shots (graze-face-tour/runway); a one-time single-page reveal must land as one, and the rhythm semantics must not be mixed.

## Duration & energy

- Duration: Frame draw ~0.5s + orbit & simultaneous drop ~2.5s + settle ~1s; full shot 4–4.5s
- Energy: Medium-high (one big one-time move, static once it settles)

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

## 意图
neon-frame-forerun 的孪生变体：同样框先行、内容后落，但镜头
不是固定的——从页面左侧视角连续弧线旋转到右侧视角，旋转进行
的同时全部组件从空中贴落。命门是**同时贴合**：所有组件和文字
同帧起落、同帧贴合、软影同步消失——这是"整体登场"的语法
（判例：错峰版被裁"应该是所有组件和文字同时从空中往下贴合"）。
错峰贴落属于巡礼镜（graze-face-tour/runway），一页一次性亮相
必须齐落，节奏语义不能混用。

## 动效核心
- 霓虹描框：渐变霓虹框 ~14f 奔画成型（同 neon-frame-forerun）
- 视角弧线：rotateY +38° → -26° 连续弧线（透视原点 30%→64% 随动
  近似相机环绕），贯穿全片
- 同时贴落：全部元素统一 LAND 时刻（归一化 ~0.52）——同帧离地
  悬空、同帧空中下降、同帧贴合；FloatWrap 同形软影（blur/offset/
  opacity 随高度）全体同步收敛
- 背景霓虹管框群衬场，主面板落定后让位

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 贴落同时性 | 全元素同帧起落（零错峰） | **命门**；任何错峰都会读成巡礼语法（判例裁决原话见上） |
| 视角弧线 | rotateY +38°→-26°、透视原点随动 | 弧度小读作抖动；只转不落=空转 |
| 旋转×贴落耦合 | 贴落窗口居中于旋转行程 | 旋转完才落=两段戏；落完还在转=收不了尾 |
| 悬浮高度/软影 | 同 graze-face-tour（100–180px、影随高度） | 影不可感=没做（累计判例） |
| 描框 | ~14f 奔画 | 同 neon-frame-forerun |

## 已知坑
- 参数经占位素材两轮调校通过，非实战定稿，首次实战须以真实素材回验
- **贴落节奏语义判例**（本卡与 graze-face-tour 互为反例）：
  巡礼镜=错开起点+重叠并行下落；整体登场镜=全体同帧。选错语法
  两边都会被裁
- 与 neon-frame-forerun 分工：那张镜头固定、错峰贴落+页面点亮
  三层咬合；本卡镜头旋转+同帧齐落。同段落二选一，别连用（同框
  语言重复）
- 弧线旋转是透视原点近似而非真实 3D 相机环绕，极端角度下框辉光
  形变略平——实战若需大角度环绕考虑真 3D 场景

## 参考实现
demos/ui-entrance/neon-frame-orbit-drop/
（NeonFrameForerunOrbit.tsx）
原片出处：无对应原段

## Reference implementation (Remotion)

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