# Pill chip slot cycle

In "Your `chip` Handled" on white, the word inside a dark pill scrolls like a slot reel while the pill's width smoothly stretches to fit.

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

## Params

_No params._

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

## Prompt

## When to use

Copy patterns like "we've got ___ handled"; a one-line close for a SaaS feature list; a hero-visual beat for light-background brand films

## Intention

Word-slot cycling comes in two schools: keep the sentence out of the way of the change (a fixed-width reel), or let the sentence **accept** the change (the pill stretches and the surrounding text gets pushed apart). This card is the latter — the cost is you have to get the width math right, and the payoff is that the sentence reads as alive: "Your" and "Handled" get pushed along, and the viewer feels the weight of the word inside the pill. The gray ghost items peeking out above and below the pill are a second cue: they signal "this is a scrollable list," priming the viewer to expect the next word.

## Duration & energy

- Duration: About 5.0s (150f@30fps: hold → 3 swaps at 0.25/0.47/0.69 → closing hold)
- Energy: Medium (a steady three-beat rhythm, width stretching is the only continuous motion)

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

## 意图
词槽轮换有两派：让句子躲开变化（宽度固定的滚轮），或者让句子**接受**
变化（胶囊撑宽、两侧文字被挤开）。这卡是后者，代价是必须把宽度算准，
回报是句子读起来活的——"Your" 和 "Handled" 被推着走，观众感到胶囊里
的词有分量。上下露出的灰色幽灵项是第二个记号：它明示"这是个可以滚的
列表"，让观众预期还有下一个词。

## 动效核心
- 宽度预量：setup 期用隐藏 `<span>` 逐词量 `offsetWidth`，各加 74px 内边距
  存成 `widths[]`（带 `o.w.length·13` 兜底，防 setup 时未挂载量不到）
- 位置量 `pos` 由 3 段窗累加：切换点 `[0.25, 0.47, 0.69]`，每窗 0.12
  （≈18f），缓动 `E.inOutCubic`——**两头都缓**，对应"滚轮起步与停稳"
- 内列 `colIn` 竖移 `-pos·48`px（行高 48 = 胶囊高）；胶囊宽度取
  `lerp(frac, widths[ci], widths[ci+1])`，**帧内插值**所以伸缩是连续的，
  两侧 `flex:none` 的文字被 flex 布局自然挤开
- 幽灵项在胶囊外（chipWrap 内）上 -38px / 下 58px，取 `near = round(pos)`
  的前后邻居文本，随滚动微移 `(pos-near)·48·0.5`（**半速视差**，比胶囊内
  的词慢一半，才像"外圈"）
- 幽灵项透明度 `0.13 · (0.4 + settle·0.6)`，`settle = 1 - min(1, |pos-near|·3)`
  ——滚动中途更淡、落定时最清楚
- 每行内是 emoji + 词的两段结构（emoji 18px、词 700 22px 白字），
  胶囊 `#1a1c24` 底 + `0 8px 24px rgba(20,22,40,.22)` 投影 + `overflow:hidden`

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 词表 | 4 词 + emoji（Sales/Workflow/Admin/Reports），3 次切换 | 词长差决定挤开幅度的观感：demo 最短 5 字母最长 8 字母；差 >2 倍胶囊跳变太猛，句子重心左右甩 |
| 切换点 | `[0.25, 0.47, 0.69]`，窗 0.12（≈18f） | 段间约 0.10（≈15f）静置读词；起手 0.25 前的静置让观众先认出句式 |
| 缓动 | `E.inOutCubic` | 两头缓才像滚轮起停；outCubic（只后缓）读作被甩上来，胶囊宽度也会跟着突变 |
| 胶囊 | 高 48px、圆角 99、`#1a1c24`、宽 = 文本宽 + 74 | +74 是左右内边距 + emoji 位；<50 词贴边，>100 胶囊胖成按钮 |
| 幽灵项 | 上 -38 / 下 58px，基础透明度 0.13 | 0.13 是"看得见但不抢"的甜点；>0.25 读作三行并列文字，不是幽灵；删了列表暗示就没了 |
| 幽灵视差 | `(pos-near)·48·0.5`（半速） | 半速是"外圈更远"的立体感来源；同速则三行像一整块滑动，幽灵失去意义 |
| 句子字号 | 两侧 30px/800、胶囊内 22px/700 | 胶囊内比句子小是正确层级（徽章依附句子）；等大或更大就读作两个标题打架 |
| 配色 | 底 `#fbfbfd`、句子 `#15171d`、胶囊白字 | 浅底 + 单一深色块是本卡的身份证；深底版会让胶囊消失，需整套重配 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- **宽度靠 setup 期 `offsetWidth` 实测**：字体没加载完时量到的是回退字体
  的宽度，胶囊会偏窄或偏宽——移植时须确保 webfont 就绪后再量，或改用
  离屏 canvas `measureText`；`length·13` 那条兜底只保证不崩，不保证准
- 词长差要控制在 2 倍内：宽度自适应是本卡的卖点也是风险，
  `Sales`→`Workflow` 这一跳已经是可接受上限，再大句子两侧甩得晃眼
- 两侧文字必须 `flex:none`：不然 flex 会去压缩它们而不是移动它们，
  "挤开"变成"字被压扁"
- 幽灵项文本取 `round(pos)` 的邻居，所以在切换的正中间（pos=x.5）会
  **跳一次文本**——被 `settle` 压到最淡时发生，肉眼基本不可察；但若把
  透明度调高到 0.25+，这一跳就会露出来
- emoji 在不同平台字形宽度不一（尤其 `⚙️` 带变体选择符），会让实测宽度
  漂移几像素；实战建议换成项目自己的单色图标，别依赖系统 emoji
- 与 vertical-word-roll-blur-cycle 分工：那卡宽度固定、裸词、带滚筒 blur
  （词是句子成分），本卡宽度自适应、深色胶囊、带幽灵项（词是徽章）——
  同片只留一个；声音上三次落定是三个节奏点，配轻质开关/胶囊贴合音，
  连发交替双样本，配法纪律见 sound-design.md

## 参考实现
demos/typography/pill-chip-slot-cycle-handled/
（PillChipSlotCycleHandled.tsx）

## Reference implementation (Remotion)

- demos/typography/pill-chip-slot-cycle-handled/PillChipSlotCycleHandled.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/typography/pill-chip-slot-cycle-handled/PillChipSlotCycleHandled.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/typography/pill-chip-slot-cycle-handled/PillChipSlotCycleHandled.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.