{ "slug": "neon-frame-orbit-drop", "title": "Neon frame orbit drop", "tagline": "Neon frame draws in, then the camera arcs across the page as every element drops into place on the same frame.", "description": "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" ], "tier": "free", "license": "Apache-2.0", "spec": { "width": 1920, "height": 1080, "fps": 30, "duration": 4.6, "aspect": "16:9" }, "kind": "remotion", "params_schema": { "type": "object", "properties": {} }, "default_params": {}, "preview": { "poster": "https://gimgs.net/motion/media/neon-frame-orbit-drop/poster-94b3b0cadc07.jpg", "video": "https://gimgs.net/motion/media/neon-frame-orbit-drop/video-5990c8035204.mp4" }, "variants": [ { "key": "neon-frame-orbit-drop", "label": "neon-frame-orbit-drop", "description": "Neon frame outlines first, then the camera arcs left→right around the page in a continuous curve while every component and piece of text on the page drops into place from above on the same frame (matching soft shadows converge in sync) — a unified, whole-page grand entrance settling into the frame.", "use": "", "video": "https://gimgs.net/motion/media/neon-frame-orbit-drop/video-5990c8035204.mp4", "poster": "https://gimgs.net/motion/media/neon-frame-orbit-drop/poster-94b3b0cadc07.jpg" } ], "credits": { "author": "video-shotcraft (Vincent Wei)", "url": "https://github.com/Vincentwei1021/video-shotcraft" }, "page_url": "https://gimgs.net/motion/neon-frame-orbit-drop.html", "json_url": "https://gimgs.net/motion/neon-frame-orbit-drop.json", "template_url": "https://gimgs.net/motion/neon-frame-orbit-drop/template.html", "play_url": null, "markdown_url": "https://gimgs.net/motion/neon-frame-orbit-drop.md", "updated_at": "2026-09-24T07:40:08.871Z", "prompt": "## When to use\n\nA 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\n\n## Intention\n\nA 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.\n\n## Duration & energy\n\n- Duration: Frame draw ~0.5s + orbit & simultaneous drop ~2.5s + settle ~1s; full shot 4–4.5s\n- Energy: Medium-high (one big one-time move, static once it settles)\n\n## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)\n\n## 意图\nneon-frame-forerun 的孪生变体：同样框先行、内容后落，但镜头\n不是固定的——从页面左侧视角连续弧线旋转到右侧视角，旋转进行\n的同时全部组件从空中贴落。命门是**同时贴合**：所有组件和文字\n同帧起落、同帧贴合、软影同步消失——这是\"整体登场\"的语法\n（判例：错峰版被裁\"应该是所有组件和文字同时从空中往下贴合\"）。\n错峰贴落属于巡礼镜（graze-face-tour/runway），一页一次性亮相\n必须齐落，节奏语义不能混用。\n\n## 动效核心\n- 霓虹描框：渐变霓虹框 ~14f 奔画成型（同 neon-frame-forerun）\n- 视角弧线：rotateY +38° → -26° 连续弧线（透视原点 30%→64% 随动\n 近似相机环绕），贯穿全片\n- 同时贴落：全部元素统一 LAND 时刻（归一化 ~0.52）——同帧离地\n 悬空、同帧空中下降、同帧贴合；FloatWrap 同形软影（blur/offset/\n opacity 随高度）全体同步收敛\n- 背景霓虹管框群衬场，主面板落定后让位\n\n## 参数表\n| 参数 | 典型值 | 调节手感 |\n|------|--------|----------|\n| 贴落同时性 | 全元素同帧起落（零错峰） | **命门**；任何错峰都会读成巡礼语法（判例裁决原话见上） |\n| 视角弧线 | rotateY +38°→-26°、透视原点随动 | 弧度小读作抖动；只转不落=空转 |\n| 旋转×贴落耦合 | 贴落窗口居中于旋转行程 | 旋转完才落=两段戏；落完还在转=收不了尾 |\n| 悬浮高度/软影 | 同 graze-face-tour（100–180px、影随高度） | 影不可感=没做（累计判例） |\n| 描框 | ~14f 奔画 | 同 neon-frame-forerun |\n\n## 已知坑\n- 参数经占位素材两轮调校通过，非实战定稿，首次实战须以真实素材回验\n- **贴落节奏语义判例**（本卡与 graze-face-tour 互为反例）：\n 巡礼镜=错开起点+重叠并行下落；整体登场镜=全体同帧。选错语法\n 两边都会被裁\n- 与 neon-frame-forerun 分工：那张镜头固定、错峰贴落+页面点亮\n 三层咬合；本卡镜头旋转+同帧齐落。同段落二选一，别连用（同框\n 语言重复）\n- 弧线旋转是透视原点近似而非真实 3D 相机环绕，极端角度下框辉光\n 形变略平——实战若需大角度环绕考虑真 3D 场景\n\n## 参考实现\ndemos/ui-entrance/neon-frame-orbit-drop/\n（NeonFrameForerunOrbit.tsx）\n原片出处：无对应原段\n\n## Reference implementation (Remotion)\n\n- 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\n\nThe component imports shared fixtures from `demos/_fixtures` and helpers from `assets/lib` in the repo; SKILL.md there documents the render workflow.\n", "flow": [ { "step": "Read the recipe", "note": "Prompt = when to use, intention, parameter table with typical values and how each one feels, known pitfalls. Treat values as calibrated starting points." }, { "step": "Get the code", "tool": "git", "cmd": "git clone https://github.com/Vincentwei1021/video-shotcraft && cd video-shotcraft && npm install" }, { "step": "Register + render", "tool": "remotion", "cmd": "npx remotion render out.mp4 # component: demos/ui-entrance/neon-frame-orbit-drop/NeonFrameForerunOrbit.tsx" }, { "step": "Or re-implement", "note": "Port the timing/easing from the recipe to HTML + WAAPI (gimgs motion contract) or any engine; keep the same segment windows and easing." } ], "files": [ { "path": "demos/ui-entrance/neon-frame-orbit-drop/NeonFrameForerunOrbit.tsx", "url": "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/neon-frame-orbit-drop/NeonFrameForerunOrbit.tsx" } ], "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.", "render": { "engine": "remotion", "frames": 138, "repo": "https://github.com/Vincentwei1021/video-shotcraft", "files": [ "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/neon-frame-orbit-drop/NeonFrameForerunOrbit.tsx" ], "note": "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 with the template's width/height/fps/duration in Root.tsx, then `npx remotion render 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." }, "source": "// ===== demos/ui-entrance/neon-frame-orbit-drop/NeonFrameForerunOrbit.tsx =====\n// neon-frame-forerun-orbit v5（批次 14 #1）。用户意见（逐字）：\n// \"这个应该是所有组件和文字同时从空中往下贴合\"\n// ——单点修正：v4 的错峰贴落改为**所有组件和文字同时**从空中往下贴合\n// （同帧起落、同帧贴合，同形软影同步收敛）。判例：整体登场镜=同时贴合，\n// 错峰是巡礼镜的语法。其余全部保留：同款霓虹渐变框+灰面板+背景霓虹管\n// 框群；镜头视角 rotateY 从左侧(+38°) 连续弧线旋到右侧(-26°)。\nimport React, { useId } from 'react';\nimport { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';\n\nconst easeFall = Easing.bezier(0.5, 0.05, 0.6, 1); // 加速下落、末端软着陆\n\n/* 悬浮 + 同形软影（对标批次11 GrazeFaceTour FloatWrap）：\n * h=悬浮高度(px)。本体向左上抬起，原位留模糊压暗同形影，h→0 重合影消失 */\nconst FloatWrap: React.FC<{ h: number; children: React.ReactNode }> = ({ h, children }) => (\n
\n {h > 1 && (\n
{children}
\n )}\n
{children}
\n
\n);\n\n/* v5：所有组件和文字**同时**从空中往下贴合——统一 land 时刻 LAND，\n * 同帧起落（t=LAND-FALL）、同帧贴合（t=LAND），软影同步收敛；\n * 各组件仅悬浮高度 H 略有差异（同窗下落，速度随高度自然区分） */\nconst LAND = 0.52;\nconst liftOf = (t: number, land: number, H: number) => {\n const FALL = 0.3;\n const p = Math.min(1, Math.max(0, (t - (LAND - FALL)) / FALL));\n return (1 - easeFall(p)) * H;\n};\n\nconst mulberry32 = (a: number) => () => {\n let t = (a += 0x6d2b79f5);\n t = Math.imul(t ^ (t >>> 15), t | 1);\n t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n};\n\nconst ink = '#3c3c3a';\nconst mid = '#9a9a98';\nconst line = '#e3e3e1';\n\nconst PW = 1330;\nconst PH = 900;\nconst PL = 1000;\n\nconst FRAME_D = `M 0 ${PH / 2} L 0 0 L ${PW} 0 L ${PW} ${PH} L 0 ${PH} Z`;\n\nconst Chip: React.FC<{ w: number }> = ({ w }) => (\n
\n
\n
\n
\n);\n\n/* 与 v3 同款灰面板；t=贴落进程，各组件错峰空中贴落（重叠并行） */\nconst GrayHome: React.FC<{ t?: number }> = ({ t = 1 }) => {\n const L = (land: number, H = 72) => liftOf(t, land, H * 1.7);\n return (\n
\n
\n \n
\n
\n
\n
\n \n {[76, 56, 96, 110, 66, 60].map((w, i) => (\n \n
\n
\n
\n
\n \n ))}\n \n
\n \n {[104, 126, 96, 118, 88].map((w, i) => (\n \n
\n
\n
\n
\n \n ))}\n
\n
\n \n
\n \n \n
\n
\n
\n
\n \n
\n {[0, 1, 2, 3, 4, 5, 6].map((i) => (\n \n \n \n ))}\n
\n \n
\n {[54, 84, 50, 82].map((w, i) => (\n
\n ))}\n
\n \n {[0, 1, 2, 3].map((i) => (\n \n
\n
\n
\n
\n {[0, 1, 2].map((k) =>
)}\n
\n
\n \n ))}\n
\n
\n );\n};\n\ntype BgFrame = { x: number; y: number; w: number; h: number; hue: string; phase: number; period: number; skew: number };\nconst rng = mulberry32(20260718);\nconst HUES = ['#b06af0', '#e879c9', '#f0a35c', '#6a7df0', '#e0679a', '#8a5cf0', '#c06af0'];\nconst BG_FRAMES: BgFrame[] = Array.from({ length: 18 }).map(() => ({\n x: rng() * 2000 - 120, y: rng() * 1100 - 60,\n w: 160 + rng() * 480, h: 70 + rng() * 220,\n hue: HUES[Math.floor(rng() * HUES.length)],\n phase: rng() * 90, period: 55 + rng() * 70,\n skew: -14 + rng() * 10,\n}));\n\nexport const NeonFrameForerunOrbit: React.FC = () => {\n const frame = useCurrentFrame();\n // 滤镜/渐变 ID 按实例生成，多实例同场不串引（useId 的 «:» 在 url() 里非法，需清洗）\n const uid = useId().replace(/[^a-zA-Z0-9]/g, '');\n // 开场快速描框（同款左缘中点两头奔画，14 帧成型——样式与 v3 一致）\n const trace = interpolate(frame, [0, 14], [0, 1], {\n extrapolateLeft: 'clamp', extrapolateRight: 'clamp',\n easing: Easing.bezier(0.3, 0.1, 0.3, 1),\n });\n // 面板早亮：本变体主角是旋转+贴落，不复刻暗转亮长过程\n const lit = interpolate(frame, [8, 30], [0.25, 1], {\n extrapolateLeft: 'clamp', extrapolateRight: 'clamp',\n easing: Easing.bezier(0.35, 0, 0.3, 1),\n });\n const frameLine = interpolate(frame, [96, 130], [1, 0.35], {\n extrapolateLeft: 'clamp', extrapolateRight: 'clamp',\n });\n const rimGlow = interpolate(frame, [0, 20, 108, 138], [0.7, 1, 0.75, 0.5], {\n extrapolateLeft: 'clamp', extrapolateRight: 'clamp',\n });\n const bgLit = interpolate(frame, [0, 30, 100, 136], [0.3, 1, 0.85, 0.1], {\n extrapolateLeft: 'clamp', extrapolateRight: 'clamp',\n });\n // 视角弧线：从页面左侧(+38°)连续旋到右侧(-26°)，全程不停——\n // ease-in-out 起止柔和、中段持续转动\n const orbit = interpolate(frame, [0, 128], [0, 1], {\n extrapolateLeft: 'clamp', extrapolateRight: 'clamp',\n easing: Easing.bezier(0.42, 0.05, 0.32, 1),\n });\n const rotY = 38 - 64 * orbit; // +38° → -26°\n const rotX = 6 - 2.5 * orbit;\n const rotZ = 3 - 7.5 * orbit; // 左视角微仰 → 右视角微俯（对齐 v3 落定姿态）\n const scale = 0.9 + 0.1 * Math.sin(orbit * Math.PI) + 0.02 * orbit; // 弧线中段略推近\n // 透视原点随视角横移：镜头从左绕到右\n const pOrigin = 30 + 34 * orbit;\n const headP = trace * (PL / 2);\n // 贴落进程：与旋转同时进行（帧 10–118），错峰起点+重叠下落\n const drop = interpolate(frame, [10, 118], [0, 1], {\n extrapolateLeft: 'clamp', extrapolateRight: 'clamp',\n });\n\n return (\n \n {/* 背景霓虹管框群（同款） */}\n \n \n \n \n \n \n {BG_FRAMES.map((b, i) => {\n const breath = 0.5 + 0.5 * Math.sin(((frame + b.phase) / b.period) * Math.PI * 2);\n const op = bgLit * (0.18 + 0.4 * breath);\n return (\n \n \n \n \n );\n })}\n \n {/* 主体：视角弧线旋转中的框+面板 */}\n
\n
\n
0.4 ? 1 : 0, filter: `brightness(${Math.max(0.05, lit)})` }}>\n \n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {[1, -1].map((dir) => (\n \n \n \n {trace < 1 && (\n \n )}\n \n ))}\n \n
\n
\n \n );\n};\n\n\n" }