# Glow & flyline moves

Three dark-scene glow-and-flyline styles: glow-orb-ambient ambient glow noise, flyline-arc a connecting light arc, and orb-flyline-relay combining both with same-frame resonance.

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

## Params

_No params._

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

## Prompt

## When to use

The atmosphere and data storytelling of the film's one dark segment: use A to lay down ambient noise, B to tell data-flow direction, C when the background needs to answer the foreground; a Linear-website feel.

## Intention

This is the library's first card to live entirely in a **dark scene**. The white-background-can't-glow precedent, read in reverse, says: to play with light, go dark first. A is the space breathing — three heavily blurred glow orbs drift organically near black, and the central dark card's edges glow brighter as the nearest orb approaches, so the background is no longer dead; B is the verb of data — a glowing arc "strikes" from card A to card B, a bright leading point with a fading tail, the landing point pulsing along its outline, giving metric relationships a direction for the first time; C welds A and B together — the frame where a flyline lands makes the nearby orb surge brighter in the same beat, ambient layer and event layer **resonating on the same frame** rather than performing separately (the crux of the combo: separate the resonating frame and it degrades into two cards placed side by side).

## Duration & energy

- Duration: A: ~5s / B: ~4.7s / C: ~5.2s
- Energy: A: Low (ambient-noise level) / B: Medium / C: Medium-high

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

## 意图
这是库内第一张整卡住在**暗场**的卡。白底提亮不可见判例反过来读就是：
要玩光，先去暗场。A 是空间的呼吸——近黑底三团重 blur 光斑有机漂移，
中央深卡边缘随最近光斑靠近而泛光，背景不再是死的；B 是数据的动词——
发光弧线从 A 卡"打"到 B 卡，亮点头领跑、渐隐光尾，落点描边脉冲点亮，
指标关联第一次有了方向；C 是 A+B 的焊接——飞线落点帧邻近光斑同帧
涨亮一拍，氛围层与事件层**同帧共振**，互相搭腔而非各演各的（组合命门：
拆开共振帧就退化成两张卡并置）。

## 三式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A glow-orb-ambient | 三团 500–700px radial 光斑 + blur(100px)，双正弦漂移；卡缘辉光按光斑距离 [180,720]px→[1,0] 加权取 max 驱动 | 暗场段落铺底；卡呼吸感 |
| B flyline-arc | 手写 bezier 100 段采样，22f out-cubic 生长；光头条件挂载领跑，段 opacity 按离头距离渐隐；落点描边脉冲，可接力 | 数据流向/指标关联；dashboard 叙事 |
| C orb-flyline-relay | A+B 焊接：光斑 surge 与卡脉冲共用落点帧，涨亮 1+1.6×surge、5f 起升 15f 消散 | 暗场高光段；三卡接力收束 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A 光斑 | 峰值 opacity 0.32/0.22/0.18；漂移振幅合计 ≥240px、周期 92–134f 交叉不等 | 同周期漂移读作整体晃动不是"有机" |
| A 卡缘辉光 | box-shadow 0→28px 白 0.25 | 无辉光光斑与卡互不认识 |
| A 收敛 | 90–120f out-sine 收敛冻结（起始斜率≈0.94 近似连续），末 30f 真静止 | 硬停一帧读作卡死；缓动收敛才有真静止 |
| B 线体 | 白线 4.5px + 9px 深色衬底；暗场版可去衬底 | 浅底无衬底白线直接消失（demo 判例） |
| B 光头 | 白点 9px + halo，仅生长期条件挂载 | opacity 到 0 不算摘罩，永不真静止 |
| B 脉冲 | 描边扩散 out-cubic 6f / 消散线性 12f | 白底禁提亮——用加深罩 0.16 替代 |
| C 共振 | 落点帧同帧起 surge；卡 8f 亮到 1 + 描边脉冲残余 0.3 | 错 2f 以上共振读不出"搭腔" |
| C 时间轴 | 动作 f98 前结束、光斑 f120 冻结，末 35f 真静止 | 氛围层最后冻，事件层先收 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 暗场段与纸墨浅底主视觉切换成本高——全片暗场段 ≤1 段，进出
  用 shot-transitions 藏切族垫，别生切明暗
- 光斑漂移末段**必须**缓动收敛到静止再冻结——匀速漂移直接 clamp
  是一次可见的急刹（A 式 out-sine 收敛判例）
- 实战品牌色版：光斑用品牌色对（如蓝紫），灰阶参数只保证明度关系，
  色相对比要重调
- B 接力线 ≥3 条时改用 C——纯飞线连打读作大屏模板，共振才有作者感
- 声音：B/C 每次落点一声轻打点，A 无声（sound-design §4.5）

## 参考实现
demos/effects/glow-flyline-moves/
（FlylineArc.tsx / GlowOrbAmbient.tsx / OrbFlylineRelay.tsx）

## Reference implementation (Remotion)

- demos/effects/glow-flyline-moves/FlylineArc.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/glow-flyline-moves/FlylineArc.tsx
- demos/effects/glow-flyline-moves/GlowOrbAmbient.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/glow-flyline-moves/GlowOrbAmbient.tsx
- demos/effects/glow-flyline-moves/OrbFlylineRelay.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/glow-flyline-moves/OrbFlylineRelay.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/effects/glow-flyline-moves/FlylineArc.tsx, demos/effects/glow-flyline-moves/GlowOrbAmbient.tsx, demos/effects/glow-flyline-moves/OrbFlylineRelay.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.