# Radial Grid Build & Colorize

An 8×7 card grid grows ring by ring from the center to fill up (mixed initials/icons/image placeholders), then ~15% of cards randomly turn red to flag anomalies, with a title legend anchored center.

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

## Params

_No params._

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

## Prompt

## When to use

Data narrative for "anomalies/highlights emerging from a crowd": user base health, monitoring dashboards, batch-status overviews.

## Intention

A two-act structure: Act 1, "the group forms" — cards grow ring by ring from the center, like a colony growing under a microscope; Act 2, "anomalies surface" — once filled, individual cards turn red one after another, forcing the viewer's eye to scan the whole field for red dots. It turns the line "we watch over every item for you" into an experience.

## Duration & energy

- Duration: About 5.6s (168f@30fps; fill 0.5–1.7s · coloring 1.7–3.4s, staggered).
- Energy: Medium (the build phase has rhythm; the coloring phase is a quiet "discovery" moment).

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

## 意图
两幕结构：第一幕"群体成形"——卡片从中心一环环长出，像镜头下的菌落生长；第二幕"异常浮现"——铺满后个别卡片陆续变红，观众的眼睛被迫扫描全场找红点。它把"我们帮你盯着所有项"这句话拍成了体验。

## 动效核心
- 分环 stagger：每格按 `ring = round(hypot((c-3.5), (r-3)/0.85))` 算环号，延迟 `(ring*4 + rand*3)/TOTAL` ——同环内再加 3 帧随机抖动，生长波有机不机械
- 卡片入场只做 opacity（0.018 窗口）+ scale 0.8→1（0.03，outQuad），**无位移**——"长出来"而不是"飞进来"
- 卡片内容三种占位混合（`rand(i*9.1)` 决定）：首字母对（logo 位）、几何图标符（◆▲●✦）、渐变色块（图片位）——实际使用换项目素材（头像/logo/缩略图均可）
- 中央 3×6 区域 `visibility:hidden` 占位不销毁——网格完整性保留，给标题和图例腾出舞台
- 染色幕：15% 的卡片（`rand<0.15`）在 t=0.30–0.60 随机时刻各自 0.036 窗口染色——白底→浅红 #FDECEC、描边→#F6CFCF、状态点绿→红，三通道同拍 mix
- 标题 0.02–0.10 先入（scale 0.98→1），图例（Active/Pending/Inactive 三色点）0.26 跟进

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 生长速度 | 每 4 帧一环 + 3 帧抖动，1.2s 铺满 | 快于 3 帧/环读作"闪现"；抖动砍掉后波前整齐得像机器 |
| 异常比例 | 15% | <8% 观众可能漏看；>25% "异常"变"普遍"，叙事反转 |
| 染色窗口 | 每张 0.036，散布在 0.30–0.60 | 全部同拍染色是警报不是浮现；散布区间越长"陆续发现"感越强 |
| 状态色 | 绿 #37C46B → 红 #F0453A（点），底 #FDECEC | 功能色不随品牌换；底色染红别深过 #F8D8D8，卡片文字要仍可读 |
| 网格规模 | 8×7 − 中央 18 格 = 38 张可见 | 更大网格需同步缩 gap 和字号；中央留空区随标题长度调 |
| 内容混合比 | 首字母/图标/图片 各 1/3（rand 均分） | 全换成同类（如全头像）也成立；混合版本更像"多类型资产"场景 |

## 已知坑
- 中央留空用 `visibility:hidden` 而不是不渲染——删格子会让分环计算的环心偏移，生长波变形
- 染色的三个通道（底/描边/点）必须同一条 cT 曲线驱动，分开会出现"点红了底还白"的中间态
- 图片占位是 CSS 渐变色块，换真实图片时保留 `overflow:hidden` 和 border-radius 继承，注意深色图上状态点要加白描边
- 标题/图例 z-index 在卡片之上但无底板，若换更密的网格需给中央区加半透明底垫保证可读

## 参考实现
demos/data/avatar-grid-radial-build-colorize/
（AvatarGridRadialBuildColorize.tsx）

## Reference implementation (Remotion)

- demos/data/avatar-grid-radial-build-colorize/AvatarGridRadialBuildColorize.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/avatar-grid-radial-build-colorize/AvatarGridRadialBuildColorize.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/data/avatar-grid-radial-build-colorize/AvatarGridRadialBuildColorize.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.