# Dashboard Glow Highlight Pill

A gold wordmark hangs in a black void as a data dashboard rises up in perspective and keeps drifting in 3D; a gold light patch cruises from the right to the bottom, stretching into a pill, then traces the glowing outline of a popup from that pill.

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

## Params

_No params._

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

## Prompt

## When to use

A key-feature reveal for finance/data products; a premium "pay attention here" cue; the core beat of a black-and-gold brand film.

## Intention

Use a beam of light to draw the viewer's attention from "the whole dashboard" down to "this one popup." The light patch first cruises between panels (announcing something is coming), stretches into a pill (winding up), then traces the popup's outline starting from the pill's landing point (the handoff) — three beats are one continuous deformation of the same beam of light; breaking any one of them turns it into three unrelated animations. The whole shot is only 2s, and every beat starts from where the last one landed.

## Duration & energy

- Duration: About 2.0s (60f@30fps).
- Energy: High (four beats — rise, cruise, trace, popup — packed into 2s, handoffs must be seamless).

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

## 意图
用一束光把观众的注意力从"整个仪表盘"收到"这一个弹窗"上。光斑先在
面板间巡游（宣布有东西要来），拉成胶囊（蓄力），再从胶囊落点起笔
描出弹窗轮廓（交棒）——三段是同一束光的连续变形，任何一处断开就
变成三个不相干的动画。全片仅 2s，每段都靠上一段的落点做起点。

## 动效核心
- 金字 "Ready." 用 `background-clip:text` + `drop-shadow` 三层辉光，
  满亮保持到 t≈0.30 再 `inQuad` 淡出；辉光走 `0.85±0.15·sin(t·π·9)` 呼吸
- 仪表盘走 10 段 POSE 关键帧（`[t, rotateX, rotateY, tx%, ty%, scale]`，
  段间 `inOutQuad`）：0.300 时 `rotateX 34°/scale 1.62` 只露顶栏切片，
  0.365 就基本摆正满幅，之后 yaw 由 −13° 缓扫到 +2.6°，
  0.62→0.72 有一次 `scale 0.943→0.707` 的后拉让位给弹窗
- 背景虚化"先起后退"：`blur 0→4.5px`（0.58→0.66 inOutQuad）后在
  0.80→0.93 退掉 52%，压暗层 `dim` 峰值 0.22 保留
- 光斑 6 段关键帧从 `(80.5%,42%) 22×22` 单调走到 `(44.1%,67.4%) 96×16`
  ——向左下 + 持续横向拉长，中途不回摆；0.655→0.678 淡出交棒
- 辉光描边 `stroke-dashoffset` draw-on（0.655→0.775 outQuad），起笔点
  `SX` 由光斑末帧 x=44.1% 反算；0.79→0.93 收敛：笔宽 2.9→1.0px、
  `#fff0c4→#e6c887`、辉光几乎撤掉，变成常驻金色细框
- 弹窗底板 0.665→0.75 先到（opacity×0.72），文字 0.715→0.84 才清晰；
  弹窗与描边共用完全相同的 transform 链，并按相机姿态的 0.45/0.5 倍
  做半幅漂移

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 金字淡出 | 满亮到 t≈0.30，0.30→0.355 inQuad | 要和仪表盘升入叠着走；先清场再升入就断了 |
| 仪表盘升入 | rotateX 34°→5.5°、scale 1.62→1.055，t 0.300→0.365 | 0.065（≈4f）内摆正是故意的：慢了读作"面板飘上来"而非"镜头压下去" |
| 常驻 3D 漂移 | yaw −13°→+2.6°，scale 0.943→0.707 | 漂移不能停：一静止就露出这是张贴图 |
| 光斑巡游 | 6 帧关键帧，22×22 → 96×16 | 单调向左下 + 只拉长不回摆；回摆一次就读作"光在找东西" |
| 背景虚化 | blur 峰值 4.5px，0.80→0.93 退掉 52%，dim 0.22 | 只起不退 = 结尾整幅糊；退到 0 又失去弹窗的层次 |
| 描边 draw-on | dashoffset 0.655→0.775 outQuad，从底边起笔逆时针 | outQuad 快起步才接得住胶囊的"甩出去"的势 |
| 描边收敛 | 0.79→0.93：2.9→1.0px、#fff0c4→#e6c887 | 收敛是"光变成 UI"的语义；不收敛就一直是特效 |
| 弹窗淡入 | 底板 0.665→0.75（上限 0.72 透明度）、文字 0.715→0.84 | 底板先于文字，才有"框先在、内容后填"的顺序 |

## 已知坑
- **描边 SVG 与弹窗必须共用同一个盒子和 1:1 px 的 viewBox**。曾用
  `300×220` + `preserveAspectRatio="none"`，被非等比压成 x0.39/y0.49：
  笔宽横竖不一、圆角拉成椭圆、整条描边浮在轮廓外——这是"画光位置和
  弹窗不一致"的根因
- 光斑不能用 `mix-blend-mode:screen`：root 上有 `perspective` 会把混合
  隔离掉导致光斑发灰；改用实心亮核 + `box-shadow` 外扩辉光
- 描边起笔点 `SX` 必须由光斑末帧 x 反算。写死坐标后一改巡游路径，
  "光拉成胶囊再描边"的交棒就断了
- 金字用 `background-clip:text`，辉光只能走 `filter: drop-shadow`——
  `text-shadow` 对透明字无效
- 仪表盘的订单簿/K 线/买卖面板与弹窗文案全是占位数据（确定性随机
  游走生成），落地要换成项目真实界面

## 参考实现
demos/effects/dashboard-glow-highlight-pill/
（DashboardGlowHighlightPill.tsx）

## Reference implementation (Remotion)

- demos/effects/dashboard-glow-highlight-pill/DashboardGlowHighlightPill.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/dashboard-glow-highlight-pill/DashboardGlowHighlightPill.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/dashboard-glow-highlight-pill/DashboardGlowHighlightPill.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.