# Assemble Then Type Fly-In

On an empty dark grid, wordless UI skeletons fly in from all sides to lock together; then letters fly in via 3D rotation, headline first, until the page forms.

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

## Params

_No params._

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

## Prompt

## When to use

An opening where the page/poster "grows itself"; a capability showcase for layout/design-tool products; a two-stage narrative from skeleton to finished page.

## Intention

Break "page generation" into two semantically distinct stages: first erect the skeleton (frames, cards, dividers, color blocks — all wordless), then fill in text. Text lands via letter-by-letter 3D rotation because the skeleton stage only uses flat translation — the two stages must differ in motion dimension, or viewers can't read "this is step two."

## Duration & energy

- Duration: About 5.2s (156f@30fps).
- Energy: Medium-high (the skeleton phase is sparse, the text phase is dense; energy rises steadily toward the ending).

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

## 意图
把"页面生成"拆成两个语义清楚的阶段：先立骨架（框、卡片、分隔线、
色块，全部无字），再填文字。文字用逐字 3D 旋转落位，是因为骨架段
只有平面位移——两段的运动维度必须不同，否则观众读不出"这是第二步"。

## 动效核心
- 6 个骨架件（顶栏 url pill、右侧短线、logo 点阵、模块卡、CTA pill、
  社交方块）按 `ft` 0.04/0.07/0.10/0.13/0.17/0.20 依次飞入，
  `seg(ft, ft+0.14, outBack)` 过冲贴合，`from` 位移 60–220px + ±8° 旋转
- 骨架运动中 `blur(≤2px)` 残影，`a>0.97` 清零为 `none`
- 13 个文字块按 `start` 0.34→0.76 依次开始：大标题最先（0.34/0.40），
  然后 logo 字标、装饰大字，最后各处 MONO 小标注
- 逐字 3D：每个字符持有确定性种子随机的
  `dx ±170px / dy ±130px / dz −120→−420 / rotateX ±170° / rotateY ±190° /
  rotateZ ±120°`，走 `perspective(600px) translate3d + rotateX/Y/Z`，
  `seg(ft, ft+0.13, outCubic)` 落位，`a>=1` 时 transform 直接设 `none`
- 块内字符间隔自适应：`step = clamp((0.94 − start − 0.13)/字符数, 0.002, 0.012)`
  ——保证不论块多长都在 t≈0.95 前落完
- 随机全部来自 `rand(i) = frac(sin(i*127.1 + 311.7) * 43758.5453)`，
  确定性、可 seek

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 骨架时序 | 6 件，ft 0.04→0.20（间隔 0.03–0.04） | 骨架段占前 35%；压缩到 0.15 内就和文字段糊在一起 |
| 骨架飞入 | outBack、0.14 时长、位移 60–220px + ±8° | 与 `scanline-assemble-flyin` 同一手法，去掉扫描线后靠时序读顺序 |
| 骨架残影 | blur ≤2px，a>0.97 设 none | 阈值留 3% 裕量；直接判 a>=1 会因浮点残留一层糊 |
| 文字起点 | 大标题 0.34/0.40，小标注 0.58→0.76 | 大字先落是可读性要求：小字先落观众会去读小字 |
| 逐字位移 | dx ±170 / dy ±130 / dz −120→−420 | dz 是"从远处来"的主力；只给 dx/dy 就成了平面散入 |
| 逐字旋转 | rotateX/Y/Z 各 ±120°–190° | 大角度才有"翻着飞"的手感；±30° 只像抖动 |
| perspective | 600px（写在每个字符自己的 transform 里） | 值越小透视越夸张；1200px 以上 3D 感基本消失 |
| 字间隔 | clamp((0.94−start−0.13)/n, 0.002, 0.012) | 自适应上限 0.012 是"逐字可辨"的下限速度 |
| 落位清零 | a>=1 → transform:'none' | 不清零会留下 13 个块的合成层，长片会掉帧 |

## 已知坑
- 字符 span 走正常排版流（`display:inline-block`），动画只动 transform——
  不要用绝对定位逐字摆位，换文案就全乱
- 空格字符必须显式塞成 `' '`（代码里用 `ch === ' ' ? ' ' : ch`），
  否则 inline-block 的空 span 宽度归零，词间距消失
- `start` 是手写的 13 个数值，换文案（尤其字符数变化大时）要回看
  最后一块是否仍在 t≈0.95 前落完；`step` 只保证块内，不保证块间
- 内容为中性占位模板（"The headline for your product here" / "Acme Studio"
  等），落地全部替换；A_RGB（`159,182,232`）为强调色槽位
- 与 `scanline-assemble-flyin` 的区别是**没有扫描线**：那张靠扫描线
  解释顺序，这张靠"先骨架后文字"的两段式解释顺序，两者不要混用

## 参考实现
demos/effects/assemble-then-type-flyin/
（AssembleThenTypeFlyin.tsx）

## Reference implementation (Remotion)

- demos/effects/assemble-then-type-flyin/AssembleThenTypeFlyin.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/assemble-then-type-flyin/AssembleThenTypeFlyin.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/effects/assemble-then-type-flyin/AssembleThenTypeFlyin.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.