# Input trigger moves

Two input-trigger styles: cursor-performance, a cursor performance push-in click, and keycap-smash-cut, a keycap-fuse detonation hard cut.

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

## Params

_No params._

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

## Prompt

## When to use

First-person segments of a launch film: demoing the core interaction, the opening as the climax; the audience is "using" the product, not "watching" it.

## Intention

The first-person grammar of a launch film — the audience isn't "watching" the product, they're "using" it: the cursor is the hand, the keycap is the fingertip, the trigger itself is the narrative. Both styles share one thing: **the interaction is the trigger, the product visuals are the gunshot**. A is a slow trigger — a cursor with visible personality glides in and clicks, the camera pushes in toward the click point then eases back out, a round trip (unlike crash-zoom: this is slow, anchored to the cursor, and comes back); C is the fuse — a fake-3D keycap hovers breathing, squashes with a bright rim overflow as the fuse, and pressing it detonates a full-screen roar, the most climactic frame hard-cutting into a perfectly still full view — press → burst → verdict. Pick A to demo an interaction, C for an opening that's already the climax.

## Duration & energy

- Duration: A: ~5s / C: ~5s
- Energy: A: Medium / C: High

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

## 意图
发布片的第一人称语法——观众不是在"看"产品，是在"用"产品：光标
是手、键帽是指尖、触发即叙事。两式共同点：**交互动作当扳机，产品
画面当枪响**。A 是慢扳机——放大光标带性格地滑入点击，镜头以点击点
推近再缓退，有去有回（区别 crash-zoom：慢速、锚定光标、会回来）；
C 是引信——假 3D 键帽（⌘K）呼吸悬浮，3f 压扁+底部亮环溢出当引信，
按下引爆 30f 满屏轰鸣，最高潮一帧猛切成整齐静止全景，
按下→爆发→定论。选型：演示交互用 A，开场即高潮用 C。

## 两式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A cursor-performance | 光标三次贝塞尔弧线滑入+末端甩腕过冲，悬停提亮，点击帧按钮下陷+涟漪+推近 1.4x 停两拍缓退 | 核心按钮/交互的演示特写 |
| C keycap-smash-cut | 键帽呼吸悬浮→3f 压扁+亮环引信 + 30f 卡片四面冲镜持续加速轰鸣 + 动势最猛一帧硬切静止全景、键帽嵌顶栏 | 全片开场定论；能量最高 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A 甩腕 | 贝塞尔 t 到 f24 过冲 1.05 再 6f 拐回 | 无过冲的直线滑入没有"性格" |
| A 悬停提亮 | 深底 #2f2f2f→#555553（4f）+ scale 1.05 | 白底提亮不可见（提亮判例），深色底才成立 |
| A 涟漪 | 直径 60→380 out-cubic 22f 扩散 / opacity 0.9→0 线性 26f 消散，解耦；f66 条件卸载 | 扩散消散同曲线读作一坨淡出 |
| A 推近 | f40–52 scale 1→1.4（与点击同帧起跳）→停 20f→18f inOut 退回；origin 钉点击点 | 光标与按钮必须同缩放层，否则推近漂移 |
| C 引信压扁 | box-shadow 厚度 12→3px、3f 完成 + 下沉 14px + 键面变暗；亮环 out-cubic 90→560px 扩散、线性消散解耦 | 厚度被压扁的 3f 是灵魂——命门；无厚度差只是变色 |
| C 轰鸣 | 28–58f 六物两轮 pass（第二轮更短）Easing.in(quad) 加速 + scale 1.5→3 + blur 1→5px 速度门控 | 全程必须一直在加速，匀速轰鸣泄劲 |
| C 猛切 | f58 一帧 return 静止 JSX，键帽 44px 嵌顶栏，死寂 ≥82f | 切后画面不能有任何随帧属性 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 全片输入触发 ≤2 次——每次都该是段落级开关；连按三次键帽
  观众就知道这只是转场花活，扳机失效
- A/C 声音强依赖：click 采样/键击采样与触发帧同帧
  （sound-design §4.5）；无声的按下读作画面自己动了
- C 的猛切后键帽必须在新场景里回收（嵌顶栏呼应引信）——否则
  只是两个手法排队，不是组合——组合命门
- C 的轰鸣段与 smash-cut 卡（trailer-grammar-moves C 式）同源，
  同片二选一

## 参考实现
demos/interaction/input-trigger-moves/
（CursorPerformancePunchIn.tsx / KeycapSmashCut.tsx）

## Reference implementation (Remotion)

- demos/interaction/input-trigger-moves/CursorPerformancePunchIn.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/input-trigger-moves/CursorPerformancePunchIn.tsx
- demos/interaction/input-trigger-moves/KeycapSmashCut.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/input-trigger-moves/KeycapSmashCut.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/interaction/input-trigger-moves/CursorPerformancePunchIn.tsx, demos/interaction/input-trigger-moves/KeycapSmashCut.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.