# FUI/HUD moves

Two FUI/HUD styles: line-unfold-panel, a single line unfolding into a panel (line-to-plane CRT grammar), and reticle-lock-on, a viewfinder flying in to lock onto a target.

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

## Params

_No params._

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

## Prompt

## When to use

Use A for panel entrances/exits in dark, tech-flavored segments; use B for any "look here" target call-out (replaces circling/arrow annotation without freezing the frame).

## Intention

Two motifs from sci-fi fictional interfaces (Jarvis/Territory) that can be made neutral. A is a panel's ritual power-on/off: a 1px thin line snaps out very fast → stretches vertically into a full panel → content fades in ahead of the beat, exiting in reverse as the line compresses back to a point and dies (old-CRT power-off); a grayscale thin line already works, no tech-blue needed. B is a capture-in-motion: four L-shaped corner marks rush in from off-frame, overshoot and rebound, "clicking" onto the four corners of a target element plus a popped label — division of labor with freeze-annotate: that card freezes the frame to annotate, this one calls things out while things keep flowing.

## Duration & energy

- Duration: A: 3–4s (including exit) / B: 2–3s
- Energy: A: Medium / B: Medium-high (the lock-on frame is the hit point)

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

## 意图
科幻虚构界面（Jarvis/Territory）的两个可中性化母题。A 是面板的
仪式感开关机：1px 细线极快抽出→纵向撑开成面板→内容淡入，退场反向
压线缩点熄灭（老 CRT 关机）；灰阶细线即成立，不需要科技蓝。
B 是运动中的捕获：四个 L 形角标从画外冲入、超调回弹、"咔"地咬合
到目标元素四角+弹标签——与 freeze-annotate 分工：那卡冻结画面标注，
本卡在流动中点名。

## 两式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A line-unfold-panel | scaleX 0→1（out poly4 急抽 5f）接 scaleY 3px→满高（out cubic 9f），内容提前一拍淡入；退场镜像反序 | 暗场面板入退场；开关机仪式感 |
| B reticle-lock-on | 四 L 角=同一对矩形四份镜像，飞入（10f out cubic）与收缩（2.2×→0.94×→1 超调回弹）解耦；咬合帧目标微亮+标签 back 弹出 | 目标点名；踩音效重拍 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A 两段节奏 | 抽线 5f 急 vs 撑面 9f 缓 | 节奏差是手法本体，等长就平了 |
| A 线体 | 白色发光条 3px 级；线/点阶段与面板阶段条件切换 | 熄灭后必须条件卸载才有真静止 |
| B 飞入行程 | 画外 ≥1000px 冲入 | 行程短读作"角标出现"不是"扑过来" |
| B 超调 | 收缩过头到 0.94× 再回弹 1 | 无超调没有"咔"的咬合感 |
| B 咬合帧 | 目标白 overlay 快闪 0.55→停 0.28 + 标签同帧弹出 | 微亮与标签错帧就散了 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- Remotion 无 `Easing.quart`——用 `Easing.poly(4)`（demo 实测报
  "easing is not a function" 判例）
- B 一支片 ≤2 次：连用读作军事模板；两次锁定目标必须不同
- A 与 glow-flyline 同属暗场词汇，相邻段落别背靠背堆光效（Q4 同源）
- 声音：A 抽线一声短 whoosh、撑开一声轻 pop；B 咬合帧一声"咔"
  （机械 click 而非游戏 UI 音，S1 边界内）

## 参考实现
demos/effects/fui-hud-moves/
（LineUnfoldPanel.tsx / ReticleLockOn.tsx）

## Reference implementation (Remotion)

- demos/effects/fui-hud-moves/LineUnfoldPanel.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/fui-hud-moves/LineUnfoldPanel.tsx
- demos/effects/fui-hud-moves/ReticleLockOn.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/fui-hud-moves/ReticleLockOn.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/fui-hud-moves/LineUnfoldPanel.tsx, demos/effects/fui-hud-moves/ReticleLockOn.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.