# Glass pill dictation typing

On black, a glass pill pops in at 1.25× then eases to size, an accent light sweeping inside; the cursor leads, placeholder text types in as the glow dims with typing progress, ending as a neutral dark glass bar.

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

## Params

_No params._

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

## Prompt

## When to use

The entrance of a voice/AI input box; an interaction cue for "talk to it"; a quiet transitional beat between high-energy segments.

## Intention

Tell a small story with "the light dims as input arrives": while idle it glows (waiting for you to speak), and the moment you start talking it hands the glow over to the text. In 1.7s only three things happen — pop in, type, light fades. Any extra motion (bounce, color change, icon animation) would break this beat's function as a rest.

## Duration & energy

- Duration: About 1.7s (50f@30fps)
- Energy: Low (the quietest beat in the whole film, only the light receding)

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

## 意图
用"光随输入熄灭"讲一件很小的事：待命时它在发光（等你说话），你一开口
它就把光让给文字。1.7s 里只做三件事——弹出、打字、光退。任何额外动作
（弹跳、色变、图标动画）都会让这一拍不再是休止符。

## 动效核心
- 胶囊高 46px、圆角 23px、`padding: 0 8px 0 16px`，**定宽**
  `PW = 文本实测宽 + 168px`（≈整句宽度的 2 倍），不随打字伸缩
- 出场 `scale 1.25→1`，`seg(0→0.22, outCubic)`（≈0.36s）；
  opacity 在前 0.025 就跳满——先"在了"再落位
- 内嵌强调色光是一层 `linear-gradient(90deg, α0 → α.35 @42% → α.95 @100%)`
  的左暗右亮渐层（光在胶囊**内部**，不是外部光晕）
- 打字：光标 t≈0.025 先行出现，字符 `seg(0.06→0.73)` 匀速铺完 18 字符，
  尾段保持；光标 `0.75→0.8` 撤掉
- 光熄灭 `g = 1 − seg(0.08→0.76, inOutQuad)`，与打字进度同窗口；
  `g` 同时驱动三层阴影收敛：内描边 `0.16+0.1g`、内顶光
  `0.03+0.04g`、外泛光 `26g px / 0.28g`
- 右端 30px 描边圆角方块内 5 根竖条声波，基准高 `[13,7,10,6,9]`
  （左高右低），叠 `±1.6·sin(t·18 + i·1.7)` 极轻呼吸

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 胶囊定宽 | 文本实测宽 + 168px（≈句宽 2 倍） | **定宽是关键**：随字伸缩会读作 chip 而不是输入条 |
| 出场缩放 | scale 1.25→1，t 0→0.22 outCubic | 1.25 倍是"从观众面前落回去"的量；1.5 倍就成了 pop 弹窗 |
| opacity 时序 | 前 0.025 跳满（早于缩放落位） | 同步淡入会让它像"渐渐出现"，失掉那一下轻微的实感 |
| 内嵌光 | 90deg、0 → .35@42% → .95@100% | 光必须在胶囊内部；改成外 glow 就成了"待通知"而不是"待输入" |
| 打字 | 18 字符，t 0.06→0.73 匀速 | 匀速 ≈ 3f/字符；加 ease 就读作"有人在犹豫" |
| 光熄灭 | 1 → 0，t 0.08→0.76 inOutQuad | 与打字同窗口是全片唯一的因果：光让位给文字 |
| 阴影收敛 | 内描边 0.16+0.1g / 内顶光 0.03+0.04g / 外泛光 26g px | 三层都挂在同一个 g 上，收尾自然落到"中性深色玻璃条" |
| 声波竖条 | 5 根、基准 [13,7,10,6,9]、±1.6px、频率 18 | 幅度到 4px 就成了"正在录音"的活跃态，与"待命"矛盾 |
| 光标 | t≈0.025 先行、0.75→0.8 撤 | 光标先于文字出现，是"输入框已就绪"的信号 |

## 已知坑
- 定宽靠一个 `visibility:hidden` 的测量节点算 `offsetWidth`，字体必须
  与正式文本**完全一致**（`400 21px` + `letter-spacing:.3px`），
  差一档就宽度不对
- 声波竖条是持续呼吸（不受 t 分段控制），所以首尾帧的高度不同——
  用作 loop 素材时要把频率 18 调成 2π 的整数倍
- 打字进度 `floor(seg(…)*len + 1e-6)`，那个 epsilon 是防止末字符在
  t=0.73 整点因浮点误差不出现，别删
- ACCENT_RGB（默认 `146,126,212` 紫）内嵌光与外泛光共用，
  换项目品牌色只改这一个变量
- 占位句 "Speak or type here"（18 字符）；换句要保持字符数接近，
  否则匀速打字的节奏和定宽比例都要重调

## 参考实现
demos/interaction/glass-pill-dictation-typing/
（GlassPillDictationTyping.tsx）

## Reference implementation (Remotion)

- demos/interaction/glass-pill-dictation-typing/GlassPillDictationTyping.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/glass-pill-dictation-typing/GlassPillDictationTyping.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/glass-pill-dictation-typing/GlassPillDictationTyping.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.