# Dark-stage spotlight reveals

Three dark-stage spotlight reveals — A wake-sleep sweep (light in = bright, light out = dark), B edge-hugging glow pan (violet light seeps along UI edges + steady rightward sweep), C corner reveal (radial light expands steadily from a corner to light the whole screen); light itself narrates in the dark.

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

## Params

_No params._

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

## Prompt

## When to use

Introducing UI panels/feature areas one by one in dark-toned brand films; a black-stage opener that "lights up" the interface; a light transition between passages

## Intention

In the dark, viewers only see what the light lets them see — the spotlight is lighting, camera move, and edit all at once: wherever the light lands, that's the entrance; when the light leaves, that's the exit. All three share an identity element — an "edge-hugging violet glow" (light tracing the UI border/logo/top edge, the glow bright and soft, the light "caressing" the interface rather than an outline animation). The linchpin is **constant speed**: the spotlight's movement/expansion must be strictly linear — easing would give the light "intent," only constant speed reads as a searchlight's mechanical sweep (case in point for style C: linear but with too large a final radius means it saturates in the first quarter, and the feel is no longer even).

## Duration & energy

- Duration: Single style: 3.5–4.5s; A/B can be chained into a tour passage
- Energy: Medium-low (restrained, mysterious, the payoff is the moment of lighting up)

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

## 意图
黑场里观众只能看见光给看的东西——聚光既是照明也是运镜和剪辑：
光到哪里哪里登场，光走即谢幕。三式共用"贴边紫色辉光光线"这个
身份元素（光线贴着 UI 边框/logo/顶边走，辉光要亮要糊，是光在
"抚摸"界面而不是描边动画）。命门是**匀速**：聚光的移动/扩张
严格 linear——缓动会让光有"意图"，匀速才读作探照灯的机械扫掠
（C 式判例：linear 但半径终值过大＝前 1/4 就饱和，观感照样不匀速）。

## 动效核心
**A 醒睡扫过**（glow-wake-sleep-panel）：radial 显影罩跟随光头从左
向右匀速移动，范围外全黑；贴顶边紫色光线三层辉光（blur26 宽糊+
blur9 中层+亮芯+粉色偏移层）随扫光同步走，经过 logo 时 boxShadow
描光、到右缘点亮竖直残光；尾段光走面板沉回黑暗——有醒有睡。
**B 贴边泛光横摇**（slide-spotlight-pan）：光线锚定面板边缘（先绕
左上角竖缘、转角后沿顶边横走），紫光晕染渗入 UI 顶部内侧（光从
边缘渗进界面）；聚光头匀速右移显影、面板同时匀速左滑＝相机右摇感。
**C 角落匀速显影**（corner-spotlight-reveal）：左上角径向聚光半径
严格 linear 扩张，照到显影照不到沉黑，最终全亮（光即转场）。

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 聚光移动/扩张 | 全程 linear、零缓动 | **匀速是命门**——全程零缓动；加 ease 读作光有主观意图 |
| C 式半径终值 | 恰好在片尾覆盖全屏（1300@1080p/100f） | 终值过大＝提前饱和假匀速：亮度采样须全程平滑爬升（实测 8/46/101/…/238） |
| 贴边光线辉光 | 3–4 层（blur26+blur9+亮芯+粉偏移） | 层少读作细线描边；辉光要够亮够糊才是"光" |
| 光线锚定 | 严格贴 UI 边缘/顶边/logo | 光线脱离边缘漂浮＝失去"抚摸界面"语义（A 式返工判例：定位丢失紫光跑到底边） |
| 显影罩 | radial 渐变硬边略糊（feather ~15%） | 边太硬像圆形遮罩；太糊没有"照到/照不到"的界线 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 light-play-moves 分工：那张是元素/文字上的
  光泽戏（sheen/辉光呼吸）；本卡光是**运镜和剪辑**（显影/谢幕/转场），
  光决定观众看什么
- 三式重做判例：聚光扫过必须带贴边光线同行（v1 只有显影罩被裁
  "改改再看"——裸聚光没有身份，贴边紫光才是这个手法的签名）
- 原片（clickup-30）光线转角有一瞬彩虹色散，demo 未做；实战可
  在转角帧加 1–2f 色散层提质感

## 参考实现
demos/effects/spotlight-sweep-moves/
（CornerSpotlightReveal.tsx / GlowWakeSleepPanel.tsx / SlideSpotlightPan.tsx）
原片出处：clickup-30.mp4

## Reference implementation (Remotion)

- demos/effects/spotlight-sweep-moves/CornerSpotlightReveal.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/spotlight-sweep-moves/CornerSpotlightReveal.tsx
- demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx
- demos/effects/spotlight-sweep-moves/SlideSpotlightPan.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/spotlight-sweep-moves/SlideSpotlightPan.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/spotlight-sweep-moves/CornerSpotlightReveal.tsx, demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx, demos/effects/spotlight-sweep-moves/SlideSpotlightPan.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.