# Impact feedback

Two impact-feedback styles: hit-counter, combo counting (a hitch frame plus damage numbers and combo pop-text), and anime-impact, an anime impact frame (negative flash plus speed lines plus chromatic aberration).

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

## Params

_No params._

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

## Prompt

## When to use

The "moment of impact" when an element lands or slams to a stop — gives a smash-in or crash-stop a game-level sense of feedback; pick a style along an intensity ladder.

## Intention

When an element slams into place with no sense of "it landed", the placement just reads as a PPT fly-in. Both game juice (Vlambeer's screenshake theory) and anime impact frames arrive at the same answer: the frames right at impact bite down on time, and that's how the impulse transfers to the audience. The two styles form one intensity ladder: B uses a local hitch frame plus stacked damage numbers and combo pop-text, cutting a feature list into a combo sequence — the strongest narrative feel; C is the heaviest punch — a 3-frame freeze flipped to negative with radiating speed lines, the highest, most stylized intensity level.

## Duration & energy

- Duration: n/a (an element-level technique that piggybacks on a landing action; each style's frame budget is in its parameter table)
- Energy: High (an instant impact)

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

## 意图
元素砸到位却没有"砸到了"的一瞬，落位读作 PPT 飞入。游戏 juice
（Vlambeer screenshake 理论）与动漫演出 impact frames 给了同一答案：
命中的那几帧把时间咬住，冲量才传到观众手上。两式是一条强度阶梯：
B 用局部顿帧叠伤害数字和 combo 跳字，把功能清单剪成一套连招，
叙事感最强；C 是最重的一拳——撞停 3 帧翻负片炸集中线，强调级最高、
最风格化。

## 两式选型表
| 式 | 做法 | 适用 |
|----|------|------|
| B hit-counter 连招计数 | 三卡接连砸入，每命中 = 顿帧 2f + 伤害数字上浮 + ×N 计数跳字逐次加码 | 功能点连打段——"功能很多"用连招讲；游戏化语言浓 |
| C anime-impact 打击帧 | crash-zoom 撞停的 3f 整幅负片反色 + 放射集中线 + 红青色散，第 4f 全撤 | 全片唯一高潮的那一拳；强调级封顶 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| B 节奏 | 三卡各隔 30f，命中前 10f ease-in(quad) 砸落；每命中全局冻结 2f | 间隔均匀才有"连招"节拍感 |
| B 伤害数字 | 落点 scale 1.4→1 + 上浮 40–60px + 12f 渐隐 | 渐隐 >16f 拖泥带水，遮住下一击 |
| B 计数器 | 脉冲峰值 1.3/1.45/1.6、rotate −2/−4/−6°、字号递增，`exp(−t/2.4)` 回落 | 逐次加码是命门——三次一样大读不出"越打越狠" |
| C 急推撞停 | crash-zoom 6f ease-in(cubic) 推到 2.4x，卡心收敛到画面正中 | 急推参数走 crash-zoom-punch 卡 |
| C 冲击帧 | 撞停起 3f：`invert(1) grayscale(1)` + 30 根楔形集中线（每 1–2f 换形态）+ 红/青负片副本 screen 叠加 ±8px 错位；第 4f 全撤 | 3f 是甜点——4f 起观众开始"看清"负片，魔术就穿帮 |
| C 恢复震屏 | 第 4f 起 6px 指数衰减（τ≈2.2f），~12f 收干 | 幅度须过肉眼阈值（可感性判例） |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- B 式顿帧**必须全局**——背景滚动也要一起冻，否则读不出"时间被
  咬住"，只像那张卡掉帧。demo 用统一 remap 帧 df 驱动所有层是命门；
  唯闪白等"冻结期间也要发生"的效果用真实帧 f 驱动
- 帧 remap 与 speed-ramp-freeze 同技术根，同一镜头别叠用两卡——
  两套 remap 互相打架，节奏读作故障
- C 式负片帧在纸墨审美的片子里非常抢戏——限高潮一次，且必须与
  impact 音效同帧落地（拟音走 sound-design），无声的负片帧读作闪坏
- B 式游戏化语言浓（伤害数字/combo 是明晃晃的游戏梗），产品调性
  偏严肃时慎用
- B 式多次顿帧后真实帧比动画时间多出累计冻结帧，排镜头预算时
  按 `真实命中帧 = 动画命中帧 + 已冻结帧数` 折算（demo HITS_REAL）

## 参考实现
demos/effects/impact-feedback/
（AnimeImpact.tsx / HitCounter.tsx）

## Reference implementation (Remotion)

- demos/effects/impact-feedback/AnimeImpact.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/impact-feedback/AnimeImpact.tsx
- demos/effects/impact-feedback/HitCounter.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/impact-feedback/HitCounter.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/impact-feedback/AnimeImpact.tsx, demos/effects/impact-feedback/HitCounter.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.