# Fracture assemble & burst

A 5×5 tile grid assembles ring by ring from a 3D fractured state into a full poster, holds a beat for the headline, then all fragments spin away accelerating out of frame.

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

## Params

_No params._

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

## Prompt

## When to use

The opening shot's "from chaos to form" brand/poster reveal; play it forward or take only the second half for a hard transition.

## Intention

Shoot "the product taking shape" as a physical event: fragments fly back to their positions from 3D space, each carrying its own rotation, and the audience watches a complete image grow out of disorder; after holding to read the text, it explodes back out of frame, cleanly handing attention to the next shot. Entry and exit are symmetric, so one piece of footage can be used both forward and reversed.

## Duration & energy

- Duration: About 5.2s (156f@30fps; assembly 0–2.6s · hold 1s · scatter 1.5s)
- Energy: High (high energy at both ends, still in the middle; good for hitting BGM accents at start and end)

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

## 意图
把"产品成形"拍成物理事件：碎片从三维空间各自带着旋转飞回原位，观众看着一面完整画面从无序中长出来；hold 读字后再整体炸出画面，把注意力干净地交给下一镜。进出对称，一支素材可正反两用。

## 动效核心
- 25 块瓦片各自持有确定性伪随机的初始姿态：位移 ±450/±300/±490px（x/y/z）+ 三轴 ±180° 旋转，由 `rand(seed)` 生成，渲染可复现
- 入场按曼哈顿距离波纹 stagger：`delay = (|r-2|+|c-2|) * 0.045`，中心先就位、四角最后，每块 0.34 时长走 `inOutCubic`
- opacity 以 `tin * 2.5` 快速升到 1——碎片远处即近乎实体，避免"淡入感"稀释物理感
- 中央 "REASSEMBLE" 字样 t=0.42–0.52 淡入、0.7–0.78 淡出，占住 hold 段视线
- 退场不淡出：每块沿背离画面中心的方向（`atan2` 计算 + ±0.8 抖动）飞出 620–880px 并加旋 ±150°，`inCubic` 加速，实体出画

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 网格 | 5×5，380×230px，perspective 900px | 瓦片更多波纹更细腻但单块存在感下降；persp <700 透视夸张易穿帮 |
| 初始散布 | dx±450 / dy±300 / dz −210~+490 | 放大散布开场更混沌，但聚合路径变长需同步加 delay 窗口 |
| 波纹间隔 | 0.045/环（曼哈顿距离） | >0.07 波纹感变"逐圈点名"；<0.03 全体近同时到位失去波纹 |
| 入场时长 | 每块 0.34（inOutCubic） | 缩短更"啪"地成形；配合波纹间隔保证末块 ≤0.6 就位 |
| 退场窗口 | 0.70 + delay×0.5 起飞，0.18 时长（inCubic） | **窗口必须收在 t≈0.97 前**：曾因 0.72+delay×0.7/0.26 导致角瓦片出画不完、卡在画框边一秒（判例 2026-08-05） |
| 退场距离 | 620–880px（背离中心 + 随机抖动） | 距离不足会残留在画框边；中心瓦片方向随机（无"背离"可言） |
| 瓦片配色 | `ACCENT_HUE=218` 派生 5 个邻近色相，饱和 14–20% | 改一个色相常量整面换色；饱和拉高即从"中性海报"变品牌色块墙 |

## 已知坑
- 退场用位移出画而非 opacity 淡出——淡出会读作"消失"而非"飞走"，物理感尽失；改参数时保持 `opacity = min(1, tin*2.5)` 不挂退场项
- 所有随机量必须走确定性 `rand(seed)`（等价 Remotion `random()`），真随机会渲染间抖动
- hold 段（t≈0.6–0.7）是唯一读字窗口，加长文案要同步拉开 label 淡出与首块起飞的间隔，否则字还没读完瓦片已散
- 用作转场时建议只取 t=0.7–1 的飞散段倒放/正放各半，两侧素材分别贴在瓦片面上需另做纹理映射

## 参考实现
demos/opening/fracture/
（Fracture.tsx）

## Reference implementation (Remotion)

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