# Scan bracket sweep

A skeleton document pops in, viewfinder brackets frame it, and a scan line sweeps it 5 times while it stays completely still.

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

## Params

_No params._

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

## Prompt

## When to use

A process shot for "analyzing/validating this content"; a capability demo for document products; the middle beat of an upload → analyze pipeline

## Intention

Let the viewer read "this thing is being read through line by line by a machine." The viewfinder brackets frame the target first (announcing the inspection subject), then the scan line sweeps back and forth across the whole document (announcing the inspection process). The critical rule is that **the document itself stays completely still** — the moment the document also moves, the viewer can no longer tell if it's "being inspected" or "loading."

## Duration & energy

- Duration: About 5.0s (150f@30fps)
- Energy: Medium-low (mechanical, restrained, the rhythm lives entirely in the breathing of the back-and-forth sweep)

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

## 意图
让观众看懂"这份东西正在被机器逐行读过"。取景括号先把目标框住（宣布检查
对象），扫描光带再往复走完全篇（宣布检查过程）。命门是**文档本身完全静止**：
一旦文档也在动，观众就分不清是"被检查"还是"在加载"。

## 动效核心
- 文档 `seg(0→0.11, outCubic)` 从 scale 0.86 弹到 1，opacity 走 `dp*3`
  提前满亮，落位比缩放早——先"在了"再"稳了"
- 四角 34px 的 L 形括号按 `i*0.022` stagger 依次落位，各 0.055 走完，
  沿内外对角带 8px 位移收敛（`(1-p)*8*dx/dy`）
- 扫描窗口 `t 0.17→0.95` 严格 linear 切成 5 趟，趟内 `inOutSine`
  两端慢中间快，末尾留 12% 完全停顿（`local=(raw-pi)/0.88`）
- 拖尾 82px、`rgba(20,20,22,.5)→0`，方向随 `dir` 翻转：下行时挂在光带
  上方（`top:-82px`）、上行时挂在下方（`top:2.5px`），渐变同步反向
- 整条光带裁在与文档同 10px 圆角的 `overflow:hidden` 层里，
  `0.16→0.20` 淡入、`0.93→0.99` 淡出

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 文档弹入 | scale 0.86→1，t 0→0.11 outCubic | 起始值低于 0.8 就成了"从远处飞来"，弹入要小幅度才像 UI |
| 取景括号 | 臂长 34px、描边 2px、外扩 −7px；stagger 0.022 / 各 0.055 | 四角同时出现读作静态边框；差 0.022 就够读出"依次落下" |
| 扫描趟数 | PASSES=5，窗口 t 0.17→0.95 linear | 3 趟不够读作"往复"，7 趟以上在 5s 内每趟太快 |
| 趟内缓动 | inOutSine + 末尾 12% 停顿 | 停顿是"看清了这一趟"的换气位；去掉就成了匀速来回摆 |
| 光带 | 2.5px 实线 + 82px 拖尾 rgba(20,20,22,.5)→0 | 线太粗（>4px）读作遮罩边缘而不是光 |
| 拖尾方向 | 下行 top:−82px / 上行 top:2.5px，渐变一并翻转 | 只翻其一 → 拖尾跑到运动前方，读作"光在往回吸" |
| 裁切层 | 与文档同 10px 圆角 overflow:hidden | 漏到文档外就是"扫画面"不是"扫文档" |

## 已知坑
- 光带必须裁在文档 bbox 内，且圆角与文档一致——漏出一点就丢掉"扫描
  这份文档"的语义
- 拖尾的 `top` 和 gradient 方向是两处独立写法，改扫描方向时必须同改，
  漏一处就出现"尾迹在前"的反物理观感
- 括号的 34px 臂长与 −7px 外扩是按 300×178 的文档尺寸配的；换真实截图
  要按新尺寸重算，臂长超过短边 1/4 就压住内容
- INK 是唯一的颜色变量（括号 + 光带 + 拖尾共用），换肤只改它

## 参考实现
demos/effects/scan-bracket-sweep/
（ScanBracketSweep.tsx）

## Reference implementation (Remotion)

- demos/effects/scan-bracket-sweep/ScanBracketSweep.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/scan-bracket-sweep/ScanBracketSweep.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/scan-bracket-sweep/ScanBracketSweep.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.