# Card Flock Tumble Climax

Three UI page cards tumble in 3D from their thin edges into a staggered lineup (fully sharp, seamless spline motion throughout), keep slowly rotating once settled, then snap-collapse into the center, bursting into a single turbulent smoke ring as a giant wordmark cuts across.

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

## Params

_No params._

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

## Prompt

## When to use

A high-energy climax segment (feature-page cluster → brand slogan burst transition); a neon dark-mode tone; a segment where "multi-page capability" collapses into one line.

## Intention

Three page cards tumble through 3D space like a fanned-out deck of cards being thrown, lining up in a staggered stance, then get instantly sucked into the center and burst into a smoke ring, with a giant brand wordmark punching through it — "capability showcase → energy collapse → slogan burst" in one continuous motion. Three things are critical: seamlessness (from thin-edge to tumble to settling, one continuous Catmull-Rom spline with continuous derivatives — any segmented-interpolation jerkiness will be noticed); never stop (after settling, keep a low angular spin going right up to the collapse — the stillness segment was cut deliberately, "don't stop, keep spinning" — the climax segment has no freeze frames); and full sharpness throughout (all motion blur/depth-of-field blur removed — "do not add blur effects" was a deliberate note).

## Duration & energy

- Duration: Tumble ~1.5s + slow-spin showcase ~0.3s + collapse 0.3s + smoke ring + giant text ~2s; full segment 4.5s.
- Energy: Extremely high (used at the film's absolute energy peak).

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

## 意图
三张页卡像被甩出的扑克在 3D 空间翻飞列队，站定亮相后被瞬间
吸入中心，炸出一圈烟雾环，品牌巨字穿环而出——"能力展示→能量
坍缩→口号爆发"一气呵成。命门有三：**丝滑**（侧棱→翻飞→站定
一条 Catmull-Rom 样条导数连续，分段插值的顿挫会被读出来）、
**不许停**（站定后保持低角速度慢转到收束，静止段被裁"不要停住，
保持旋转"——高潮段没有静帧）、**全程清晰**（motion blur/景深糊
全删，被裁"不要加模糊效果"）。

## 动效核心
- 翻飞：三卡各自 k0（近 90° 侧棱薄边）→k1（翻飞中段）→k2（阶梯
  站定）Catmull-Rom 样条，Easing.out(cubic) 驱动，~44f
- 站定慢转：idle 漂移 ry +0.34°/f、rx -0.1°/f、rz +0.05°/f（14f
  平方缓入避免与样条衔接顿挫），到收束时刻不停
- 收束：10f Easing.in(quad) 从慢转姿态直接加速吸入中心缩小，
  透明度前 60% 满格（"吸入"运动要清晰可读）
- 烟雾环：**单个**（多圈被裁），feTurbulence 三组位移（絮边/亮斑/
  暗斑）+上桃下紫渐变——破碎絮边、明暗斑块、减速外扩缓慢长大、
  衰减极慢驻留，中心无水面光；粒子效果零残留（被裁）
- 巨字：横贯全屏渐显+微放大，霓虹渐变描边

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 三卡间距/大小 | 大幅重叠成一叠阶梯、scale 1.6–1.74 | 两轮加码判例："再靠近一些，再大些"——阶梯要读作一组不是三张 |
| 站定慢转 | ry ~0.34°/f 连续 | **不许静止**（判例）；>1°/f 读作还没站定 |
| 收束时长 | 10f ease-in | 22f 版被裁"要快"；透明度早退=吸入不可读（返工判例） |
| 烟雾环 | 单圈、湍流絮边、衰减极慢 | 多圈被裁；平滑霓虹圈/粒子版被裁——对照原片密帧做湍流质感 |
| 模糊 | 全程零 blur | 翻飞/收束加 blur 均被裁 |
| 样条 | 一条 Catmull-Rom 贯穿 | 分段 lerp 有速度台阶，"丝滑流畅"是裁决原话 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 烟雾环质感判例：干净图形环（描边圆/同心波）三轮被裁，最终版
  feTurbulence 湍流絮边对照原片密帧逐格校——"要一样"；残余差距
  是噪声场静态（整体旋转+长大），无逐帧湍流滚动，极近看流动感弱
- 与 particle-celebrate-hits 分工：那张是粒子礼花打击点；本卡
  烟雾环是能量坍缩的余波，禁加粒子
- 与 bubble-swarm-takeover 分工：那张是群体涌入接管；本卡是
  三卡精确列队+坍缩，数量意义相反

## 参考实现
demos/transition/card-flock-tumble/
（CardFlockTumble.tsx）
原片出处：clickup-30.mp4

## Reference implementation (Remotion)

- demos/transition/card-flock-tumble/CardFlockTumble.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/card-flock-tumble/CardFlockTumble.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/card-flock-tumble/CardFlockTumble.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.