# Letterspace materialize

A wide-tracking wordmark crystallizes with all characters drawn in parallel — every letter starts its stroke on the same frame, growing continuously like handwriting, finishing the word on the same frame.

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

## Params

_No params._

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

## Prompt

## When to use

A brand wordmark entrance for an opener/closer (all-caps wide tracking in the SUPERHUMAN style); chapter titling; a closing frame that needs a quiet, premium feel.

## Intention

A wordmark shouldn't fade in or type in — it should "crystallize": every letter's stroke begins growing continuously at the same instant, as if an invisible hand were writing all the letters at once, finishing the word on the exact same frame. Two crux points: **continuity** (the strokes must be a continuously drawn process, no masking in segments — every intermediate frame should look like "mid-stroke"); **synchrony** (all letters start on the same frame and finish on the same frame — staggering letter by letter is typewriter semantics; this is a whole-word, unified ritual feel).

## Duration & energy

- Duration: Hold ~15f + drawing ~50f + final hold ≥30f; whole segment 3–4s
- Energy: Low (a quiet ritual feel, completed in one breath)

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

## 意图
字标不是淡入也不是打字机，而是"结晶"：全部字母的笔画同时
开始连续生长，像一只看不见的手同时写所有字母，同一瞬间齐收
成词。两个命门：**连续**（笔画必须是连续画出的过程，不许遮罩
分段——先半截再另半截会被读穿；任何中间帧都该像"写到一半"）；
**同步**（所有字母同帧起笔、同帧完成——逐字错峰是打字机语义，
这里是整词一体的仪式感）。

## 动效核心
- 每个字符用骨架笔画 SVG path（单线条字形），pathLength 归一 +
  strokeDashoffset 从 1→0 连续描画
- 全字符共享同一进度 p：同帧起笔、pathLength 归一保证不同笔画
  长度的字母同帧齐收（不做 per-char delay/jitter）
- 字形比例：方正略宽（字面宽高比 ≈1.07，实测判例：竖长字形被
  裁"太竖长"）；细笔画+大字距（letterSpacing ≈0.6em）
- 描画曲线：整体 ease-in-out，中段略快首尾略缓（起笔收笔的手感）
- 底景：氛围渐变/实拍空镜（暮色山景类），字标是画面唯一动作

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 描画时长 | ~50f（f16 起 f68 收 @30fps） | <30f 读不出"画"的过程；>80f 拖 |
| 同步性 | 全字符同帧起收、零错峰 | 判例：逐字错峰版被裁"所有字母是在同一个时间完成书写" |
| 连续性 | pathLength 连续生长、无分段跳变 | 判例：遮罩分段版被裁"应该是连续的笔画画出来" |
| 字形 | 骨架单线、字面宽高比 ~1.07、笔画细 | 竖长（比 <0.8）被裁；粗笔画丢结晶感 |
| 字距 | ~0.6em | 大字距是本卡身份；<0.3em 改用普通描画卡 |
| 终态静置 | ≥30f | 结晶完成后必须让观众读一次整词 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 draw-svg-trace 分工：那张是通用描画（图标/插画/单元素）；
  本卡命门是**全字符同步**的整词结晶仪式，且限品牌字标语境
- 与 type-assembly-moves 分工：那张是字块组装（位移拼合）；
  本卡笔画从无到有生长，字符不位移
- 骨架字形需手绘 path（现成字体轮廓是双线勾边，描画观感不同）；
  9 字形工作量 ≈1h，实战优先复用 demo 里的字形库
- 原片（superhuman-promo）底景是实拍暮色山景+水面倒影；demo 为
  渐变近似，实战建议用实拍/AI 生成空镜

## 参考实现
demos/opening/letterspace-materialize/
（LetterspaceMaterialize.tsx）
原片出处：superhuman-promo.mp4 ≈4.5–6.5s

## Reference implementation (Remotion)

- demos/opening/letterspace-materialize/LetterspaceMaterialize.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/opening/letterspace-materialize/LetterspaceMaterialize.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/opening/letterspace-materialize/LetterspaceMaterialize.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.