# Counter Confetti Celebration

A big number counts up with an easeOutQuart sprint and a scale overshoot; a beat before it lands, 52 confetti pieces burst in from both sides on parabolic arcs, an impact ring expands, and the label's letter-spacing tightens to close.

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

## Params

_No params._

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

## Prompt

## When to use

The celebration beat for milestone/achievement numbers: user count, revenue, downloads — any "pop the champagne" metric reveal.

## Intention

The number isn't "displayed," it "crosses the finish line": the counting curve is fast-then-slow, like a 100m sprint slowing into a finish-line replay, and the confetti bursts a beat before the number lands — the celebration arrives half a beat ahead of the result, emotion outrunning information, so viewers feel excited before they even read the number clearly.

## Duration & energy

- Duration: About 4.6s (138f@30fps; counting 0.3–2.6s · confetti from 2.4s · settles at 3.3s).
- Energy: High (a counting wind-up plus a burst payoff — a textbook emotional-peak shot).

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

## 意图
数字不是"显示"出来的，是"冲线"的：计数曲线前快后慢像百米冲刺进入慢镜，纸屑在数字到位**之前**抢拍爆开——庆祝比结果先到半拍，情绪压过信息，观众先兴奋再看清数字。

## 动效核心
- 计数走 easeOutQuart（t=0.06–0.56）：前 1/3 时间跑完 2/3 数值，符合"冲刺-减速-压线"的体感；`toLocaleString` 千分位格式
- 数字 scale 两段：0.2→1.3 冲入（outCubic），计数到位后 1.3→1 回落（outBack 轻弹）——大一号入场、落定收正
- **抢拍**：纸屑 BURST=0.52 早于计数到位 0.56——庆祝先于结果 0.04（约 5 帧），这半拍是这张卡的灵魂
- 52 片纸屑真物理：从画面两侧 ±250px 出发，初速 vx 150–450 向中冲 / vy −230~−450 上抛，重力 g 900–1420 拉回，自转 ±750°，每片错峰 ≤0.06
- 到位冲击环：0.545 起 scale 0.35→2.95 扩散淡出（outQuart）；标签 0.62 淡入且字距 11px→5px 收紧——"落章"感

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 计数曲线 | easeOutQuart，0.06–0.56 | 换 outCubic 冲刺感减弱；线性计数是最常见的"没有情绪"写法 |
| 抢拍量 | BURST 提前 0.04 | 提前 0–0.02 读作同拍；>0.08 纸屑像"别人的庆祝" |
| 纸屑数量 | 52 片（8 色调色板） | <30 稀疏不成雨；>80 遮数字。PAL 是"演出彩纸"，一般不随品牌换色 |
| 重力/初速比 | g≈2.5×|vy| | 决定抛物线顶点在画面上 1/3 处；g 太小纸屑飘出画顶 |
| scale 过冲 | 1.3 峰值 + outBack 回落 | 数字是主角，过冲 >1.5 会撞到标签排版 |
| 终值 | p*1000（演示值） | 换真实数字：保持"从 0 滚到终值"，跳变起点会丢冲刺感 |

## 已知坑
- 纸屑物理用 `life = u*1.1` 的归一化秒——改 dur 后重力体感会变（同 u 对应不同真实时长），需重调 g/vy
- 抢拍差 0.04 是硬编码在 BURST 与计数终点两处的常量，改计数窗口时同步平移 BURST 保持提前量
- 纸屑 opacity 尾段 0.74 起衰减到 0.05——别让纸屑活到 t=1 还在飞，落定段（标签收字距）需要干净背景
- 配 SFX：计数段 tick 渐密 + BURST 拍 pop/confetti + 到位拍 impact——三层缺一情绪都塌（对照 sound-design.md counter 类）

## 参考实现
demos/data/counter-confetti/
（CounterConfetti.tsx）

## Reference implementation (Remotion)

- demos/data/counter-confetti/CounterConfetti.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/counter-confetti/CounterConfetti.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/data/counter-confetti/CounterConfetti.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.