# Scanline assemble fly-in

A scan line sweeps down an empty grid, flying each region's component in from off-screen — finishing as the scan ends.

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

## Params

_No params._

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

## Prompt

## When to use

An opening for "the page builds itself"; the core demo for AI website-builder/auto-layout products; a blank-to-finished capability narrative

## Intention

Give "the page being generated" a believable construction order: the scan line is the progress bar, the components flying in from off-screen are the construction actions. The critical thing is that **the last piece finishes assembling exactly as the scan finishes** — if the scan line finishes early or a component trails behind, the causal link of "scan drives assembly" falls apart.

## Duration & energy

- Duration: About 4.6s (138f@30fps)
- Energy: Medium-high (the scan line is steady, but every component fly-in is a burst, with rising density)

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

## 意图
让"页面被生成"这件事有一个可信的施工顺序：扫描线是施工进度条，
组件从画外飞进来贴合是施工动作。关键是**扫完那一刻恰好装完最后一块**
——扫描线提前收工或组件拖尾都会让"扫描驱动装配"的因果关系散掉。

## 动效核心
- 空页底只有暗网格（24px 双向 `repeating-linear-gradient`，
  `rgba(255,255,255,.025)`、整层 opacity .5）——组件飞入前唯一可见的东西
- 扫描线 `t 0.05→0.72` 匀速走 y −30→300，
  0.03→0.08 淡入、0.72→0.77 淡出
- 触发时刻由组件落点 y 反算：`ft = 0.05 + ((y+30)/330)*0.67 − 0.02`，
  再钳制最小间隔 0.045；提前 0.02 起飞让组件与扫描线**同时**到位
- 7 个组件各有独立飞入方案 `from:[dx,dy]` + `rot`：顶栏自上（0,−70），
  logo 自左（−160,−30, −6°），模块卡自右（230,40, 5°），H1 自左下
  （−260,60, −4°），CTA 自下（−60,130, 3°），页脚/社交自下方两侧
- 飞入 `seg(ft, ft+0.15, outBack)` 过冲贴合；运动中按 `1−a` 加
  `blur(≤2.2px)` 残影，`a>0.97` 即清零
- 落位瞬间闪一道细亮边：`inset:-3px` 的 1px 强调色描边，
  `ft+0.11→+0.15` 亮起、`+0.15→+0.26` 收掉
- 状态行统计 `a≥0.99` 的组件数显示 `BUILD · 0n/07`，
  `0.80→0.86` 后切 `ASSEMBLY · COMPLETE`

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 扫描线 | t 0.05→0.72 匀速，y −30→300 | 收工时刻要略晚于最后一块落位，才读作"扫完即装完" |
| 触发换算 | ft = 0.05 + ((y+30)/330)·0.67 − 0.02 | 那个 −0.02 是提前起飞量：去掉就变成"扫过之后才动"，慢半拍 |
| 最小间隔 | prev + 0.045 | y 接近的页脚/社交会同时飞；钳制后才有"一块一块"的密度 |
| 飞入位移 | 画外 60–260px，按组件所在方位定 | 位移小于 60px 读作"抖一下就位"，不是从画外来 |
| 飞入旋转 | ±3–8° | 超过 12° 就读作"翻滚"，贴合时不服帖 |
| 飞入缓动 | outBack，0.15 时长 | outBack 的过冲是"吸附贴合"的手感；outCubic 就成了滑入 |
| 残影模糊 | blur ≤2.2px，随 1−a 衰减，a>0.97 清零 | 不清零会留一层永久糊；阈值必须留裕量 |
| 落位闪边 | inset −3px、1px 强调色，0.04 亮 / 0.11 落 | 闪边是"咬合"的听觉替代品，去掉后落位没有实感 |

## 已知坑
- **触发时刻与 plan 里的落点 y 绑定**：换页面模板后每个组件的 y 要重测，
  否则组件在扫描线到达前就飞入
- `filter` 与 `transform` 同时作用于组件节点，落位后必须把 filter 设回
  `none`（不是 `blur(0)`）——留着合成层会持续吃 GPU
- 闪边层是 append 到组件内部的子节点，组件本身若有 `overflow:hidden`
  会把 `inset:-3px` 裁掉，需改成外层兄弟节点
- 与 `scanline-annotate-focus` 共用同一套页面模板与扫描线；两张卡可以
  串联（先装配、后分析），但扫描线要换向或留空档，否则读作重复
- 页面内容为中性占位模板，ACCENT（`#9fb6e8`）可按项目替换

## 参考实现
demos/effects/scanline-assemble-flyin/
（ScanlineAssembleFlyin.tsx）

## Reference implementation (Remotion)

- demos/effects/scanline-assemble-flyin/ScanlineAssembleFlyin.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/scanline-assemble-flyin/ScanlineAssembleFlyin.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/scanline-assemble-flyin/ScanlineAssembleFlyin.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.