# Particle celebration hits

Confetti cannons fire from both sides, or sparks fizz off the counter each time it ticks past a thousand.

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

## Params

_No params._

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

## Prompt

## When to use

Milestone number/KPI reveal/achievement sections; A for a one-time big celebration, B for continuous small ticks

## Intention

Give the "number reveal" a visual beat you can almost hear: A is the full stop of the reveal moment — two cannons at bottom-left and bottom-right fire on the same frame, hundreds of tumbling confetti pieces arc and cross over the full screen before falling off, pure celebration semantics; B is the comma along the way — every time the counter ticks past a thousand, a small burst of sparks fizzes off the top of the number and falls out dark, with the final value tick doubling into a bigger burst plus a 1.1x number bounce. Both use closed-form ballistics (initial velocity + gravity + decay, computed frame by frame) — no physics engine, fully frame-deterministic.

## Duration & energy

- Duration: A 3–4s / B 4–5s
- Energy: Climax-accent type (must settle back to clean stillness after the burst)

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

## 意图
给"数字揭晓"配可听感的视觉打点：A 是揭晓瞬间的句号——画面左下右下
两门炮同帧开火，上百颗翻转彩屑抛物线交叉飞过全屏再落出画外，纯庆祝
语义；B 是过程中的逗号——计数器每跳过一个整千，数字顶部"叮"地溅一撮
小火星坠落熄灭，终值那跳翻倍爆一大撮+数字弹 1.1x。两式都是闭式弹道
（初速+重力+衰减逐帧公式），免物理引擎、帧确定。

## 两式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A confetti-crossfire | 双炮各 50 颗矩形彩屑：初速 90–150px/f（decay 0.9 下总程 ~900–1500px 才能交叉过中线）、spread 55°、每帧翻转 8–15°；~90f 全部落出画外后条件卸载 | 终值揭晓/发布宣言的一次性高潮 |
| B counter-tick-sparks | tick 帧由计数器同一 interpolate 派生；每 tick 6–10 颗 2px 火星（初速向上 4–6px/f、重力 12–18f 坠灭），终值跳翻倍 20 颗+数字弹 1.1x | 计数爬升过程的节奏打点 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A 初速 | 90–150px/f | 词汇原案 18px/f 在 decay 下只飞 180px 不可感——弹道类幅度按总位移倒推 |
| A 配色 | 灰阶为主 + 1/3 强调色 | 全彩读作 B 端不合品牌；全灰读不出庆祝 |
| B 火星量 | 常规 6–10、终值 20 | 默认档最含蓄，嫌弱可 3 倍量做极端版 |
| 弹道 | 闭式公式（seed 伪随机初速角度） | 每帧独立可算，禁 Math.random |
| 收尾 | 粒子寿命耗尽条件卸载 | 结尾必须真静止，残留粒子=脏帧 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 同批组合款 ring-confetti-blowout（合环×礼炮）、lights-out-tick-burst
  （灭灯×溅火）双双淘汰——**爆发×爆发同质叠加读作过载**；
  本卡两式与其他爆发型手法（slam/impact 系）同帧叠用需谨慎
- A 只配"值得开炮"的时刻，一片一次；连开读作廉价
- 声音：A 双炮"砰砰"错开 1–2f 更有层次；B 每 tick 一声细"叮"

## 参考实现
demos/data/particle-celebrate-hits/
（ConfettiCrossfire.tsx / CounterTickSparks.tsx）

## Reference implementation (Remotion)

- demos/data/particle-celebrate-hits/ConfettiCrossfire.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/particle-celebrate-hits/ConfettiCrossfire.tsx
- demos/data/particle-celebrate-hits/CounterTickSparks.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/particle-celebrate-hits/CounterTickSparks.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/particle-celebrate-hits/ConfettiCrossfire.tsx, demos/data/particle-celebrate-hits/CounterTickSparks.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.