# Spotlight hero card reveal

A spotlight sweeps the page and locks onto one card; it pushes in at 45°, the card lifts and hovers, a light beam circles its outline twice, then it settles back in place.

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

## Params

_No params._

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

## Prompt

## When to use

"Single hero" style product openings; establishing one core object (a card/entry/module) as the whole film's protagonist

## Intention

The opening says only one thing: this one card is the atomic unit of the product. The spotlight does the eye-guiding for the viewer; the lift and hover give it volume and weight; the outline light beam is a metaphor for "scanning/inspecting"; settling back in place says it belongs to this page.

## Duration & energy

- Duration: ~4.6s (82–220f)
- Energy: Medium (the most textured shot, slow and steady pacing)

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

## 意图
开场只讲一件事：这一张卡就是产品的原子单位。聚光灯替观众做视线引导，弹起悬浮给它体积和重量，轮廓光束是"扫描/检视"的隐喻，最后贴回原位表示它属于这个页面。

## 动效核心
- 游走聚光灯经几个中间站后锁定卡心，光池收拢 + 锁定瞬间脉冲，外部 vignette 压暗
- 相机从全页正视推进到斜侧特写（左侧机位主导），焦点略偏让卡落在画面偏右
- 卡片 rise（带过冲）→ 悬停 sin bob → reseat（落地微压）
- SVG rounded-rect 轮廓光束跑两圈：第一圈快而亮、第二圈慢而弱
- 卡起飞后原位铺页面底色补丁 + 强调色（模板片为琥珀）呼吸描边，落地瞬间增亮消失
- 可选加配 3D 悬空注记（hover-3d-annotation 手法）：悬停期在卡左侧浮现大衬线两行注记（字号 37、宽 230px），translateZ 92 + sin 3px bob（周期 44f，与卡 40f 相近但不同步——"共感"而非镜像），关键词背后 12f 长出马克笔荧光条 oklch(88% 0.095 85)，向页面投椭圆软影；注记必须活在同一 3D 空间、同一台相机透视（C3）——第一版平面叠字被否决后重做（平面叠字破坏 3D 空间统一）；出场早于卡片 reseat

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 选卡 | cards[3]，中心 x 恰为 960（页面中心） | 主角卡先按"推进后构图居中"选，不是随便挑一张 |
| 相机 | 静止全页 zoom 0.78（82–114f）→ 16f 推进 zoom 2.6；rotY 34° 主导 + rotX 仅 8°，persp 1200；焦点取卡心左移 30px；reseat 触地后 cx/cy/zoom/rot 全锁死 ≥15f | 侧向水平机位读感优于俯拍（"从左侧拍摄而不是从下方"，Q6）；收尾禁用 zoom 2.6→2.58 一类尾漂，呼吸必须是真静止（R1） |
| 聚光灯 | 4 个中间站（86→130f），光池半径 620→420→360 收拢，锁定 +6% 脉冲；vignette 0.16→0.42 | 中间站让"随机照射"可信；直奔目标读作程序化 |
| 动作弧 | rise 10f（bezier(0.2,1.25,0.3,1) 过冲）→ 悬停 54f（sin bob 振幅 4px 周期 40f，z=110px·lift）→ reseat 18f，落地 press 0.997 | 锁定→落地 ≈98f≈3.3s——质感镜头要"放慢到 3 秒"（R3），初版几乎总是偏快 |
| 轮廓光束 | lap1 142→156f（strokeWidth 5+2.5 双层）、lap2 162→182f（3.5+1.75、整体 opacity 0.62）；strokeDasharray "0.14 1" 走 dashoffset | 两圈快慢有别才读作"持续扫描"，一圈是眨眼；光束只给主角一次（Q4） |
| 双层影 | `0 8·lift px …, 0 46·lift px 90·lift px` 随高度生长 | 影子不随高度长，悬浮就不成立 |

## 声音
弹起钉 whoosh-big（模板片钉在 f127），光束扫描钉 sparkle（f141），reseat 钉 transition-snap（f204）——弹起/光效/落定各有专属音（S2、S4）。

## 已知坑
- 开场多卡群舞撑不起第一印象（Q5）——开场曾反复推倒多次才收敛到单卡；直接从单主角+完整动作弧起稿
- 推进特写下卡上文字会糊，根因是纹理栅格化分辨率不是 DoF——配套技法展开见审美准则 Q2
- 逐卡 glint 闪烁被两次否决（"不需要每个卡片都闪烁一下"，Q4），光效严格只给主角

## 参考实现
demos/opening/spotlight-hero-card/SpotlightHeroCard.tsx（原 template/src/aifl/live/SceneOpen.tsx 82–220 段）

## Reference implementation (Remotion)

- demos/opening/spotlight-hero-card/SpotlightHeroCard.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/opening/spotlight-hero-card/SpotlightHeroCard.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/opening/spotlight-hero-card/SpotlightHeroCard.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.