# Broken-stroke title reveal

Broken strokes into letters — a title breaks into a dozen-plus disconnected stroke segments that light up out of order; 70% unreadable, then the last segment lands and the meaning snaps into place.

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

## Params

_No params._

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

## Prompt

## When to use

A suspense-building product-name/big-number reveal at the open; at most once per film; division of labor with type-assembly/draw-svg-trace: those are "watching letters get assembled/drawn," this card is "meaning delayed to the reveal"

## Intention

The Alien title-card precedent: the title isn't drawn, it "develops" — broken into discrete stroke segments that light up out of order; for the first 70% of the time the viewer sees only mysterious fragments, then in the last few segments' landing moment they suddenly read what the word is. "The instant of recognition" is the hook, and the hook's strength depends on how long the unreadable period is stretched and how late the key segment is held back.

## Duration & energy

- Duration: 4–5s
- Energy: Low start, rising at the close (a suspense type; the landing frame is the energy point)

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

## 意图
《异形》片头判例：标题不是被画出来的，是"显影"出来的——拆成离散
笔画段乱序点亮，观众前 70% 时间只看到神秘碎段，最后几段落位的瞬间
突然读出是什么字。"认出的那一刻"就是钩子，钩子的强度取决于
不可读期撑多久、钥匙段压多晚。

## 动作阶段
| 阶段 | 帧段参考 | 内容 |
|------|------|------|
| 1 暗场 | f0–10 | 空场静置 |
| 2 乱序点亮 | ~f10–105 | 每段 6f（opacity 0→1 + 沿笔画方向 12px 滑入 out cubic），段间隔 6f 错峰 |
| 3 落位脉冲 | 末段落位帧 | 整字 scale 1→1.06→1 脉冲 8f |
| 4 定格 | 末 ≥30f | 真静止，可接 hold 满 1s（R1 品牌位） |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 拆段粒度 | 4 字母 ~16 段（SVG line 粗方端帽，44px 级线宽） | 段太少悬念期短；太碎读作噪点 |
| 乱序表 | 手工排：跨字母乱跳，"可读性钥匙段"（如 H 中横）压到最后 2–3 段 | 顺序点亮 = 没有悬念；钥匙段早出 = 提前泄底 |
| 不可读期 | 总时长的 60–70% 处仍应读不出字 | QA 抽中段帧自问"能猜出来吗"，能猜出就重排 |
| 落位脉冲 | scale 1.06 / 8f | demo 自评 6% 偏含蓄，实战可加大到 1.10 |
| 未亮段 | 条件不渲染（非 opacity 0） | 收尾真静止的前提 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 暗底上的辅助文字用亮灰——demo 首版顶部标题深灰压深底不可见（P1 自检抓到）
- 字数上限：4–6 字母词最佳；长词不可读期难控制，段数爆炸
- 本卡吃"识别瞬间"，标题必须是观众认识的词（产品名/SHIP/LIVE 类），
  生造词没有"认出"可言
- 声音：逐段点亮稀疏轻拟音或无声，落位帧一声 impact + 可接 riser 铺底

## 参考实现
demos/opening/stroke-segment-build/
（StrokeSegmentBuild.tsx）

## Reference implementation (Remotion)

- demos/opening/stroke-segment-build/StrokeSegmentBuild.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/opening/stroke-segment-build/StrokeSegmentBuild.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/stroke-segment-build/StrokeSegmentBuild.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.