{ "slug": "icon-performance-moves", "title": "Icon performance moves", "tagline": "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).", "description": "Two icon-performance styles: pop-burst-confirm, a confirmation burst (checkmark pops with particles and a spreading ring), and attention-bounce, an attention-", "category": "effects", "tags": [ "shotcraft", "remotion", "effects", "interaction" ], "tier": "free", "license": "Apache-2.0", "spec": { "width": 1920, "height": 1080, "fps": 30, "duration": 4.05, "aspect": "16:9" }, "kind": "remotion", "params_schema": { "type": "object", "properties": {} }, "default_params": {}, "preview": { "poster": "https://gimgs.net/motion/media/icon-performance-moves/poster-0ee3ecd8d8a7.jpg", "video": "https://gimgs.net/motion/media/icon-performance-moves/video-5a664b74f90d.mp4" }, "variants": [ { "key": "pop-burst-confirm", "label": "pop-burst-confirm · Confirmation burst", "description": "scale wind-up–overshoot–settle spring + N radial line translations + ring scale/opacity, whole thing ~20f, followed by a label popping in.", "use": "Task completion / successful deployment / checkmark moments, timed to a sound effect", "video": "https://gimgs.net/motion/media/icon-performance-moves/video-5a664b74f90d.mp4", "poster": "https://gimgs.net/motion/media/icon-performance-moves/poster-0ee3ecd8d8a7.jpg" }, { "key": "attention-bounce", "label": "attention-bounce · Attention-seeking bounce", "description": "translateY bounce easing increasing in height + landing-frame scaleX/Y squash + dust particles, on the peak frame the camera pushes in with scale 1.08, settling triggers the panel card to pop in.", "use": "Introducing a new feature: \"look at me\" → the camera looks at it → it opens the panel", "video": "https://gimgs.net/motion/media/icon-performance-moves/video-382cd2c15e19.mp4", "poster": "https://gimgs.net/motion/media/icon-performance-moves/poster-attention-bounce-ec0a87fed9bd.jpg" } ], "credits": { "author": "video-shotcraft (Vincent Wei)", "url": "https://github.com/Vincentwei1021/video-shotcraft" }, "page_url": "https://gimgs.net/motion/icon-performance-moves.html", "json_url": "https://gimgs.net/motion/icon-performance-moves.json", "template_url": "https://gimgs.net/motion/icon-performance-moves/template.html", "play_url": null, "markdown_url": "https://gimgs.net/motion/icon-performance-moves.md", "updated_at": "2026-09-24T07:40:02.802Z", "prompt": "## When to use\n\nHalf-screen icon close-up segments; A is the punctuation mark for \"done/success\", B introduces a new feature.\n\n## Intention\n\nThe 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.\n\n## Duration & energy\n\n- Duration: A: 3–4s / B: 4–5s\n- Energy: A: peak accent / B: build-up intro\n\n## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)\n\n## 意图\n库内图标动画品类首批入库：icon 是镜头怼着拍的表演者，不是 UI 角落的\n微交互。A 是确认时刻的三连爆——大对勾先缩 0.6x 蓄力 3f、弹 1.35x 过冲\n落回，同帧中心射出 10 根短线粒子+一圈描边环从边缘扩到 2.5 倍直径淡出，\n\"部署成功\"不是画出来的是炸出来的；B 是 macOS Dock 语汇——app 图标\n原地连跳 4 次一次比一次高（0.5→1.2 倍 icon 高），每次落地压扁\n（宽 1.2x 高 0.8x）+溅尘点，跳最高那下镜头向它轻推 8%（被吸引），\n落定后弹开功能面板——把\"用户注意力\"剪进叙事。\n\n## 两式选型\n| 式 | 做法 | 适用 |\n|----|------|------|\n| A pop-burst-confirm | scale 蓄力-过冲-落回 spring + N 条径向 line translate + 圆环 scale/opacity，全程 ~20f，随后标签弹出 | 任务完成/部署成功/打勾时刻，卡点音效 |\n| B attention-bounce | translateY 弹跳缓动递增 + 落地帧 scaleX/Y 挤压 + 尘点，峰值帧镜头 scale 1.08 推近，落定触发面板卡弹出 | 新功能引出：\"看我\"→镜头看它→它开面板 |\n\n## 参数表\n| 参数 | 典型值 | 调节手感 |\n|------|--------|----------|\n| icon 尺寸 | 400–500px 高（半屏特写） | 角落小图标做表演没人看见——表演者必须占 C 位 |\n| A 蓄力 | 缩 0.6x 停 3f | anticipation：无蓄力的弹出没有\"爆\"感 |\n| A 粒子/环 | 10 根短线飞 40–60px + 环扩 2.5 倍 | 三件套同帧齐发是\"爆花\"成立条件 |\n| B 递增弹跳 | 4 跳 0.5→1.2 倍 icon 高 | 等高连跳读作 loading；递增才是\"越喊越大声\" |\n| B 落地挤压 | 宽 1.2x 高 0.8x（1–2f） | squash 缺席=没有重量 |\n| B 镜头推近 | 峰值帧 8% | 镜头动作把\"被吸引\"的观众视角演出来 |\n\n## 已知坑\n- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，\n 首次实战须以真实素材回验\n- 同批 bell-swing-alert（铃铛甩摆）淘汰无附言——挂点摆动型 icon\n 表演相性存疑，做新 icon 表演优先弹跳/爆发型\n- A 与 particle-celebrate-hits 同属爆发点缀，同一段落二选一\n- B 首版曾出画框（末跳最高点顶出），弹跳高度与画面上留白先算像素\n- 声音：A 蓄力静默→爆发帧\"pop\"+粒子细响；B 每次落地一声\"duk\"\n 音调递升，面板弹出一声轻\"叮\"\n\n## 参考实现\ndemos/effects/icon-performance-moves/\n（AttentionBounce.tsx / PopBurstConfirm.tsx）\n\n## Reference implementation (Remotion)\n\n- demos/effects/icon-performance-moves/AttentionBounce.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/icon-performance-moves/AttentionBounce.tsx\n- demos/effects/icon-performance-moves/PopBurstConfirm.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/icon-performance-moves/PopBurstConfirm.tsx\n\nThe component imports shared fixtures from `demos/_fixtures` and helpers from `assets/lib` in the repo; SKILL.md there documents the render workflow.\n", "flow": [ { "step": "Read the recipe", "note": "Prompt = when to use, intention, parameter table with typical values and how each one feels, known pitfalls. Treat values as calibrated starting points." }, { "step": "Get the code", "tool": "git", "cmd": "git clone https://github.com/Vincentwei1021/video-shotcraft && cd video-shotcraft && npm install" }, { "step": "Register + render", "tool": "remotion", "cmd": "npx remotion render out.mp4 # component: demos/effects/icon-performance-moves/AttentionBounce.tsx, demos/effects/icon-performance-moves/PopBurstConfirm.tsx" }, { "step": "Or re-implement", "note": "Port the timing/easing from the recipe to HTML + WAAPI (gimgs motion contract) or any engine; keep the same segment windows and easing." } ], "files": [ { "path": "demos/effects/icon-performance-moves/AttentionBounce.tsx", "url": "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/icon-performance-moves/AttentionBounce.tsx" }, { "path": "demos/effects/icon-performance-moves/PopBurstConfirm.tsx", "url": "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/icon-performance-moves/PopBurstConfirm.tsx" } ], "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.", "render": { "engine": "remotion", "frames": 122, "repo": "https://github.com/Vincentwei1021/video-shotcraft", "files": [ "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/icon-performance-moves/AttentionBounce.tsx", "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/icon-performance-moves/PopBurstConfirm.tsx" ], "note": "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 with the template's width/height/fps/duration in Root.tsx, then `npx remotion render 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." }, "source": "// ===== demos/effects/icon-performance-moves/AttentionBounce.tsx =====\n// 求关注弹跳（attention-bounce）——macOS Dock 语汇：icon 原地起跳讨拍\n// 半屏 app 图标（圆角方块+铃形符号）在地面线上连跳 4 次且一次比一次高\n// （首跳 0.5 倍 icon 高 → 末跳 1.2 倍）；每次落地帧压扁（宽 1.2x 高 0.8x）\n// + 落点尘点 2–3 颗；最高那跳镜头整体向 icon 轻推 8%（\"被吸引\"）；\n// 落定后 icon 右侧弹开一张功能面板卡收尾。\n// 节拍：0–12 静置 → 12 起跳（4 跳递增，各 16/18/20/24f）→ ~90 落定 →\n// 92–104 面板卡弹出 → 110 后真静止 40f。帧确定，尘点用 sin 散列。\nimport React from 'react';\nimport { useCurrentFrame, interpolate, Easing } from 'remotion';\nimport { G, Card } from '../../_fixtures/Fixtures';\n\nconst AMBER = '#b45309';\nconst ICON = 400; // icon 边长（半屏级）\nconst GROUND = 940; // 地面线 y（末跳 1.2x 顶点 + 8% 推近后仍贴画面上沿不出框）\nconst CX = 760; // icon 中心 x（右侧留面板位）\n\n// 4 跳：起跳帧、时长、峰高（相对 icon 高）\nconst JUMPS = [\n { start: 12, dur: 16, peak: 0.5 * ICON },\n { start: 30, dur: 18, peak: 0.75 * ICON },\n { start: 50, dur: 20, peak: 0.95 * ICON },\n { start: 72, dur: 24, peak: 1.2 * ICON },\n];\n\nexport const AttentionBounce: React.FC = () => {\n const f = useCurrentFrame();\n\n // 弹跳高度 + 落地挤压\n let y = 0; // 离地高度\n let squash = 0; // 0–1 落地压扁强度\n let stretch = 0; // 空中拉伸强度（速度感）\n JUMPS.forEach((j) => {\n const t = (f - j.start) / j.dur;\n if (t > 0 && t < 1) {\n y = j.peak * 4 * t * (1 - t); // 抛物线\n stretch = Math.abs(1 - 2 * t) * 0.14; // 起跳/下落速度快时拉长\n }\n // 落地帧后 5f 内压扁回弹\n const land = j.start + j.dur;\n if (f >= land && f < land + 6) {\n squash = Math.max(squash, 1 - (f - land) / 6);\n }\n });\n // 起跳前的预压（第一跳前 3f 蹲一下）\n if (f >= 9 && f < 12) squash = Math.max(squash, (f - 9) / 3 * 0.7);\n\n const sx = 1 + squash * 0.2 - stretch * 0.5;\n const sy = 1 - squash * 0.2 + stretch;\n\n // 镜头推近：第 4 跳（最高）期间整体 scale 1→1.08，落定后保持\n const zoomT = interpolate(f, [72, 88], [0, 1], {\n extrapolateLeft: 'clamp',\n extrapolateRight: 'clamp',\n easing: Easing.inOut(Easing.quad),\n });\n const zoom = 1 + 0.08 * zoomT;\n\n // 尘点：每次落地帧生成 3 颗，向两侧飞散淡出（12f 生命）\n const dusts: Array<{ x: number; y: number; r: number; op: number }> = [];\n JUMPS.forEach((j, ji) => {\n const land = j.start + j.dur;\n const life = (f - land) / 12;\n if (life <= 0 || life >= 1) return;\n for (let k = 0; k < 3; k++) {\n const seed = ji * 3 + k;\n const dir = k === 1 ? 0 : k === 0 ? -1 : 1;\n const spread = (60 + 40 * Math.abs(Math.sin(seed * 5.7))) * (ji + 2) * 0.45;\n const e = Easing.out(Easing.cubic)(life);\n dusts.push({\n x: CX + dir * (ICON * 0.42 + spread * e) + (dir === 0 ? 30 * Math.sin(seed * 3.1) * e : 0),\n y: GROUND - 14 - 46 * e * (0.6 + 0.5 * Math.abs(Math.sin(seed * 2.3))),\n r: 12 + 6 * Math.abs(Math.sin(seed * 4.9)) - 8 * life,\n op: (1 - life) * 0.8,\n });\n }\n });\n\n // 功能面板卡：落定后（f=98）从 icon 右侧弹出\n const panelT = interpolate(f, [98, 110], [0, 1], {\n extrapolateLeft: 'clamp',\n extrapolateRight: 'clamp',\n easing: Easing.out(Easing.back(1.8)),\n });\n\n const iconTop = GROUND - ICON - y;\n\n return (\n
\n {/* 镜头层：整体向 icon 轻推 */}\n \n {/* 地面线 */}\n
\n\n {/* 落地尘点 */}\n {dusts.map((d, i) => (\n \n ))}\n\n {/* 影子：随高度缩小变淡 */}\n \n\n {/* app icon：圆角方块 + 铃形符号（自绘 SVG，半屏特写） */}\n \n \n {/* 符号：简洁铃形 */}\n \n \n \n\n {/* 功能面板卡：落定后弹出 */}\n {panelT > 0 && (\n \n \n \n New\n
\n
\n )}\n \n \n );\n};\n\n\n// ===== demos/effects/icon-performance-moves/PopBurstConfirm.tsx =====\n// 爆花确认（pop-burst-confirm）——确认时刻的三连爆\n// 半屏大对勾 icon（圆底+勾）：先缩 0.6x 蓄力 3f → 弹 1.35x 过冲 → 落回 1x，\n// 释放帧同帧中心射出 10 根短线粒子（径向飞出后消失）+ 一圈描边圆环从\n// icon 边缘扩到 2.5 倍直径淡出；随后 \"Deployed\" 小标签弹出。\n// 节拍：0–20 静置（空心圆待确认）→ 20–23 缩 0.6x → 23–27 蓄力 3f →\n// 27 释放（勾画出+粒子+圆环）→ 27–44 过冲落回 → 40–50 标签弹出 → 55 后真静止 65f。\n// 帧确定，无随机源（粒子角度抖动用 sin 散列）。\nimport React from 'react';\nimport { useCurrentFrame, interpolate, Easing } from 'remotion';\nimport { G } from '../../_fixtures/Fixtures';\n\nconst AMBER = '#b45309';\nconst POP = 27; // 释放帧\nconst DUR = 120;\n\nexport const PopBurstConfirm: React.FC = () => {\n const f = useCurrentFrame();\n\n // icon 缩放：蓄力→过冲→落回\n const scale = (() => {\n if (f <= 20) return 1;\n if (f <= 23)\n return interpolate(f, [20, 23], [1, 0.6], { easing: Easing.in(Easing.quad) });\n if (f <= POP) return 0.6;\n if (f <= 33)\n return interpolate(f, [POP, 33], [0.6, 1.35], { easing: Easing.out(Easing.cubic) });\n return interpolate(f, [33, 44], [1.35, 1], {\n extrapolateRight: 'clamp',\n easing: Easing.out(Easing.back(2)),\n });\n })();\n\n // 对勾：释放帧起 8f 内画出（dashoffset 滑窗）\n const checkT = interpolate(f, [POP, POP + 8], [0, 1], {\n extrapolateLeft: 'clamp',\n extrapolateRight: 'clamp',\n easing: Easing.out(Easing.cubic),\n });\n\n // 粒子：释放帧起 14f 径向飞出（幅度加码到 190px 保半屏可感）\n const pt = interpolate(f, [POP, POP + 14], [0, 1], {\n extrapolateLeft: 'clamp',\n extrapolateRight: 'clamp',\n });\n const pDist = 210 + 190 * Easing.out(Easing.cubic)(pt);\n const pLen = 46 * (1 - pt);\n\n // 圆环：释放帧起 20f 从 icon 边缘扩到 2.5 倍直径淡出\n const rt = interpolate(f, [POP, POP + 20], [0, 1], {\n extrapolateLeft: 'clamp',\n extrapolateRight: 'clamp',\n });\n const ringR = 200 + 300 * Easing.out(Easing.cubic)(rt);\n const ringO = 0.85 * (1 - rt);\n const ringW = 16 - 12 * rt;\n\n // 标签：40f 弹出（back 超调）\n const tagT = interpolate(f, [40, 50], [0, 1], {\n extrapolateLeft: 'clamp',\n extrapolateRight: 'clamp',\n easing: Easing.out(Easing.back(2.6)),\n });\n\n const CX = 960;\n const CY = 470;\n\n return (\n
\n {/* 扩散圆环（不随 icon 缩放） */}\n {rt > 0 && rt < 1 && (\n \n \n \n )}\n\n {/* 粒子：10 根短线径向飞出，角度带 sin 散列微抖 */}\n {pt > 0 && pt < 1 && (\n \n {Array.from({ length: 10 }).map((_, i) => {\n const ang = ((i * 36 + 9 * Math.sin(i * 7.31)) * Math.PI) / 180;\n const x1 = 700 + Math.cos(ang) * pDist;\n const y1 = 700 + Math.sin(ang) * pDist;\n const x2 = 700 + Math.cos(ang) * (pDist + pLen);\n const y2 = 700 + Math.sin(ang) * (pDist + pLen);\n return (\n \n );\n })}\n \n )}\n\n {/* 主体 icon：圆底 + 对勾（半屏特写 ~480px） */}\n \n \n {checkT > 0 && (\n \n )}\n \n\n {/* Deployed 小标签 */}\n {tagT > 0 && (\n \n Deployed\n
\n )}\n \n );\n};\n\n\n" }