# Typewriter: two moods

Two typewriter moves — terminal-typewriter, typing out a command that detonates a scene change, and error-retype, a delete-and-retype three-act "change of mind."

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

## Params

_No params._

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

## Prompt

## When to use

Developer-product openers (A), slogan/selling-point text cards (B); a text entrance with its own built-in sense of time

## Intention

Typing is the only text entrance with its own built-in sense of time — letters arriving one by one is itself a rhythm, no extra motion needed. A treats typing as a **fuse**: a dark terminal window types out a command character by character, a block cursor blinking in a square wave, and on the Enter frame the camera sharply pushes in on the command line and hard-cuts to the product UI — the command line is the scene's detonator, a developer-product standard; B treats typing as a **monologue**: a mediocre phrase ("just a dashboard") is typed → hesitates → backspaces it away → types the selling point faster ("your command center") — a three-act hesitate-negate-declare drama, all the story in the three different speeds. The difference from scramble-decode: garbled decode is a machine guessing, typing is a person speaking.

## Duration & energy

- Duration: A: ~5s / B: ~5.5s
- Energy: A medium-high / B medium-low

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

## 意图
打字是唯一自带时间性的文字入场——字符一个个到来本身就是节奏，
不需要额外动效。A 把打字当**引信**：暗色终端窗逐字敲出命令、
方块光标方波闪，回车帧镜头急推进命令行硬切产品界面，命令行是
场景的导火索，开发者产品标配；B 把打字当**独白**：逐字打出平庸词
（"just a dashboard"）→ 停顿犹豫 → 退格删掉 → 更快打出卖点词
（"your command center"），犹豫-否定-宣言的三幕剧，戏全在三档
速度差里。与 scramble-decode 的区别：乱码解码是机器在猜，
打字是人在说。

## 两式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A terminal-typewriter | 2f/字符敲出命令，光标 f%12<6 方波闪；回车帧整场景 6f 急推 scale 1→3.2（origin 锁命令行中心）+ 末 2f blur 10px，硬切 dashboard 1.06→1 回稳 | 开发者工具开场；CLI 卖点产品 |
| B error-retype | 打 2f/字符 → 停顿 16f 光标闪两下 → 退 1.5f/字符 → 重打 1.5f/字符无犹豫；光标打删常亮、停顿才闪 | slogan 字卡的"改口"戏；否定式文案 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 字符节奏 | substring(0, floor((f-起点)/步长))，帧确定无插值 | 任何缓动打字都读作加载动画 |
| A 光标 | 方块，f%12<6 方波 | 淡入淡出的光标不是终端是网页 |
| A 急推 | f58–64 scale 1→3.2 Easing.in(cubic)，origin 钉命令行文字中心 | 幅度小于 3x 读作抖了一下，不是"冲进去" |
| A 硬切 | f64 条件挂载切换（终端整棵卸载，blur 随之摘罩），落定回稳 4f | 交叉溶解毁掉引信-爆炸因果 |
| B 三档速度 | 打 2f/字符、删 1.5f、重打 1.5f 且零犹豫 | 三档差必须可感——等速改口读作 bug 不是戏，命门 |
| B 光标三态 | 打删常亮＝果断；停顿 4f 半周期闪两下＝犹豫；完稿闪两下后条件摘除 | 光标就是演员的脸，全程等速闪就没有"犹豫" |
| B 排版 | 逐字符固定宽 span（58px 等宽），左缘锚定 | 变宽字体/整串测宽会逐帧重排抖动 |
| 收尾 | A 静止 ≥77f / B 静止 ≥50f | 光标残留 0.05 opacity 都毁真静止 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 声音强依赖：键击声逐字符对齐、B 退格音调更低（sound-design
  §4.5）——无声打字机只剩字幕机
- A 回车急推是与 crash-zoom 的交棒衔接：急推末帧动势最猛处硬切，
  切后新场景不得再推（一棒只交一次）
- B 全片 ≤1 次——改口是一次性的戏剧转折，改两次口是口吃
- 等宽字体或逐字符 span 二选一必须占一个，否则字符到来时
  整行重排，打字变成抽搐

## 参考实现
demos/typography/typewriter-moves/
（TerminalTypewriter.tsx / TypewriterErrorRetype.tsx）

## Reference implementation (Remotion)

- demos/typography/typewriter-moves/TerminalTypewriter.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/typography/typewriter-moves/TerminalTypewriter.tsx
- demos/typography/typewriter-moves/TypewriterErrorRetype.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/typography/typewriter-moves/TypewriterErrorRetype.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/typewriter-moves/TerminalTypewriter.tsx, demos/typography/typewriter-moves/TypewriterErrorRetype.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.