# Circle Match Iris Cut

An iris wipe bursts open from the center of a circular element on the page, and the new page's circular chart lands on that same circle inside the ring — a match cut that gives the iris a semantic anchor.

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

## Params

_No params._

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

## Prompt

## When to use

Cuts where the foreground has a circular element (avatar/icon/round button) and the background has a circular subject (donut chart/circular progress); a transition-technique card.

## Intention

A plain iris wipe (the vocabulary's original entry) opens from any arbitrary point, and viewers only read "page changed." This card welds it to a match cut: the iris must burst from the center of a real circular element in the foreground, and the new page that grows inside it has a circular chart that lands right on that same circle — what viewers see is "the avatar's circle became the chart's circle," and the circle itself carries the narrative (this person → this person's data). This is a match cut's UI-native form: it doesn't rely on compositional coincidence, it relies on circle-to-circle semantics. Same family as the crossing-three-style cards ("the background is already present inside the foreground"), but the anchor here is an abstract shape rather than a container.

## Duration & energy

- Duration: 4.7s (anchor pulse 30f + iris expansion 45f + chart growth 55f + hold 40f).
- Energy: Medium-high

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

## 意图
普通 iris 光圈（词汇表原条目）从任意点开圈，观众只读到"换页了"。
本卡把它和 match-cut 焊死：光圈必须从前景一个**真实圆形元素**的圆心
炸开，圈内长出的新页里有个圆形图表恰好接在同一个圆上——观众看到的
是"头像的圆变成了图表的圆"，圆形本身完成叙事（这个人→这个人的数据）。
这是 match-cut 在 UI 语境里的落地形态：不靠构图巧合，靠语义圆对圆。
与穿越三式同属"后景在前景里预先在场"，但锚点是抽象形状而非容器。

## 动效核心
- **两景的圆严格同心是命门**：锚点圆心写死为一组常量（demo：CX=308,
  CY=384.8，手算自布局），clip-path circle、新景圆环、脉冲光环全部
  引用同一组常量——坐标各算各的必然错心
- 定睛引导：光圈开圈前锚点元素两次放大脉冲 + 两道扩散光环（30f），
  把视线钉在圆上再动
- 光圈 `clip-path: circle(r at x y)`，r 22→2100px（45f inOut cubic）；
  新景圆环同窗从 22→170px 生长——**接圆发生在扩张中途**（观众在
  光圈还没吃满屏时就看到圆被接住了），不是开完圈再画图
- 圆环 sweep：strokeDasharray = sweep×周长，rotate(-90) 从顶部起笔，
  中央数字随 sweep 同步计数

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 锚点脉冲 | 2 次 scale 1→1.15 + 光环扩两道 / 30f | 没有定睛引导，开圈瞬间观众找不到圆心 |
| 光圈扩张 | 22→2100px / 45f Easing.inOut(cubic) | 快于 30f 接圆读不到；圆心偏移 >10px 一眼穿帮 |
| 接圆时机 | 圆环在光圈扩张中途（~40% 进度）即可见并同心生长 | 开完圈再长图表 = 普通转场+普通图表动画，匹配感归零 |
| sweep | 45–100f 到目标值，数字同步计数 | 数字与 sweep 异步读作两个动画 |
| 收尾 | sweep 完成后真静止 ≥40f | R1 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 真实素材上锚点坐标从截图量测（devtools/标尺），量到的是元素盒不是
  视觉圆心——带内边距的头像取内容圆心；量完渲一帧对不齐就调常量，
  别信第一次量的数（同 transition-travel C 腔心判例）
- 前景锚点必须是**真圆**：圆角方块（border-radius < 50%）当锚点，
  开圈瞬间方圆错型一眼假；demo 里就是用白补丁把方块盖成真圆的
- 语义要成对：头像→个人数据、产品图标→产品指标——圆对圆只是形，
  "这个圆的内容变成它的展开"才是匹配剪辑成立的因
- 一缝一式规矩同 shot-transitions；本卡自带图表生长段，圈内新景
  别再叠入场动效

## 参考实现
demos/transition/circle-match-iris/
（CircleMatchIris.tsx）

## Reference implementation (Remotion)

- demos/transition/circle-match-iris/CircleMatchIris.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/circle-match-iris/CircleMatchIris.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/transition/circle-match-iris/CircleMatchIris.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.