# Icon performance moves

Two icon-performance styles: pop-burst-confirm, a confirmation burst (checkmark pops with particles and a spreading ring), and attention-bounce, an attention-seeking bounce (icon bounces higher each time, squashing on landing).

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

## Params

_No params._

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

## Prompt

## When to use

Half-screen icon close-up segments; A is the punctuation mark for "done/success", B introduces a new feature.

## Intention

The library's first batch of icon-animation cards: an icon is a performer the camera closes in on, not a micro-interaction in the corner of a UI. A is a triple burst at the moment of confirmation — a big checkmark first shrinks to 0.6x winding up, then pops to 1.35x overshoot and settles back, and on the same frame particle lines shoot from the center plus a ring outline expanding and fading out — "deployment succeeded" isn't drawn, it's exploded into being; B is Dock-style macOS language — the app icon bounces in place 4 times, each higher than the last, squashing with a puff of dust on each landing, and on the highest bounce the camera pushes in toward it, settling to pop open the feature panel — cutting "the user's attention" directly into the narrative.

## Duration & energy

- Duration: A: 3–4s / B: 4–5s
- Energy: A: peak accent / B: build-up intro

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

## 意图
库内图标动画品类首批入库：icon 是镜头怼着拍的表演者，不是 UI 角落的
微交互。A 是确认时刻的三连爆——大对勾先缩 0.6x 蓄力 3f、弹 1.35x 过冲
落回，同帧中心射出 10 根短线粒子+一圈描边环从边缘扩到 2.5 倍直径淡出，
"部署成功"不是画出来的是炸出来的；B 是 macOS Dock 语汇——app 图标
原地连跳 4 次一次比一次高（0.5→1.2 倍 icon 高），每次落地压扁
（宽 1.2x 高 0.8x）+溅尘点，跳最高那下镜头向它轻推 8%（被吸引），
落定后弹开功能面板——把"用户注意力"剪进叙事。

## 两式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A pop-burst-confirm | scale 蓄力-过冲-落回 spring + N 条径向 line translate + 圆环 scale/opacity，全程 ~20f，随后标签弹出 | 任务完成/部署成功/打勾时刻，卡点音效 |
| B attention-bounce | translateY 弹跳缓动递增 + 落地帧 scaleX/Y 挤压 + 尘点，峰值帧镜头 scale 1.08 推近，落定触发面板卡弹出 | 新功能引出："看我"→镜头看它→它开面板 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| icon 尺寸 | 400–500px 高（半屏特写） | 角落小图标做表演没人看见——表演者必须占 C 位 |
| A 蓄力 | 缩 0.6x 停 3f | anticipation：无蓄力的弹出没有"爆"感 |
| A 粒子/环 | 10 根短线飞 40–60px + 环扩 2.5 倍 | 三件套同帧齐发是"爆花"成立条件 |
| B 递增弹跳 | 4 跳 0.5→1.2 倍 icon 高 | 等高连跳读作 loading；递增才是"越喊越大声" |
| B 落地挤压 | 宽 1.2x 高 0.8x（1–2f） | squash 缺席=没有重量 |
| B 镜头推近 | 峰值帧 8% | 镜头动作把"被吸引"的观众视角演出来 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 同批 bell-swing-alert（铃铛甩摆）淘汰无附言——挂点摆动型 icon
  表演相性存疑，做新 icon 表演优先弹跳/爆发型
- A 与 particle-celebrate-hits 同属爆发点缀，同一段落二选一
- B 首版曾出画框（末跳最高点顶出），弹跳高度与画面上留白先算像素
- 声音：A 蓄力静默→爆发帧"pop"+粒子细响；B 每次落地一声"duk"
  音调递升，面板弹出一声轻"叮"

## 参考实现
demos/effects/icon-performance-moves/
（AttentionBounce.tsx / PopBurstConfirm.tsx）

## Reference implementation (Remotion)

- demos/effects/icon-performance-moves/AttentionBounce.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/icon-performance-moves/AttentionBounce.tsx
- demos/effects/icon-performance-moves/PopBurstConfirm.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/icon-performance-moves/PopBurstConfirm.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/effects/icon-performance-moves/AttentionBounce.tsx, demos/effects/icon-performance-moves/PopBurstConfirm.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.