# Type assembly: four moves

Four type-assembly moves — split-text-stagger, letters rising into place; drift-assembly, letters drifting together; tracking-expand, breathing letter-spacing; text-on-path, flowing in along a curve.

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

## Params

_No params._

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

## Prompt

## When to use

Big-title/tagline entrances; in the same title-entrance family as type-entrance-moves' two styles, split-flap-title, and document-typewriter-reveal — at most 2 per film

## Intention

Title entrances already have a four-style "in-place transform" family (garbled decode / character drop / split-flap / typewriter — letters change form in place). This card adds the "assembly" family: letters gather **from elsewhere** into the title, and the motion path itself is the show. A is piano-key style — every letter slides up from a hidden crop line below, rational and clean, the most general-purpose; B is title-sequence style — letters scatter in with blur, locking in and deepening one by one, a Stranger Things kind of ceremony, good for a brand-name reveal; C is breathing style — letters expand out from a stacked clump as if taking a breath, the quietest of the four, good for lyrical passages; D is semantic style — letters flow in single-file along a rising curve then straighten out, the curve can trace exactly along a chart's growth line, telling text and data in the same frame.

## Duration & energy

- Duration: Single style 4–5s (action segment A ~56f / B ~104f / C ~58f / D ~99f, all including holds)
- Energy: A medium / B medium-high / C low-medium / D medium

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

## 意图
标题入场已有"原位变形系"四式（乱码解码/字符坠落/翻牌/打字机——字
在原地换形态）。本卡补"集结系"：字符从别处**汇聚成**标题，运动轨迹
本身有戏。A 琴键式——每字从看不见的裁切线下滑升，理性利落，通用度
最高；B 片头式——字符四散带模糊漂入、逐个锁定加深，Stranger Things
的仪式感，适合品牌名亮相;C 呼吸式——字母从叠压一团吸一口气展开，
最安静的一式，适合抒情段落；D 语义式——字符沿一条上升曲线鱼贯流入
再摆正，曲线可以正好描着图表增长线走，文字与数据同框叙事。

## 四式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A split-text-stagger 裂升 | 每字 overflow 盒内 translateY(115%→0) 带 10% 过冲，delay i×2f，基线同步生长 | 通用默认；利落理性 |
| B drift-assembly 漂移合拢 | 字符 seed 方向 ±300px + blur 8px 漂入错峰归位，锁定帧加深脉冲，合体后整词呼吸 1.04 | 品牌名/片头级亮相 |
| C tracking-expand 字距呼吸 | 字母从 −0.42em 叠压展开到 0.14em，blur 10→0 同曲线 | 安静抒情段；副标题跟进 |
| D text-on-path 沿线流入 | 字符沿贝塞尔曲线鱼贯滑入（切线角旋转），到达后 12f 摆正水平 | 曲线有语义时（增长线/流程线） |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A 过冲 | 10%（原案 6% 可测不可感，实渲加码） | 正常速度要看得见回落那一下 |
| B 锁定脉冲 | 字色深到 #000 + 描边 0→3px→0 / 8f | 白底上加深+描边，不用发光（判例） |
| B 漂移三绑定 | 位移 (1−p)、blur 8(1−p)、opacity 0.35→1 共用一条 p | 三者分曲线走，字会"到了还糊着" |
| C 实现命门 | letter-spacing 恒为终态，逐字符 span 只做 translateX=(1−p)(i−词心)(−0.56em) | 直接动 letter-spacing 逐帧重排必抖 |
| D 摆正 | 到达停 8f 再 12f lerp 到水平基线（y 拉平 rotate→0） | 不摆正就永远是"挂在线上"，读不出标题 |
| D 曲线 | evolve（dashoffset）随最前字符同步生长 | 曲线先画完字再走，读作两个动画 |
| 收尾 | 全员落定真静止 ≥30f | R1 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 标题入场大品类现已八式（本卡四式 + type-entrance-moves 两式 +
  split-flap-title + document-typewriter-reveal），**同片 ≤2 种**（P4）铁律不变
- B 式与 D 式都是高注意力入场，别再叠相机动作——字在飞的时候镜头必须稳
- C 式幅度命门：起始叠压至少 −0.4em 级（每缝 80px+ 位移）才可感，
  −0.1em 级"微展开"正常速度读不出（可感性判例）
- D 式字符在曲线低段会短暂交叠，是鱼贯读感的一部分；但字号 >80px 时
  交叠面积过大会糊成一团，大字改用更长曲线或减字数

## 参考实现
demos/typography/type-assembly-moves/
（LetterformDriftAssembly.tsx / SplitTextStagger.tsx / TextOnPath.tsx / TrackingExpandReveal.tsx）

## Reference implementation (Remotion)

- demos/typography/type-assembly-moves/LetterformDriftAssembly.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/typography/type-assembly-moves/LetterformDriftAssembly.tsx
- demos/typography/type-assembly-moves/SplitTextStagger.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/typography/type-assembly-moves/SplitTextStagger.tsx
- demos/typography/type-assembly-moves/TextOnPath.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/typography/type-assembly-moves/TextOnPath.tsx
- demos/typography/type-assembly-moves/TrackingExpandReveal.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/typography/type-assembly-moves/TrackingExpandReveal.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/type-assembly-moves/LetterformDriftAssembly.tsx, demos/typography/type-assembly-moves/SplitTextStagger.tsx, demos/typography/type-assembly-moves/TextOnPath.tsx, demos/typography/type-assembly-moves/TrackingExpandReveal.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.