# Canvas Materialize Moves

Two ways content "materializes onto the canvas" — panel-to-canvas row-to-card (a panel table row flies out along an arc, morphing across containers into a canvas card) and diagram-cascade tree generation (nodes pop in layer by layer after a typed prompt, with connectors growing before the nodes).

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

## Params

_No params._

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

## Prompt

## When to use

Narrative segments where AI/collaboration tools "land generated results on a canvas"; A tells "existing content changed its form of existence," B tells "a whole structure grows from one sentence."

## Intention

The library's existing generation narratives are only "streaming writes inside a panel" (ai-stream-response's evidence rows flowing into a panel) and "a chart coming alive" (chart-live-moves) — none cover content leaving its container to materialize as a new entity on an open canvas. This card fills that gap: the canvas is the stage, and the generated content is the performer taking it. Style A's key move is cross-container form migration — the same piece of content morphs from a "row" into a "card," with position/size/corner-radius/inner layout interpolating together on one spring, so viewers read "it flew over there and became that" rather than "one got deleted, another got added." Style B's key move is cascading timing — lines pull nodes out, layers feed layers; the sense of structure comes from sequence, not simultaneity.

## Duration & energy

- Duration: A ~4.3s (130f) / B ~5.3s (160f).
- Energy: Medium

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

## 意图
库内生成叙事只有"面板内流式写入"（ai-stream-response 证据行汇入面板）
和"图表自己活起来"（chart-live-moves），没有词管**内容离开容器、在
开放画布上物化成新实体**。本卡补这一块：画布是舞台，生成物是登台的
演员。A 式的命门是跨容器形态迁移——同一条内容从"行"变成"卡"，位置
/宽高/圆角/内容布局在一条 spring 上同步插值，观众读到"是它飞过去
变的"而不是"删一个加一个"；B 式的命门是级联时序——线牵出节点、层
喂出层，结构感来自先后而非同时。

## 两式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A panel-to-canvas 行倒卡 | 复选框逐个自动打勾→按钮按下→三行沿上抛弧线错峰飞出，途中行形态与卡形态交叉淡化，落位带随机倾角；面板行槽塌陷成虚线留白 | 批量导入/一键上板：内容从列表态迁移为空间态 |
| B diagram-cascade 级联生成树 | prompt 逐字敲出（敲完描边变深确认）→根（深色）→2 子→4 孙逐层弹出，折角连线描线先行 8f，成树后整棵呼吸一拍 | AI 生成结构图/脑图/ER 图：一句话长出一棵树 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A 打勾 | 12/22/32f 逐个，spring(damping 10, stiffness 260) pop | 打勾是"预告"，全删观众不知道要飞谁；同帧齐勾读作静态已选 |
| A 起飞错峰 | 按钮 46f 按下，三行 54/60/66f 起飞（错峰 6f） | 同帧齐飞读作复制粘贴；错峰 >12f 尾行像掉队 |
| A 飞行插值 | spring(damping 16, stiffness 60, 34f)；位置走二次贝塞尔，中点上抬 170px | 直线飞读作平移不读作"倒出来"；中点抬 <100px 弧线感消失 |
| A 形态迁移 | 行 560×80 → 卡 480×240，圆角 10→18，rowOp 在 u≈0.45 前灭、cardOp 后亮 | 两套内容交叉淡化必须错开——中段两态同显即穿帮 |
| A 落位倾角 | ±2° 随机（-2/1.5/2） | 全正读作网格排版；>4° 读作散落故障 |
| B 打字 | 1.1 字符/帧，敲完 prompt 条描边 G.border→G.ink 确认 | 无确认态则"敲完"与"开始生成"之间没有因果扣 |
| B 级联时序 | 根 52f 起，层间隔 20f、同层兄弟错峰 6f；节点 spring(damping 11, stiffness 170) | 层间隔 <12f 读作一次性全出；兄弟同帧读作复制 |
| B 连线先行 | SVG 折角 path（父底边→中线→子顶边）描线 16f ease-out，比子节点早 8f | "线牵出节点"是因果感来源；线晚于节点就成了补笔 |
| B 收尾呼吸 | 末节点 +22f 起，以树心为原点 scale 1→1.035→1（sin inOut，28f） | 呼吸是"成树"的句号；>1.06 读作缩放故障 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 ai-stream-response 分工：那卡内容在**面板内**流式落位（结论先到、
  证据随后），本卡内容**离开面板上画布**；同片可串（先流式生成→再倒上画布），
  串用时 A 式的打勾段可省——流式完成态即"已选"
- 与 chart-live-moves 分工：那卡是数据图表自身的活性（流线/点阵/爆轴），
  B 式是结构图的**诞生过程**——图活着≠图正在被生成，别拿 B 式去演已有图表
- A 式行槽必须塌陷成虚线留白——行飞走后原位完好如初，"迁移"就退化成
  "复制"，语义全失
- A 式交叉淡化窗口（rowOp 灭于 u≈0.45 前、cardOp 亮于其后）是防穿帮的
  命门；spring 有过冲，u 可能短暂 >1，内容 opacity 都要 clamp
- B 式呼吸原点必须是树的视觉重心（demo 960,620）而非画面中心，
  不然读作整屏 zoom

## 参考实现
demos/interaction/canvas-materialize-moves/
（DiagramCascadeBuild.tsx / PanelToCanvasMaterialize.tsx）
原片出处：miro-promo 84–92s（A 式）/ 104–116s（B 式）

## Reference implementation (Remotion)

- demos/interaction/canvas-materialize-moves/DiagramCascadeBuild.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/canvas-materialize-moves/DiagramCascadeBuild.tsx
- demos/interaction/canvas-materialize-moves/PanelToCanvasMaterialize.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/canvas-materialize-moves/PanelToCanvasMaterialize.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/interaction/canvas-materialize-moves/DiagramCascadeBuild.tsx, demos/interaction/canvas-materialize-moves/PanelToCanvasMaterialize.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.