# Two code reveals, side by side

The same syntax-highlighted code reveals two ways side by side — left: line-level stagger fading up 8px, right: character-by-character typing keeping each token's original color, with a #3a4468 block cursor on the current character.

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

## Params

_No params._

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

## Prompt

## When to use

Code/config reveal shots; the "just three lines" demo for developer products; a side-by-side reference for choosing between two reveal paces

## Intention

There are really only two honest solutions for revealing code: **whole lines floating up** (reading structure) and **typing one character at a time** (reading process). This card puts both side by side on the same code block as a reference for choosing between them: the left side, 4 lines in 4 beats, done — good for "the code isn't the point, the result is"; the right side, 138 frames to type 59 characters — good for "watch me write it." The key detail is that the right side **never loses its color while typing** — the common mistake is typing in white first and coloring it after, which degrades into a terminal echo, not a code editor.

## Duration & energy

- Duration: ~4.6s (138f@30fps)
- Energy: Medium (the right side keeps typing continuously, the left side resolves in one beat)

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

## 意图
代码揭示只有两种真解法：**整行浮出来**（读的是结构）和**一个字一个字打**
（读的是过程）。这卡把两者并排放在同一段代码上，是选型用的对照镜：
左侧 4 行 4 拍就完，适合"代码不是重点、结果才是"；右侧 138 帧才打完
59 个字符，适合"看我写"。关键细节是右侧**打字不丢色**——常见错误是
打字时先出白字再着色，那就退化成终端回显，不是代码编辑器。

## 动效核心
- token 模型：每行是 `[[文本, 颜色], …]`，6 色板（关键字 #c792ea、
  标识 #e8eaf0、函数 #82aaff、字符串 #c3e88d、标点 #89ddff、注释 #546e7a）
- **左侧行级 stagger**：`seg(t, 0.08+i·0.14, +0.3, E.outCubic)`——行间 0.14
  （≈19f）、单行窗 0.3（≈41f），`opacity = k`、`translateY = (1-k)·8`px
- **右侧逐字符**：`typed = floor(seg(t, 0.08, 0.9) · chars.length)` 线性推进，
  每个字符 span 建的时候就带 token 色，打到时只翻 opacity 0→1 ——
  **着色在 setup 期完成，render 期不碰颜色**，所以字一出来就是对的色
- 光标是背景块不是竖线：`i === typed` 的字符 `background:#3a4468` 且强制
  `opacity:1` —— 下一个待打字符先以色块占位，块往右挪即是光标移动
- 两侧面板同规格（45% 宽、72% 高、#10121a 底 + #1c2030 边框、圆角 8），
  顶部 8px 字距 2px 的小标签 `LINE FADE-IN` / `CHAR TYPING` 标注手法
- 右侧行 `min-height:1.9em` 撑住空行——不撑的话未打的行高度为 0，
  面板内容会随打字往下长（跳版）

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 代码量 | 4 行 / 约 59 字符 | 打字速度 = 字符数 / 113f；行数超过 6 行面板要缩字号，超过 100 字符右侧打不完 |
| 行 stagger | 0.14（≈19f），单行窗 0.3（≈41f） | 19f 是"逐行"可读下限；<8f 四行齐亮没有 stagger，>28f 最后一行等太久 |
| 行位移 | `(1-k)·8`px 上浮 | 8px 是代码块该有的克制幅度；>20px 行像卡片飞进来，抢了代码本身 |
| 打字窗 | `seg(t, 0.08, 0.9)`（11f→124f） | 结束点留 14f 静置读全文；推到 1.0 打完即切，最后一行没人读 |
| 光标块 | `#3a4468` 背景，仅当前字符 | 方块光标是编辑器语感；换成竖线要另加闪烁，代码块里反而更碎 |
| 面板 | 45%×72%、`#10121a` 底、`#1c2030` 边框、圆角 8、12px/1.9 行高 | 1.9 行高是代码可读下限；两侧必须同规格，尺寸不一就不是对照而是两个镜头 |
| 空行占位 | 右侧行 `min-height:1.9em` | 不设则面板随打字长高，整块跳版——这是本卡最容易漏的一处 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- **换成项目代码时字符总数要贴近 59**：右侧打字是把 113f 平摊到全部
  字符上的，代码翻倍则每字符不到 1 帧（糊成整行刷出），代码减半则一字
  一拍慢得像卡顿——改代码量必须同步调打字窗，别只换文案
- 着色必须在 setup 期写进每个 span：render 期改色（先白后染）会把
  "代码编辑器"降级成"终端回显"，这是同类效果最常见的失手
- 左侧行级淡入与右侧逐字符**不同步**（左侧 4 行 ~68f 就收完，右侧要打到
  124f），这是对照镜的本意；若实战只留一侧，另一侧的时间窗要重新铺满全片
- token 数组是手写的，没有真词法分析——换代码时得手动切 token；
  切错色比不着色更糟（关键字被染成字符串色，懂代码的观众立刻出戏）
- 实战里通常**只留一侧**：对照版是选型镜，正片里两块面板一起动会分散
  注意力，选定手法后单面板居中放大

## 参考实现
demos/typography/typing-code-block/
（TypingCodeBlock.tsx）

## Reference implementation (Remotion)

- demos/typography/typing-code-block/TypingCodeBlock.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/typography/typing-code-block/TypingCodeBlock.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/typing-code-block/TypingCodeBlock.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.