# Spectrum-morph underline

Spectrum UI morph — the title underline splits into vertical bars that pulse like a spectrum for two bars, then closes back into a straight line; music visualization living inside the UI.

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

## Params

_No params._

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

## Prompt

## When to use

Audio-synced highlight passages in tracks with music (BGM chorus entry / dense drum hits); underline/divider elements on title cards and chapter pages

## Intention

The library already has type-rhythm-sync A (font-weight pulse) for audio sync — that's "the text itself moving." This card is "a UI element turning into an equalizer": the underline, the most unassuming element, is borrowed by the music for two bars, splitting into 28 vertical bars that jump as a spectrum, then **closing back and returning intact**. The borrow-and-return structure is the whole elegance — the viewer first recognizes "this is the underline," then watches it become something else, then watches it become that again; if it started as spectrum bars, it would just be another music visualizer. It must return to that exact 8px straight line, pixel for pixel, when the pulsing ends.

## Duration & energy

- Duration: ~4.7s (8f split + 64f pulsing + 12f close + 39f still)
- Energy: Medium

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

## 意图
声画同步库内已有 type-rhythm-sync A（字重脉冲）——那是"文字自己动"；
本卡是"UI 构件变成均衡器"：下划线这个最不起眼的构件被音乐借用两小节，
裂成 28 根竖条跳出频谱，然后**收拢还原、完璧归赵**。借用-归还结构是
全部优雅所在——观众先认出"这是下划线"，再看它变成别的东西，最后
看它变回来；若一开始就是频谱条，只是又一个音乐可视化。跳完必须还原
成那条 8px 直线，一像素不差。

## 动效核心
- 28 根条底边锁在原下划线 y 上**只向上生长**，收拢结束条宽 + gap
  恰好拼回 720px 整线（gap 0↔6px 同步过渡，gap<1 时条宽 +0.5px 防细缝）
- 非跳动段条件挂载回整条直线（摘罩式）——像素级静止靠"根本不渲染
  条组"，不是条高归零
- demo 为伪 FFT：|sin(i·0.7+f·0.31)| × 每 4 帧换挡 seed hash 抖动 ×
  低频高/高频矮包络 × ramp 幅度包络，帧确定无随机
- **实战换真 FFT**：@remotion/media-utils 的 visualizeAudio() 取
  频谱映射条高，伪 FFT 只是灰阶占位的节拍替身

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 条数/条宽 | 28 根、gap 6px 时 ≈20px 宽 | >40 根读作噪声；<16 根读作柱状图 |
| 峰值幅度 | AMP=92，实测峰值 75–85px | spec 62 实测只有 ~55px 不够响，已加码 1.5×（可感性判例） |
| 包络 | 左高右矮（低频高/高频矮） | 均匀高度像栅栏不像频谱 |
| 换挡节拍 | seed 每 4 帧换挡 | 逐帧换读作电噪；8f 以上读作慢动作 |
| 时间轴 | 裂开 8f out-cubic / 跳动 64f（两小节）/ 收拢 12f | 跳动 <1 小节读作故障闪了一下 |
| 收尾 | 收线后真静止 ≥39f，像素级 diff 为零 | 归还之后再动一下，借用结构就毁了 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- **声音强依赖**：跳动段必须真的踩在音乐上——无音轨的频谱跳动读作
  UI 故障；实战必须 visualizeAudio() 对齐 BGM，伪 FFT 不许上片
- 全片 ≤1 次，且只借用一个构件——标题下划线在跳、卡片分隔线也在跳，
  均衡器就成了壁纸（P4）
- 与 type-rhythm-sync 同为声画同步族，同一段落二选一——文字在脉冲、
  下划线在跳频谱，两个声画主角互相拆台
- 收拢帧后的静止段是"归还仪式"的一部分，从重给（≥35f），别急着切

## 参考实现
demos/rhythm/spectrum-morph-ui/
（SpectrumMorphUi.tsx）

## Reference implementation (Remotion)

- demos/rhythm/spectrum-morph-ui/SpectrumMorphUi.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/rhythm/spectrum-morph-ui/SpectrumMorphUi.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/rhythm/spectrum-morph-ui/SpectrumMorphUi.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.