# Floating glossy label pills

Four wireframe panels each topped with a glossy pill label queue horizontally, swapping position in three beats while the centered panel enlarges and the sides shrink and blur, ending with a cursor sliding to rest.

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

## Params

_No params._

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

## Prompt

## When to use

For horizontal enumeration of multiple features (Feature A–D, one screen each); product-overview or feature-tour segments, also works as a looping hero background on a landing page.

## Intention

Showing four features full-screen one by one takes four cuts, and the audience has to reorient each time. A corridor-style carousel has only one visual center: the centered panel is the lead, with a sliver of each neighbor visible on either side telling the audience "there's more, this is the same queue". The cursor at the end is deliberate: it hands the narrative back from "the system is auto-playing" to "a person is operating this", setting up the next beat's interaction shot.

## Duration & energy

- Duration: About 4.0s (120f@30fps)
- Energy: Medium (the three-beat position swap forms the pulse, no explosive peak; the cursor is the closing hand-off of attention)

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

## 意图
四个功能挨个全屏展示会切四刀，观众每次都要重新定位。走廊式 carousel 只有一个视觉
中心：居中的那块是主角，左右各露一截邻居的边缘告诉观众"还有更多、这是同一条队列"。
末段的光标是刻意的：它把叙事从"系统在自动播放"交回"这是一个人在操作"，为下一拍的
交互镜头做交接。

## 动效核心
- 这是**手法模板**：面板内容全是通用 wireframe 占位（顶栏 + 左侧导航 + 三栏卡片 /
  折线图仪表盘 / 列表表格 / 表单开关列表四种页型），只用灰条与色块拼出，落地时整块
  换成真实页面截图即可
- 轨道是逐帧实测拟合出来的三拍，写在 `BEATS` 里：起点 0.200 / 0.483 / 0.688，行程
  0.185 / 0.150 / 0.150。归一化进度对 `inOutCubic` 拟合极好（缓起→中段冲→缓收），
  **不是**常见的"快进慢出"
- 首拍带长尾，用两条曲线加权混合：`0.85*seg(t, b, b+0.185, E.inOutCubic) +
  0.15*seg(t, b, b+0.28, E.outCubic)`——主体在 0.185 内完成，剩 15% 拖到 0.48 才收住，
  所以首拍读起来明显比后两拍软
- 开场有上一拍的收尾余量：`trackX = -11 * (1 - seg(t, 0, 0.19, E.outQuart))`，t=0 时
  轨道偏左 11px，在 0.19 内缓缓归位——一进画就"正在收尾"而非从静止启动
- 环形轨道：`wx = ((trackX - i*SP) % RING + RING*1.5) % RING - RING/2`（SP=232，
  RING=4*232），把每块折进 ±RING/2 的窗口里。任一拍都保证左右各有一个邻居贴在画面
  边缘，走廊不断
- 一切属性由离心距离 `d = min(1, |wx|/SP)` 驱动：`scale = lerp(1-d, 0.62, 1)`、
  `opacity = lerp(min(1, (1-d)*2.4), 0.78, 1)`、`blur = d*1.3px`、
  `zIndex = (1-d) > 0.5 ? 2 : 1`
- 面板与胶囊下沉曲线**不同**：面板 `translateY(d*80)`，胶囊 `translateY(d*92)`——
  胶囊沉得更多，离心时会贴近面板顶边（实测中心 y 从 45 沉到 102）
- 胶囊的"高光"是三层叠出来的：180° 渐变（亮→主→深）+ 内阴影上白下暗
  （`inset 0 2px 3px rgba(255,255,255,.65)` / `inset 0 -4px 8px rgba(34,39,47,.5)`）+
  一枚 76% 宽的白色渐变 shine 覆在上 38%
- 光标：`seg(t, 0.717, 0.90, E.outQuart)`，opacity 在 0.717→0.725 内**硬现**（约 2f），
  位置从 (403,36) 减速滑到 (281,56)，之后到底几乎静止（每帧 <1px）
- 三块漂移雾块走不同周期的 sin/cos（`t*2π*0.5` 与 `t*2π*0.4`），是唯一与轨道无关的
  背景活性层

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 拍点 | 0.200 / 0.483 / 0.688，行程 0.185 / 0.150 / 0.150 | 首拍比后两拍慢 23%（含长尾更慢）——这个不均匀是实测来的手感，改成等长会读作机械播片 |
| 首拍长尾 | 0.85×主曲线 + 0.15×`outCubic(0.28)` | 15% 的权重摊在 1.5 倍时长上；权重调到 0.3 以上尾巴会拖得能看出"还在动" |
| 换位曲线 | `E.inOutCubic` | 缓起缓收是关键；换 outQuad（快进慢出）立刻读作被甩过去，走廊的从容感消失 |
| 开场余量 | 左偏 11px，0.19 内 outQuart 归位 | 11px 是"上一拍刚结束"的暗示量；归零则开场是死的，>30px 会读作又一次换位 |
| 中心距 | SP=232px（面板 W≈252） | SP < W 时邻居会压住居中面板边缘；SP 比 W 略小（232 vs 252）正是"露出一截"的来源 |
| 邻位缩放 | `lerp(close, 0.62, 1)` | 0.62 是实测值；>0.75 时主次不分，<0.5 邻居小到读作缩略图而不是同类面板 |
| 邻位下沉 | 面板 `d*80px` / 胶囊 `d*92px` | 两条曲线的差（12px）让胶囊离心时贴住面板顶边；改成同值会看到胶囊悬在面板上方 |
| 邻位透明/模糊 | opacity 下限 0.78、blur `d*1.3px` | **邻位必须仍清楚可见**——原片左右始终露着相邻面板边缘；opacity 压到 0.4 或 blur >3px 走廊就断了 |
| 光标 | 0.717 硬现（2f），outQuart 滑到 0.90 后静止 | 硬现是"指针本来就在那"；给它淡入会读作 UI 元素出现。outQuart 的强减速是鼠标的物理本能 |
| 内容坐标系 | 内部 330×255，整体 `scale(252/330)` | 所有 wireframe 像素值写在 330×255 里，改面板尺寸只改 CS 一处 |

## 已知坑
- 整卡只有一个色相来源：`ACCENT` 及其 `ACCENT_LIGHT` / `ACCENT_DEEP` 三档，加上对应的
  `A_RGB` / `AL_RGB` / `AD_RGB` 分量（渐变与阴影用）。换品牌色要改这 6 个变量，漏掉
  RGB 分量会出现"胶囊换色了但雾霭还是旧色"
- 例外：表格行的状态色块（淡红/淡绿）与表单的开关（开=蓝 `#2f7de1`）是**保留的功能色**，
  不跟 ACCENT 换肤——它们表达语义而非品牌
- 轨道拍点是从原片逐帧实测拟合的，不是设计出来的整数。别"顺手对齐"到 0.2/0.5/0.7，
  首拍的长尾与后两拍的干脆是这个动效的辨识特征
- 三拍只走完 4 块中的 3 次换位（0→1→2→3），末位面板在 0.838 之后一直居中到底，约 0.16
  （19f）的静置——这段静置是给光标滑到位用的，不是空白
- `phase: i*1.9` 在 groups 里计算了但**没有被使用**（轨道位置全由 `wx` 环形折算决定）。
  移植时可以删掉，不要误以为它参与相位控制
- 面板 W/H、SP、PANEL_TOP、胶囊 top 与两条下沉斜率都是 480×270 裁切系下的实测常量。
  改画布比例要整套重标，单独改一处会破坏"胶囊贴住面板顶边"的耦合
- 胶囊文案 Feature A–D 与 wireframe 内容都是占位。`rand(i)` 生成的骨架条宽度是确定性
  伪随机（渲染可复现），移植时不要换成 `Math.random`
- 光标终点 (281,56) 是对着末位胶囊右端标的。换胶囊文案会改变胶囊宽度，光标就会停错
  位置——文案变了必须重标光标终点

## 参考实现
demos/ui-entrance/floating-glossy-label-pills/
（FloatingGlossyLabelPills.tsx）

## Reference implementation (Remotion)

- demos/ui-entrance/floating-glossy-label-pills/FloatingGlossyLabelPills.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/floating-glossy-label-pills/FloatingGlossyLabelPills.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/ui-entrance/floating-glossy-label-pills/FloatingGlossyLabelPills.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.