# Icon field colorize

A grayscale grid of small icons staggers in to fill the screen, holds a beat, then brand-color bands ripple rapidly downward to colorize everything at once.

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

## Params

_No params._

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

## Prompt

## When to use

Opening lay-out of a product's capability surface (icons = a universe of features) followed by a sudden brand-color hit; feature-collection pages, ecosystem/integration scale displays, a lead-in before the opening logo.

## Intention

First fill "a lot" fully in grayscale — hundreds of small icons stagger in to fill the screen, grayscale keeps them reading as background texture rather than stealing focus; hold a beat so the audience registers "it's full", then brand color sweeps across the whole field very fast as horizontal ripple bands, lighting up the gray world in an instant. The crux is that **the colorization is not a same-frame hard flip**: the original footage measures several color waves sweeping down in sequence within ~0.5s, ending in four color bands layered — the ripple feel gives "lighting up" a direction and a speed; a hard flip just reads as swapping one image for another.

## Duration & energy

- Duration: Staggered appear ~45f + hold ~10f + colorize 12–45f + final hold; whole segment 3–4s
- Energy: Medium (the appearing is the setup, the colorize instant is the only peak)

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

## 意图
先用灰阶把"多"摆足——上百个小图标错峰浮进来铺满画面，灰阶保证
读作背景纹理不抢戏；停一拍让观众意识到"摆满了"，然后品牌色以
横带波纹形式极快扫过全场，灰世界一瞬间被点亮。命门在**翻色不是
同帧硬翻**：原片实测是 ~0.5s 内多道色波依次向下快扫（蓝先覆盖全场，
橙/绿/红依次覆盖更低行带），终态呈四色横带分层——波纹感让"点亮"
有方向和速度，硬翻只读作换了张图。

## 动效核心
- 图标场：150–200 个小图标网格排布（行间半格错位），灰阶 3–4 档
  随机；mulberry32 定分组/灰度/形状
- 浮现：分 ~10 批错峰淡入（批间 4f + 批内 ≤3f 抖动），每个带
  0.55→1.07→1 微弹（ease-out 入 + 7% 过冲回落）
- 静置一拍（~10f）：让"铺满"被读到，翻色前的蓄力
- 翻色：多道色波按行推进，行差 ~1.4f + 列微倾 0.25f + 每图标 ≤1.5f
  抖动（斜切波前沿，不是整行同帧）；每道波从自己的起始行向下覆盖，
  后波覆盖更低行带 → 终态多色横带
- 翻色瞬间该图标 1.22x pop（正弦鼓包 3f），给波前沿加"啪"的质感

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 图标数 | 170（17×10 @1080p，CELL 110px） | <100 读不出"原野"；>250 单个太小翻色 pop 看不见 |
| 浮现总长 | ~45f（10 批 × 4f + 尾批淡入 8f） | 太快读作闪现；>60f 观众等不及爆点 |
| 翻色总长 | 原片 ~12f 全场完成；demo 45f | 越快越爆；教学/慢节奏场合才拉长 |
| 波数 | 4 道（对应终态色带数） | 1 道=单色点亮也成立；波色=品牌色板 |
| 行差 | 1.4f/行 + 列 0.25f 微倾 | 行差 >3f 波读作逐行扫描仪；0 = 硬翻 |
| 翻色 pop | 1.22x 正弦 3f | 无 pop 波前沿读不出来；>1.4x 图标互相打架 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- **翻色不许同帧硬翻**——原片密帧核实为多道波纹快扫（bear-app
  25fps 密帧：蓝→橙/绿/红约 0.5s 内完成），硬翻读作换图无"点亮"感
- 图标需可辨认的实心简笔形（心/星/闪电/对勾…）；抽象色块读不出
  "功能宇宙"语义
- 与 bubble-swarm-takeover 分工：那张是气泡群涌入接管
  画面的运动戏；本卡运动极克制，戏眼在灰→彩的瞬间翻色
- 与 theme-switch-moves 分工：那张是 UI 界面明暗主题切换；本卡
  是装饰性图标场的品牌色点亮，不承载界面语义

## 参考实现
demos/opening/icon-field-colorize/
（IconFieldColorize.tsx）
原片出处：bear-app.mp4 ≈0.0–3.0s

## Reference implementation (Remotion)

- demos/opening/icon-field-colorize/IconFieldColorize.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/opening/icon-field-colorize/IconFieldColorize.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/icon-field-colorize/IconFieldColorize.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.