# Live voice waveform

A live waveform in a recording pill — 64 thin bars rise and fall with "speech," spiking tall mid-speech and shrinking to a dotted line on pauses, scrolling right to left; a full speak-pause-speak-submit performance.

- 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/voice-waveform-live.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/voice-waveform-live/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/voice-waveform-live.html

## Params

_No params._

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

## Prompt

## When to use

A "listening to you speak" shot for voice-input/AI-assistant features; a passage with no UI content to show that still needs sustained liveliness to hold the frame

## Intention

The only waveform in the library so far is spectrum-morph-ui — that's a **decorative** music visualizer, a title underline splitting into spectrum bars. This card is a **functional** voice waveform: a live "I'm listening" receipt. The difference is causality: spectrum dances to the BGM, it's packaging; this card dances to "the user speaking," it's the product feature itself. The waveform spikes while speaking, shrinks to a row of dots on pause, and scrolls its history off to the left — the viewer reads "it's really listening" from the waveform's rise and fall, and a 6s+ shot rides entirely on this liveliness with no other content needed. Division of labor with gauge-readout-moves: a gauge is the mechanical ceremony of "reporting one value," this card is the vital sign of "continuous listening," with no final value.

## Duration & energy

- Duration: ~5s (150f: entrance 12f + speak 1.4s + pause 0.8s + speak 1.4s + submit collapse 0.8s)
- Energy: Medium (functional liveliness, not showmanship)

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

## 意图
库里唯一的波形是 spectrum-morph-ui——那是标题下划线裂成频谱条的
**装饰性**音乐可视化。本卡是**功能性**声纹："正在听你说"的实时
回执。区别在因果：spectrum 跟 BGM 跳、是包装；本卡跟"用户说话"
跳、是产品功能本身。说话时波形高耸、停顿时缩成一排点线、历史向左
滚出——观众从波形的起伏读出"它真的在听"，一段 6s+ 的画面全靠这份
活性撑住，不需要任何别的内容。与 gauge-readout-moves 分工：仪表是
"报一个数值"的机械仪式，本卡是"持续监听"的生命体征，没有终值。

## 动效核心
- **帧确定的伪随机是命门**：mulberry32 按整数采样点取值 + smoothstep
  相邻插值（值噪声），无 Math.random——渲染可复现且相邻帧连续
- 滚动感：第 i 条采样时刻 = f - (N-1-i)·1.6，最右条是"现在"，
  历史向左流；不是条在平移，是每条在读不同时刻的信号
- 条高 = 说话包络（梯形 seg 说/停两档 + 音节噪声 0.55+0.45·noise）
  × 中部空间权重 sin^0.8 × 逐条 jitter（0.35+0.65·noise）；
  静默钳到 5px 点线
- 提交：按钮 3f 压缩 scale 1→0.82→1 回弹，波形 12f Easing.in 塌缩
  到 0.06，麦克风辉光随包络亮灭

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 条数/间隙 | 64 条，gap 6px（1320px 宽胶囊） | 少于 40 条读作均衡器；密过 90 条单条读不出起伏 |
| 滚动速率 | 1.6 帧/采样点 | 快了历史刷太快像故障；慢了"滚动感"消失变成原地抖 |
| 说停包络 | seg 梯形 rise 5f / fall 7f；demo 说 15–57f、停 80–124f | 停顿段必须真的塌成点线——没有"停"的对比，"说"就不成立 |
| 音节噪声 | 0.55+0.45·noiseAt(t/4.5) | 去掉音节层波形是平滑山丘，读不出"一句话的顿挫" |
| 中部权重 | sin^0.8 空间包络 | 无权重全场等高像均衡器；指数 >1.5 中间独秀像单根跳 |
| 静默钳位 | max 5px 点线 | 钳 0 波形消失读作断线；点线是"在听但你没说" |
| 提交塌缩 | 12f Easing.in 到 0.06 + 按钮压缩回弹 3f | 塌缩是"这段话被收走了"；淡出读不出提交语义 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- **有音轨时波形必须跟人声走**：片子若配了真旁白/人声，包络的说停段要对齐音轨的说停，错位一秒就穿帮；无人声配乐片才可用纯合成包络
- 与 spectrum-morph-ui 同片可共存（一个是功能一个是装饰），但别用同一种条形视觉——高度/颜色/圆角至少差一档，否则观众读作同一个东西乱入
- demo 的玻璃拟态胶囊（backdropFilter blur 24px）是 raycast 暗场风格，亮色片子换成实底胶囊即可，声纹参数不变
- 麦克风用的 emoji 加 grayscale 滤镜是占位——实战换 SVG 图标
- 声音：本卡画面就是"声音的形状"，配人声最顺；提交钮一声轻 pop + 塌缩配短促下滑音

## 参考实现
demos/interaction/voice-waveform-live/
（VoiceWaveformLive.tsx）
原片出处：raycast-teams 19.5–26.0s

## Reference implementation (Remotion)

- demos/interaction/voice-waveform-live/VoiceWaveformLive.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/voice-waveform-live/VoiceWaveformLive.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/voice-waveform-live/VoiceWaveformLive.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.