# Geometric wipe transitions

Two geometric wipe transitions — clock-wipe, a radar-hand sweep changing the page, and blinds-slice, 12 vertical strips flipping in staggered waves.

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

## Params

_No params._

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

## Prompt

## When to use

A universal transition where neither the old nor new page moves and a geometric boundary sweeps across to complete the handoff; works anywhere, with no need for a suitable element already in the composition

## Intention

The transition library already has three families: travel-through (drilling in), hidden-cut (concealed), and solid-body (the page as a physical object). This card is the fourth family, **geometric wipe** — neither the old nor new page moves, a geometric boundary sweeps across to complete the handoff, and the wipe's shape carries the meaning: style A's circular sweep is "a dashboard refreshing its data"; style B's strip sweep is "venetian blinds flipping open to change the page." The difference from shot-transitions style F's element-mask wipe: F uses a real element inside the page as the mask (depends on the composition), this card is pure geometry — its universality is the whole point. Choose by meaning: A for data refresh, B for a horizontal page-forward feel.

## Duration & energy

- Duration: Single style: pre-state ≥20f + wipe 32–60f + tail ≥40f, ~5s (150f)
- Energy: Medium

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

## 意图
转场库已有三族：穿越系（钻进去）、藏切系（遮住切）、体块系（页面是
实体）。本卡是第四族**几何擦除系**——新旧页都不动，一条几何边界扫过
完成交接，擦除的形状即语义：A 圆扫是"仪表盘刷新了一屏数据"，B 条扫
是"百叶窗逐叶翻面换页"。与 shot-transitions F 元素遮罩擦除的区别：
F 用页面内真实元素当遮罩（依赖构图），本卡是纯几何形——通用性即定位。
按语义选：数据刷新用 A，横向推进翻页用 B。

## 两式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A clock-wipe | B 页上层套扇形 clip-path polygon，指针从屏心 12 点顺时针匀速扫 360°，扫过处露 B；扫描沿带多层亮线 | 数据/状态刷新语义；仪表盘类页面 |
| B blinds-slice | 12 根 160px 竖条 overflow hidden + 内层整页负 margin 对位；条内 A scaleX(1-p) 左缘收缩、B scaleX(p) 右缘展开，错峰 delay 成波，缝上亮线随波扫 | 翻页/推进语义；横向阅读动线页面 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A 扇形 | 中心屏心(960,540)、半径 1400 盖满四角，固定 73 顶点(SEGS=72) | 顶点数恒定且够密（40+）防锯齿跳变——命门 |
| A 扫速 | 30–90f 指针 0→360° 纯 linear，双向 clamp | 雷达要匀速；加缓动就不是雷达是钟摆 |
| A 亮线 | 四层 SVG line：26px 白 0.35 柔光 + 13px 白 0.60 + 9px 黑 0.55 暗描边 + 4px 白核 | 白底判例：纯提亮不可见，必须加暗描边；首渲 3px 白线太弱，加码 1.5x 才过 |
| B 波 | 20–52f：delay=列号×2f，每条 10f Easing.in(cubic) | 交接点恒为 x+160(1-p)，数学上无露底 |
| B 缝亮线 | 三层 SVG：16px 白 0.45 柔光 + 6px 黑 0.55 暗描边 + 3px 白核，进出各 2f 淡入淡出 | 同 A 白底判例 |
| 摘罩 | A 96f / B 52f 起条件卸载全部擦除结构，B 页直出 | opacity 0 不算摘，残留 clip-path 毁真静止 |
| 收尾 | A 54f / B 98f 真静止（≥40f） | R1 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 擦除边界必须带亮线/高光——无亮线的 wipe 读作 PPT 转场，命门；
  亮线在浅色区靠黑描边、深色区靠白核，两侧都要可读
- A 与 circle-match-iris 的区别：iris 是从锚点炸开的圆（半径在长），
  clock 是角度在扫（半径恒定）——别因为都是圆混用
- 几何擦除全片 ≤2 次，且 A/B 别同片连用（两次"边界扫过"读作模板感）
- 亮线淡出与摘罩必须同帧衔接（A 90–96f 淡出、96f 卸载），
  差一帧就是残线穿帮

## 参考实现
demos/transition/wipe-transitions/
（BlindsSlice.tsx / ClockWipe.tsx）

## Reference implementation (Remotion)

- demos/transition/wipe-transitions/BlindsSlice.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/wipe-transitions/BlindsSlice.tsx
- demos/transition/wipe-transitions/ClockWipe.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/wipe-transitions/ClockWipe.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/wipe-transitions/BlindsSlice.tsx, demos/transition/wipe-transitions/ClockWipe.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.