# Pill slot cycle

A fixed sentence stem stays locked while a pill badge at the end slot-machine-rolls a new word roughly every 0.7s.

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

## Params

_No params._

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

## Prompt

## When to use

The most elegant solution for "feature listing" copy (faster than a bullet list, more semantic than scramble decoding); sections with a one-line value prop plus multiple verb phrases

## Intention

Listing six features would normally need six lines, or six beats of one-by-one fade-ins that fill the whole screen. Word-slot cycling packs them into **a single slot in a single sentence**: the stem "One AI tool to ___" is the promise, each pill rolling through the slot is a piece of evidence, and when the final pill flies off and "do it all." lands, the evidence is complete and the conclusion is sealed. The structure carries a built-in three-act shape: promise → enumeration → close. The critical rule is that the stem **never moves an inch** — the viewer's eyes stay locked on the slot the whole time, and any wobble in the stem breaks the sense of enumeration.

## Duration & energy

- Duration: Entrance 12f + 21f per beat × word count + close 14f + hold; 6 words ~5.8s (demo 175f)
- Energy: Medium (a steady metronome, no peak)

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

## 意图
罗列六个功能，列表要六行、逐条淡入要六拍还占满屏。词槽轮换把它们
塞进**一句话的一个槽位**里：句干 "One AI tool to ___" 是承诺，槽里
滚过的每个 pill 是证据，最后 pill 飞走、"do it all." 落位——证据
列举完毕，结论盖章。结构自带三幕：承诺→列举→收束。命门是句干
**纹丝不动**：观众的眼睛全程钉在槽位上，句干一晃列举感就散。

## 动效核心
- 句干绝对定位左端锚死——**不能用 flex 居中**，pill 宽度变化会带着
  句干重排（首轮踩过的坑，已是判例）
- 每拍 21f（~0.7s），前 8f 完成换位、后 13f 静置——静置段是给观众
  读词的，读不完的拍子等于没换
- 入场：translateY 120→0 + blur 14→4→0，Easing.out(cubic)；
  离场：translateY 0→-130 + blur 0→10，Easing.in(cubic) 加速飞出
  ——新来的减速落定、旧的加速逃走，方向感是"向上翻页"
- 槽内用隐形占位 pill（visibility hidden）撑宽度，新旧两枚绝对定位
  叠放——槽宽随当前词自然变化但不抖
- 收束拍：末 pill 上飞（7f ease-in），"do it all." 从下 90px 带
  Easing.back(1.4) 过冲落位——全片唯一一次过冲，留给结论

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 拍长 | 21f/词，5–7 词 | <16f 读不完短语；>28f 节拍器感散掉；8+ 词观众开始数数 |
| 换位窗 | 拍内前 8f | 拉长到 12f+ 新旧同屏太久，读作两个 pill 打架 |
| 飞行距离 | 入 +120 / 出 -130px | <80px 读作原地闪换；入出不对称（出略远）让离场更决绝 |
| 运动模糊 | 入 14→0 / 出 0→10px blur | 去掉 blur 换位读作硬弹；>20px 中间帧糊成色块 |
| 收束过冲 | Easing.back(1.4)，14f | >2 结论落位像卡通；无过冲结论与列举没有档次差 |
| 收尾 hold | 完整句静置 ≥45f | 这句话是全段目的，不 hold 等于白列举 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 odometer-digit-roll / split-flap-title 分工：那两卡是字符/数位级
  机械滚动（无语义），本卡是整词级 pill 轮换且嵌在活句子里——文案是
  "句干+动词短语"结构才用本卡，纯数字/纯标题词别硬套
- 与 typewriter-moves 分工：打字机是"一个字一个字造句"，本卡是
  "句子造好了换零件"——同片可共存但别在同一句文案上连用
- 与 type-rhythm-sync 分工：那是既有文字随音轨变属性（不换内容），
  本卡换内容——绑音轨时本卡拍点对鼓点即可，别再叠字重脉冲
- pill 短语长度要接近（demo 最长 "Draft an agenda"）——长短差 >2 倍
  槽宽跳变太猛，句子重心左右甩
- 收束句与句干字号字重必须完全一致（demo 都是 96px/800）——
  "do it all." 若比句干大，读作新标题而非句子补完

## 参考实现
demos/typography/pill-slot-cycle/
（PillSlotCycle.tsx）
原片出处：notion-ai 4.5–8.5s

## Reference implementation (Remotion)

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