# Morph from primitive shape

A stroked circle breathes once (anticipation), then its SVG path interpolates over 24f into a rounded card outline, and the content fades in.

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

## Params

_No params._

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

## Prompt

## When to use

Entrances for graphic/icon/card-outline subjects; the classic primitive for a logo turning into a UI container.

## Intention

The entrance library is all "coming in from outside" — flying in, slamming down, flipping — the subject already exists off-screen beforehand. This card is **growing in place**: a stroked circle at the frame's center takes one breath first, then its outline continuously morphs into a rounded rectangle card, and the content fades in after. The primitive's pause-and-breathe is the anticipation beat — the graphic-design translation of Disney's anticipation principle: the circle "inhales" first, so the audience already knows it's about to change, and the transformation itself needs no explanation. Only applies to graphic/icon/card-outline subjects — a bitmap screenshot can't morph.

## Duration & energy

- Duration: ~4.7s (breathing 20f + morph 24f + content fade-in 12f)
- Energy: Medium-low

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

## 意图
入场库全是"从外面进来"——飞入、砸落、翻面，主体都预先存在于画外；
本卡是**就地长出来**：画面中心一个描边正圆先鼓一口气（scale
1→1.12→1），随即轮廓连续变形为圆角矩形卡片，内容再淡入。原型
停留加呼吸这一拍就是预备动作——迪士尼 anticipation 的图形学翻译：
圆先"吸气"，观众就知道它要变，变形本身因此不需要任何解释。
仅适用图形/图标/卡轮廓类主体——位图截图不能 morph。

## 动效核心
- **圆与圆角矩形写成同构 path**：M + 8 段 cubic（4 直边段三等分点
  做退化 cubic + 4 圆角段 kappa 公式 k=4/3·tan(Δθ/4)），逐命令
  数值 lerp 生成 d 字符串，帧驱动全确定性
- 圆锚点取矩形锚点同方位角，保证 t=0 是标准正圆、中途无自交
- 呼吸拍 scale 1→1.12→1（spec 1.06 看不清，加码后可感——可感性
  判例同族）；呼吸与变形都用 Easing.inOut(cubic)，interpolate 全 clamp
- 内容是 HTML 层叠在 SVG 上，变形完成后 12f 淡入，不做 path 内嵌
- 时间轴 140f：0–10 静置｜10–30 呼吸｜30–54 变形｜56–68 内容
  淡入｜68–140 真静止 72f

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 呼吸幅度 | 1→1.12→1，20f inOut cubic | <1.1 读不出"吸气"；>1.2 像要爆炸不是要变形 |
| 原型停留 | 静置 10f + 呼吸 20f，合计 30f 才起变形 | 停留 <15f 读不出"预备"，变形显得突兀 |
| 变形时长 | 24f | 太快像切换、太慢像融化；24f 是"生长"的速度 |
| 目标形态 | 520×300 圆角矩形卡（demo 值） | 圆角越大与圆同构性越好、中段越顺 |
| 内容淡入 | 变形落定后 2f 起，12f 淡入 | 变形没完就进内容 = 内容跟着轮廓扭 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- **变形中途别叠其他动画**——morph 本身就是全部信息，同时飞入/
  变色/晃动会把"长出来"稀释成"乱动"
- 位图截图不能 morph：本卡只对矢量轮廓成立，页面截图请回
  入场库常规手法
- path 插值两端命令数必须严格同构（同为 M+8C），命令数不齐
  中途会闪跳；改目标形状时先对齐锚点数再调参
- 变形中段呈"桶形"过渡是正常形态（QA 判例），不是穿帮；
  出现自交/尖刺才是锚点方位角没对齐

## 参考实现
demos/ui-entrance/morph-from-primitive/
（MorphFromPrimitive.tsx）

## Reference implementation (Remotion)

- demos/ui-entrance/morph-from-primitive/MorphFromPrimitive.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/morph-from-primitive/MorphFromPrimitive.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/ui-entrance/morph-from-primitive/MorphFromPrimitive.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.