# AI Response Stream-In

The AI response panel drops a readable summary first, then status-icon evidence rows stream in one by one, settling into a completed state.

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

## Params

_No params._

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

## Prompt

## When to use

Result-generation shot for AI assistants/agents/search/copilot; emphasizes "conclusion first, evidence follows, task complete."

## Intention

Shoot "the AI is working" as a readable causal chain, not a log-scroll flood: viewers first read the answer summary, then watch evidence/sub-tasks fill in one by one, and finally the completed state confirms this round of work is done.

## Duration & energy

- Duration: About 4–5s (120–150f, including ≥15f hold on the completed state).
- Energy: Medium-high (information keeps accumulating, but readability outranks speed showmanship).

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

## 意图
把“AI 正在工作”拍成可读的因果链，而不是日志刷屏：观众先看懂答案摘要，
再看到证据/子任务逐条补齐，最后由完成态确认这轮工作结束。

## 动效核心
- 用目标产品真实响应面板截图做 backplate；动态区截图前隐藏，按 layout 坐标重叠回真实槽位（Q1/Q9）
- 面板进入后摘要句先以短 wipe/淡入落定，落定后至少 12f 才起首条证据
- 6–8 条证据行自下方 14–24px + 轻微 blur 逐行汇入；间隔逐渐收紧但保留可数节拍
- 行体先停，状态图标晚 2–4f 由 pending 转 running/done，形成主次拖拽层级
  （模式已沉为 assets/lib/helpers/motion.ts lagged）
- 末条完成后只做一次面板级完成脉冲，随后全画面静止 ≥15f；不逐行 glint

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 摘要 | cue 18，10–14f reveal；摘要落定后 hold ≥12f，首行 cue ≥42 | 摘要与首行粘连会失去“结论先到”的叙事；正常速度必须能先读到一句完整结论 |
| 行节拍 | `cue[i]=42+[0,11,21,30,38,45,51,56][i]`，每行 10–14f | 间隔 11→5f 逐渐收紧，表达工作加速；不要密到所有行同时糊成一团（R2） |
| 行入场 | y 18px→0，blur 6px→0，opacity 0→1，bezier(0.2,0.75,0.25,1) | 位移须过正常速度肉眼阈值；大幅横飞会像通知列表，不像证据归档 |
| 状态图标 | 比行体 cue 晚 3f；pending 环 → running 缺口环 → done 实心勾，6–8f | 图标是状态回执，不抢行文本；同帧切换全部图标会读作假 loading |
| 完成收束 | 末图标 done 后 6f，面板边框/摘要底色 opacity 0.25→0.55→0.25 共 10f | 只做面板级一次，不逐行发光（Q4）；完成脉冲后留 ≥15f 真静止（R1） |
| 相机 | 信息密集默认正视，zoom 1.04→1.0 微退；暗场斜拍仅作情绪变体 | Linear 参考片的斜拍不是通用命令；文字读不清时立即回正视（Q6） |

## 声音
摘要落定配一发 `transition-soft`；前 3–4 行用短 `pop` 轻声递减
0.32→0.20，后半加速密集段合并成一条低音量 `whoosh-fast`，避免逐行机枪感；
最终完成态用 `click-camera` 的轻量版本（约 vol 0.3）。声音在画面锁定后钉帧。

## 已知坑
- 逐字符流式打字会把视线困在字符层；宣传片时长里优先按“语义块”揭示摘要，
  真正展示输入操作时另用 `type-and-filter`
- 行体和状态图标若同帧落定，会像静态列表整体切换；保留 2–4f 拖拽层级
- 行终点必须是截图里真实列表槽位，不在面板上方悬浮；动态内容也必须用虚构数据
- 此卡借鉴 Linear Agent 发布片 t≈13–17s（进化轮 #3 breakdown #6），非用户判例；
  参数未经本库实战项目验证，首次使用必须按 P1 在正常速度下看片，不以逐帧 diff 代替体感

## 参考实现
demos/interaction/ai-stream-response/
（StreamResponse.tsx）

## Reference implementation (Remotion)

- demos/interaction/ai-stream-response/StreamResponse.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/ai-stream-response/StreamResponse.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/ai-stream-response/StreamResponse.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.