# Chip Grid Blackout Select

Five option chips fade in one by one in a centered 3+2 layout; the selected one flashes a gray press frame, then within a few frames turns solid black with white text and a subtle 1→1.04→1 bounce, while other chips fade to 18% without moving; remaining chips then clear, and the black chip rises and narrows as a calculation row appears below.

- Category: interaction · Tags: shotcraft, remotion, interaction
- Spec: 1920×1080 @ 30 fps · 5.5s (16:9)
- License: Apache-2.0 · Tier: free
- JSON: https://gimgs.net/motion/chip-grid-single-select-blackout.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/chip-grid-single-select-blackout/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/chip-grid-single-select-blackout.html

## Params

_No params._

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

## Prompt

## When to use

Interactive demos of single-select/plan/tier picking; the "what happens after you pick it" causal shot; pricing/parameter-checkout flows.

## Intention

One gray flash frame plus a three-frame reverse-to-black split apart real UI's `:active → :selected` two-stage state into separate beats. Viewers see a "finger press" and then a "system confirms," rather than one gradient. Other chips drop to 18% opacity but their positions never move — if they reflowed, viewers would think the page reloaded, and the semantics of "single select" would be lost.

## Duration & energy

- Duration: About 5.0s (150f@30fps).
- Energy: Medium-low (the only burst is that one gray flash frame; the rest is settling).

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

## 意图
一帧灰闪 + 三帧反黑，是把真实 UI 的 `:active → :selected` 两级状态
拆开演。观众看到的是"手指按下"再"系统确认"，而不是一次渐变。其余
chip 降到 18% 而**位置绝不移动**：一旦重排，观众会以为页面刷新了，
"单选"的语义就丢了。

## 动效核心
- 5 个 chip 分 3+2 两行居中（top 96/136，gap 10，高 30、圆角 15），
  按 `d = 0.05 + i*0.028` 逐个 outQuad 淡入（各 0.04）
- **1 帧按压灰闪**：`seg(FS, FS+0.006) * (1 − seg(FS+0.006, FS+0.014))`，
  `rgba(120,120,120,.5)` 覆盖层（FS=0.44，0.006×5000ms ≈ 1 帧）
- **反黑**：`seg(FS+0.008 → FS+0.04, linear)`（≈5 帧）驱动
  背景 `#fff→INK`、描边 `LINE→INK`、文字 `TXT→#fff`
- **按压回弹**：`sc = 1 + sin(pr·π)*0.04`，`pr` 走 FS+0.008→FS+0.075
  ——正弦保证起止都精确回到 1，不需要额外关键帧
- **余项降级**：`fade = seg(FS+0.008 → FS+0.075, outQuad)` 把 opacity
  压到 `lerp(fade, 1, 0.18)` = 18%，`transform` 恒为 `none`
- **收束**：`lift = seg(FS+0.30 → FS+0.42, inOutCubic)`（选中后≈1.5s）
  余项 opacity 归零，黑 chip `translate(cx·lift, −46·lift)` + `scale→0.82`；
  `cx = 220 − (offsetLeft + width/2)` 只测一次，让它上移时同时回到中线
- 算式行 `FS+0.36→FS+0.42` 浮现，随后逐词加深到 t≈0.98

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 入场 | 间隔 0.028、各 0.04、outQuad | 5 个 chip 在前 0.2 铺完，把时间留给选中段 |
| 选中时刻 | FS = 0.44（约全片中点） | 前半读题、后半看结果；FS 早于 0.3 观众还没读完选项 |
| 灰闪 | 0.006 亮 + 0.008 落，rgba(120,120,120,.5) | **就一帧**：给 2 帧以上就读作 hover 高亮，不是按下 |
| 反黑 | FS+0.008→FS+0.04 linear（≈5f） | linear 是故意的：加 ease 会让"变黑"这件事有过程感，太软 |
| 按压回弹 | 1 + sin(pr·π)·0.04，跨 0.067 | 0.04 是极轻；到 0.1 就成了弹跳按钮，抢戏 |
| 余项降级 | 降到 18%，位置 transform:none | **位置锁死是命门**：降到 18% 仍在原位，才读作"没被选中"而非"消失了" |
| 收束时刻 | FS+0.30（选中后≈1.5s）起，0.12 inOutCubic | 1.5s 是让观众看清选中态的最短驻留；缩到 0.5s 就赶 |
| 上移收窄 | translateY −46px、scale→0.82，横向补 cx 回中线 | 不补 cx 的话上移后会偏在左边，读作"被拖走" |

## 已知坑
- `cx` 用 `measured` 标志只测一次（首帧 `offsetWidth` 可能为 0 所以要
  判空）——每帧重测会在 chip 自身缩放后越算越偏
- 其余 chip 的 `transform` 必须显式写 `'none'`，靠 flex 自动重排会让
  它们在余项归零时横向滑动
- 选中项要在同一个 flex 行里做 translate，不能改 `position`，
  否则触发行内重排、其余 chip 位置跟着变
- 占位内容：5 条 "Option … plan" 选项名 + 算式行
  "18% off · 42.00 → 34.44"，落地全部替换；选项名过长会撑破单行
  （第三条已是长名压力测试）
- 与 `chip-lift-to-user-pill` 分工：那张选中后**横向生长成新对象**，
  本卡选中后**上移收窄让位给结果**；同一片子里两者不要连用

## 参考实现
demos/interaction/chip-grid-single-select-blackout/
（ChipGridSingleSelectBlackout.tsx）

## Reference implementation (Remotion)

- demos/interaction/chip-grid-single-select-blackout/ChipGridSingleSelectBlackout.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/chip-grid-single-select-blackout/ChipGridSingleSelectBlackout.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/interaction/chip-grid-single-select-blackout/ChipGridSingleSelectBlackout.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.