# Color Block Step Wipe

Two ways a discrete stepped color block swallows the screen — A, a small center bar hard-jumps 3–5 steps to full screen (a badge double-pops once it takes over); B, a block eats the screen diagonally from a corner in 3 jumps, carrying a page card forward one jump at a time.

- 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/color-block-step-wipe.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/color-block-step-wipe/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/color-block-step-wipe.html

## Params

_No params._

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

## Prompt

## When to use

Brand-color transitions/chapter handoffs; "hard, no-easing" pixel-game-feel segments; a solid-color stage to host the next segment after takeover.

## Intention

The wipes already in the library are all continuous sweeps — a boundary moving across at a constant or eased rate. This card goes the other way: zero interpolation, zero easing, the whole time — the color block grows like an old-school pixel game block, every jump a hard cut, completely still between jumps. The choppiness is the rhythm: 3–5 "clack, clack, clack" beats announce more than one smooth sweep ever could. Variant B adds another layer: as the block advances, it carries a content card jumping in the same discrete steps — the card doesn't tween, so it reads as "the whole thing got physically moved in," with the color block as cargo carrier, not decoration.

## Duration & energy

- Duration: A ~2.5s (grow 44f + badge + hold) / B ~1.5–2s (3 jumps 30f + hold); demo total 150f.
- Energy: Medium-high (the energy comes from the punch of the jump, not from speed).

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

## 意图
库里 wipe 类全是连续扫过——边界匀速或缓动地推过去。本卡反着来：
**全程零插值零缓动**，色块像老式像素游戏的方块生长，每一跳都是硬切，
跳与跳之间完全静止。顿挫本身就是节奏：3–5 声"咔、咔、咔"比一次
平滑扫过更有宣告感。变体 B 再加一层：色块推进时携带一张内容卡同拍
离散跳位——卡不做补间，读作"整块被搬进来"，色块是运货的不是装饰的。

## 动效核心
- 核心是 stepVal 帧阈值查表：frame 越过阈值瞬间跳到新值，无插值——
  这是本卡的语法宪法，任何一处混进缓动整卡手感就破
- A 式：宽/高两轴分步跳（demo：w 0→280→820→1340→1920 @ 8f 间隔；
  h 先横条后纵向补齐），先长条后铺满——两轴不同步才有"生长"感
- A 收尾徽章也用阶跃模拟过冲：scale 0→0.55→1.12→1 三跳（52/58/63f）
  ——同一语法贯穿到底，徽章若用 spring 会显得"来自另一部片"
- B 式：clipPath polygon 对角线推进量 p 分 3 档硬跳（0→42→106→200，
  p=200 全覆盖）；携带卡按同一批阈值查表跳位（画外→3 个停靠点）
- 跳位间隔 6–12f 不等距——等距读作 GIF 掉帧，不等距读作"节拍"

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 步数 | A 4–5 跳 / B 3 跳 | ≥7 跳读作低帧率滚动而非阶跃；2 跳读作闪切 |
| 跳位间隔 | 6–12f | <5f 眼睛跟不上"跳了几步"；>16f 中段静止读作卡死 |
| 徽章过冲 | 0.55→1.12→1 三档硬跳 | 改成连续 spring 破语法；过冲档 >1.2 读作弹跳动画 |
| 携带卡 | 与色块同拍跳位，rotate -4° 定角 | 卡若做补间滑动，"整块搬运"手感全失；逐跳换角度读作抖动 |
| 斜角 clip | polygon 直角三角形从角落长出 | 边缘加圆角/羽化即破"硬边"人设 |
| 接管 hold | 铺满后 ≥30f 纯色静置再进下段内容 | 刚铺满就上内容，"吞屏"这一拍没呼吸完 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 wipe-transitions 分工：clock-wipe/blinds 是连续几何边界扫过（顺滑系），
  本卡是离散阶跃（顿挫系）——同片两系并用要隔开段落，紧邻会互相衬得对方像 bug
- 与 shot-transitions 的关系：本卡是"转场+接管"复合体（色块留下当新场底色），
  纯交接不留场的接缝用 shot-transitions 选型，别为了转场硬造一个色块
- **声音强依赖**：每跳一声打点（同 cel-flash-stomp 的 kick 逻辑）——
  无声版阶跃容易被观众读作播放器卡顿
- 阶跃的"故意感"靠对比成立：同段落其他元素须是顺滑补间，全片到处阶跃
  就没人信这是设计
- 实战品牌色：色块用品牌主色，A/B 两式同片可各一次但换色（demo 蓝/红）；
  同色连用两次读作素材复用

## 参考实现
demos/transition/color-block-step-wipe/
（ColorBlockStepWipe.tsx）
原片出处：notion-ai 1.5–3.5s（A 中央阶跃）+ 26–27s（B 斜角吞屏）

## Reference implementation (Remotion)

- demos/transition/color-block-step-wipe/ColorBlockStepWipe.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/color-block-step-wipe/ColorBlockStepWipe.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/color-block-step-wipe/ColorBlockStepWipe.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.