# Chip Lift to User Pill

A target chip in a grid hard-cuts to inverted black-on-white in 3 frames, other chips fade and shrink out staggered by Manhattan distance to it; the black chip's left edge anchors and grows into a pill, typing out a name letter by letter and lighting a green dot, then a 1px line connects it to a circular badge.

- 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-lift-to-user-pill.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/chip-lift-to-user-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/chip-lift-to-user-pill.html

## Params

_No params._

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

## Prompt

## When to use

The "pick and expand this one from a pile of candidates" interaction flow; feature demos for collaboration/address-book/recipient-style products; a select-to-detail transition.

## Intention

Give "selecting" two completely different textures: the instant of selection is hard (3-frame stepped inversion, like real UI's `:active`), and everything after is soft (the pill growing, letters typing in, the green dot lighting up). Other chips fade out staggered by distance, telling viewers "attention is converging from here" — ordering by distance matters more than ordering by time, because it gives the causality a spatial anchor.

## Duration & energy

- Duration: About 5.0s (150f@30fps).
- Energy: Medium (the moment of selection is a hard burst, everything after is an unhurried grow-and-type).

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

## 意图
让"选中"这件事有**两段完全不同的质感**：选中瞬间是硬的（3 帧台阶化反色，
像真实 UI 的 `:active`），选中之后是软的（药丸生长、逐字打字、绿点点亮）。
其余 chip 按距离交错淡出，是在告诉观众"注意力从这里开始收拢"——
距离排序比时间排序重要，因为它给出了空间上的因果。

## 动效核心
- 4×3 网格（chip 40×24、间距 10/9），目标位于第 2 列第 2 行，
  选中前先 `appendChild` 提到最上层
- **反色硬切**：`a = seg(0.04→0.085, linear)` 再台阶化成
  `a<0.34 ? 0 : a<0.67 ? 0.5 : 1`——只有 3 个取值，得到 3 帧硬切感；
  背景 `#fff→INK`、描边 `LINE→INK`、文字 `TXT→#fff` 同步跳变
- **距离交错淡出**：其余 chip 按曼哈顿距离 `|Δcol|+|Δrow|`，
  `d0 = 0.10 + dist*0.022`，各 0.075 走完（outQuad），
  opacity 1→0 + `scale 1→0.9`
- **左缘锚定生长**：`g = seg(0.26→0.44, outCubic)` 驱动 width 40→190px，
  `left` 不变——生长方向单一，读作"展开"而非"移动"
- 人名逐字：以 `g` 为自变量（不是 t），字符 `0.18 + i*0.062` 起、
  各 0.05 走完，`translateY 2→0`；原 2 字母标签在 `g*5` 内先撤掉
- 绿点 `#35D07F` + `0 0 8px` 辉光，在 `g` 的 0.85→1 段 outBack 弹出，
  `left = w − 15` 始终吸在药丸右端
- 连接线 `0.47→0.57` outQuad 从 0 拉到 90px → 徽标 `0.56→0.63`
  scale 0.8→1 淡入 → 字幕 `0.6→0.66` 出现并逐词加深到 0.92

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 反色时长 | t 0.04→0.085，台阶化成 3 档 | **不要给它缓动**：连续插值读作"渐变高亮"，台阶才读作按下 |
| 距离间隔 | 0.022 / 曼哈顿距离 | 按 index 排序也能错峰，但按距离才有"从选中点扩散"的空间因果 |
| 余项退场 | 各 0.075、opacity→0 + scale→0.9 | 只淡出不缩小会显得"被擦掉"；缩到 0.9 才像退到后面 |
| 药丸生长 | width 40→190px，t 0.26→0.44 outCubic，左缘锚定 | 双向生长（居中扩张）会把它读成弹窗，不是同一个 chip 长大 |
| 逐字打字 | 以 g 为自变量，间隔 0.062、各 0.05 | 挂在 g 上而不是 t 上：改生长时长时打字节奏自动跟随 |
| 绿点 | 7px + 0 0 8px 辉光，g 的 0.85→1 段 outBack | 必须在生长收尾才亮：早了就成了"已在线"，不是"刚接上" |
| 连接线 | 0→90px，t 0.47→0.57 outQuad | 线要在药丸完全定型后才起笔，否则读作药丸在被拽 |
| 徽标 | 26px，0.56→0.63 outCubic，scale 0.8→1 | 与连接线抵达重叠 0.01，才有"线到即物到"的交棒 |

## 已知坑
- 目标 chip 必须在动画前提到 DOM 最上层，否则生长时被右侧 chip 盖住
- 药丸内的人名容器 `left:13px` 是按 24px 高的 chip 配的内边距；
  改 chip 高度要同改，否则文字贴边
- 绿点的 `left = w − 15` 每帧重算——写死坐标后一改 PW1 就飞出药丸
- 连接线与徽标的坐标全部基于 `PX + PW1`（药丸终态右缘），
  改生长终值必须同改这两处
- 占位内容：12 个双字母标签 + 人名 "Casey Doe" + 字幕
  "Starting with Casey"，落地全部替换；人名字符数变化会改变打字总时长
  （间隔 0.062 × 字符数必须留在 g 的 1.0 以内）

## 参考实现
demos/interaction/chip-lift-to-user-pill/
（ChipLiftToUserPill.tsx）

## Reference implementation (Remotion)

- demos/interaction/chip-lift-to-user-pill/ChipLiftToUserPill.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/chip-lift-to-user-pill/ChipLiftToUserPill.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-lift-to-user-pill/ChipLiftToUserPill.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.