# Hatch to real data

Diagonal-hatched placeholder bars wipe-extend, then the hatching fades as a solid accent-colored layer fades in with values popping up, the placeholder chart turning into a real bar chart.

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

## Params

_No params._

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

## Prompt

## When to use

The "from draft to real data" narrative beat; a dashboard/report feature intro, or a segment emphasizing real-time data.

## Intention

Shoot the product moment of "a placeholder becoming real data" as a visible material transformation: first, 45° diagonal-hatched bars sketch the sense of "data will go here", then a solid color layer replaces them in place — the geometry never moves, only the skin changes — what the audience reads is "the same thing came alive".

## Duration & energy

- Duration: About 4.4s (132f@30fps; growth 0–1.7s · transformation 2.2–3.4s · a settling micro-tremor)
- Energy: Medium (progressive information, no explosive peak; the material transition itself creates the "it's live" moment)

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

## 意图
把"占位符变成真数据"这个产品瞬间拍成看得见的材质转换：先用 45° 斜纹条画出"这里将有数据"的草稿感，再让实心色层原位替换——几何完全不动、只换皮肤，观众读到的是"同一样东西活了"。

## 动效核心
- 5 条横柱按 `0.06 + i*0.05` 错峰生长，各 0.22 时长 `outCubic` wipe 伸长到目标宽度（0.4–0.95 归一化）
- 生长阶段斜纹层（`repeating-linear-gradient 45°` + 同色描边）与实心层同宽同步长，但实心层 opacity=0——蜕变只是交叉淡化，宽度曲线共用，保证几何零跳变
- t=0.5 起按 `0.5 + i*0.03` 逐条蜕变（0.14 时长）：斜纹 `1-morph` 淡出、实心 `morph` 淡入，标签同拍从灰变暗灰（视觉重心让给数据）
- 数值文字 `w*420 K` 挂在柱端 `left: calc(w% + 8px)`，随蜕变淡入
- t=0.7–0.85 全体柱宽乘 `1 + sin(t*30 + i*2.1)*0.02` 微颤——"活数据在呼吸"的暗示
- 表头 METRICS ● LIVE 行 t=0.62–0.78 从上方 30px 滑入，宣告蜕变完成

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 错峰间隔 | 生长 0.05/条、蜕变 0.03/条 | 生长间隔可到 0.08 增强"逐条点亮"；蜕变间隔别超 0.05，拖长会读作故障闪烁 |
| 生长时长 | 0.22（outCubic） | 缩到 0.15 更利落；配合错峰保证末条 ≤0.5 长完，给蜕变留窗口 |
| 蜕变窗口 | 0.5 起、每条 0.14 交叉淡化 | 这是卡点位——BGM 重音应压在首条蜕变（t=0.5）上 |
| 柱宽数据 | [0.85, 0.55, 0.95, 0.4, 0.7] | 换成真实数据比例即可；最长条 ≥0.9 保证画面有满幅锚点 |
| 微颤幅度 | ±2%，t=0.7–0.85 | >4% 读作抖动 bug；不想要"呼吸感"可归零，但收尾会偏死板 |
| 强调色 | `ACCENT='#5B8DEF'` / `ACCENT_HI='#8FB2F7'` | 双常量整体换肤；HI 用于数值文字，保持同族但更亮 |

## 已知坑
- 斜纹层和实心层宽度必须共用同一条 `grow` 曲线——分开算会在蜕变瞬间产生 1–2px 宽度跳变，"原位换皮"的错觉立刻穿帮
- 标签（SERIES_A 等）是占位词，换项目真实指标名时注意 70px 定宽标签列，超长会被裁
- 数值 `w*420` 是演示映射，接真数据时换成实际数值格式化函数，但保持"随 grow 滚动"（终值 ×grow）的读数感
- 微颤用全局 t 驱动（`sin(t*30)`），改动画总时长 dur 会改变颤动频率，需重新目检

## 参考实现
demos/data/hatch-depth/
（HatchDepth.tsx）

## Reference implementation (Remotion)

- demos/data/hatch-depth/HatchDepth.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/hatch-depth/HatchDepth.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/hatch-depth/HatchDepth.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.