# Grain dissolve to wordmark

A full line of text bursts into boiling grain noise with a selection box appearing, then the noise cloud rapidly condenses into a larger glowing short wordmark, drift decaying to zero as it freezes.

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

## Params

_No params._

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

## Prompt

## When to use

An "XX. Now Live" style closing launch announcement; the energy-condensing beat where a long sentence compresses into a short brand mark.

## Intention

Shoot "one sentence condensing into one word" as a physical event: the sentence first destabilizes into boiling grain (information disintegrating), a selection box implies "being selected and extracted", then all the grain's energy collapses toward the center into a bigger, brighter short wordmark — what the audience reads is "all of this boils down to this".

## Duration & energy

- Duration: About 2.0s (60f@30fps; granulate 0.26–0.56s · condense 1.2–1.42s · settle and freeze)
- Energy: Medium-high (a brief, one-time energy pulse, a natural outro beat)

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

## 意图
把"一句话浓缩成一个词"拍成物理事件：句子先失稳沸腾成颗粒（信息解体），选区框暗示"正在选中提取"，然后所有颗粒能量向中心坍缩成更大更亮的短字标——观众读到的是"这一切归结为它"。

## 动效核心
- 滤镜链是唯一引擎：`feTurbulence`（fractalNoise，baseFrequency 0.9→1.3）+ `feDisplacementMap`（scale 0→52）+ `feGaussianBlur`（0→1.1px），三者由同一条 `burst` 曲线（t=0.13–0.28，outCubic）驱动
- 噪点"沸腾"靠 `seed = floor(t*46)` 逐帧换种子——每帧一幅新噪声图，颗粒永不静止
- t=0.60–0.71 交叉淡化：整行字（33px）淡出、短字标（54px 粗体）淡入，两者共用同一滤镜——切换发生在最沸腾时，观众看不到换字
- t=0.68–0.90 `lock` 曲线把 displacement scale 和 blur 拉回 0，颗粒"凝固"成清晰字形
- 白辉光三段式：砂化期 0.3 弱光 → 凝聚冲高 0.7 → t=0.88 后回落 0.45，`drop-shadow` 半径 4–24px 同步呼吸
- 斜纹选区框（45° 线阵 + 四角像素棋盘手柄）随 burst 浮现、t=0.55–0.64 撤掉——在凝聚前退场，不抢主体

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| displacement scale | 峰值 52 | <30 只是"轻微毛边"；>80 颗粒散到认不出轮廓，"隐约可辨"是砂化质感的底线 |
| baseFrequency | 0.9 → +0.4 | 越高颗粒越细；低于 0.5 变成大块扭曲不是"砂" |
| seed 换帧率 | floor(t*46)，2s 内 46 次 | 降低会看出噪声图重复；保持 ≥20 次/秒的换图率 |
| 砂化窗口 | 0.13–0.28（outCubic） | 前 0.13 的干净字停留是"失稳前的常态"，砍掉则没有对比 |
| 凝聚交叉 | 0.60–0.71（inOutCubic） | 必须落在最沸腾段内完成换字；提前会穿帮看到两行字叠影 |
| 辉光包络 | burst·0.3 + cond·0.7 − settle·0.45 | 凝聚冲高是卡点位，压 BGM 重音；回落别到 0，留柔光"余温" |

## 已知坑
- 换字标文案（ACME → 项目短标）时两行 `<text>` 都要改：整行句式 `{ XX. Now Live }` 与短标 XX 必须指同一对象，否则叙事断裂
- 短标变长（>6 字符）需同步缩 54px 字号或加宽选区框 bw，否则凝聚后超出框位视觉重心偏移
- `feDisplacementMap` 在 Safari 上性能较差，这张卡是 2s 短拍可接受；拉长时长需实测帧率
- 选区框撤场（0.55–0.64）必须早于凝聚完成（0.71）——框留到凝固后会读作"还没选完"，语义反了

## 参考实现
demos/outro/grain-dissolve/
（GrainDissolve.tsx）

## Reference implementation (Remotion)

- demos/outro/grain-dissolve/GrainDissolve.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/outro/grain-dissolve/GrainDissolve.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/outro/grain-dissolve/GrainDissolve.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.