# Scanline annotate focus

A bright scan line sweeps down the page, framing each element it passes and labeling it with monospace annotations.

- 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-annotate-focus.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/scanline-annotate-focus/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-annotate-focus.html

## Params

_No params._

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

## Prompt

## When to use

An analysis shot for "AI is reading your page/brand"; a breakdown intro for design systems/brand guidelines; a self-explanatory capability section for a product

## Intention

Make the abstract act of "analysis" into a visible causal chain: wherever the scan line reaches, that area gets framed and named. The viewer is reading "the machine's gaze," so the scan line must move at constant speed and each annotation must strictly lag behind the scan line's passage — **scan first, then pop the frame** — if the order ever gets scrambled it reads as a pre-choreographed animation instead.

## Duration & energy

- Duration: About 4.6s (138f@30fps)
- Energy: Medium (mechanically calm, the rhythm driven by the scan line's constant speed, the annotations are the beats)

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

## 意图
把"分析"这件抽象事做成可见的因果链：扫描线走到哪，那块就被框住、被
命名。观众读的是"机器的视线"，所以扫描线必须匀速、标注必须严格滞后于
扫描线过境——**先扫到再弹框**，顺序一旦错乱就变成了预先编排的动画。

## 动效核心
- 扫描线 `t 0.06→0.66` 匀速（无缓动）从 y=−30 走到 300，
  0.04→0.09 淡入、0.66→0.71 淡出
- 触发时刻由目标 bbox 反算：`ft = 0.06 + ((y+h+30)/330)*0.60`，即扫描线
  越过 bbox **下缘**的那一刻；再按 y 排序钳制最小间隔 0.05
  （`ft = max(rawT, prev+0.05)`）避免两框同时弹
- 取景框由 4 个 9px L 角组成，`outBack` 驱动 `scale 1.75→1`（0.13 内
  走完，过冲后回稳），opacity 走 `min(1, a*1.6)` 抢先满亮
- 框内白色 `fill` 层闪一下：0.07 峰值，`ft+0.04→+0.09` 起、
  `+0.09→+0.22` 落——像相机对焦成功的确认闪
- 标注 `ft+0.05→+0.16 outCubic` 淡入 + `translateY 4→0`，
  6.5px MONO、`letter-spacing:1.5px`、`#b8bdc7`
- 状态行实时数已触发的框（`fired`）显示 `SCAN · 0n/06`，
  `0.74→0.80` 后切 `ANALYSIS · COMPLETE` 并转强调色

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 扫描线 | t 0.06→0.66 匀速，y −30→300 | **零缓动**：加 ease 就读作"有人在拖进度条" |
| 触发换算 | ft = 0.06 + ((y+h+30)/330)·0.60 | 分母 330 = 扫描行程；改扫描窗口必须同改，否则框在扫描线到达前就弹 |
| 最小间隔 | prev + 0.05（≈1.5f） | 两个 y 接近的目标会同时弹；钳制后才逐个读得清 |
| 取景框收拢 | scale 1.75→1，outBack，0.13 | 1.75 倍是"从外面收进来"的下限；1.2 倍看不出对准动作 |
| 角标 | 臂长 9px、描边 1.5px | 臂长超过目标短边 1/3 就变成完整边框，丢掉"取景"语义 |
| 对焦闪 | fill opacity 峰值 0.07 | 超过 0.15 就盖住内容，读作"选中高亮"而非对焦确认 |
| 标注 | ft+0.05 起、0.11 走完、translateY 4→0 | 滞后 0.05 是"框稳了才命名"的因果；同时出现就乱 |
| 计数行 | 按 fired 实时统计，7px MONO，2px 字距 | 写死时间轴的计数一改 bbox 就对不上；必须实时数 |

## 已知坑
- **扫描线触发时刻与目标 bbox 强绑定**：换页面内容后 targets 的
  `x/y/w/h` 与标注锚点 `lx/ly` 都要重测，否则框和内容错位
- bbox 是手动微调留边的（不是自动量元素），改页面模板不会自动跟随
- 标注用 `white-space:nowrap` + 手写 `lx/ly`，词变长会顶出画外；
  右侧目标的标注要主动改成左置
- 与 `scanline-assemble-flyin` 分工：那张是"扫到即装配"（页面从空到有），
  本卡是"扫到即标注"（页面已存在，只做分析）
- ACCENT（`#9fb6e8`）与 `A_RGB` 是同一个色的两种写法，换肤要同改两处

## 参考实现
demos/effects/scanline-annotate-focus/
（ScanlineAnnotateFocus.tsx）

## Reference implementation (Remotion)

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