# Gradient word charge sweep

A gradient of colored light sweeps fast left to right to "charge" a keyword in a black-scene tagline — brightest at the wavefront, decaying behind it, then settling into a steady lightning-breathing glow.

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

## Params

_No params._

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

## Prompt

## When to use

Charging a single verb/selling-point word in a tagline (Supercharged/faster/AI…); the typography moment of a high-energy peak segment; the slogan frame of a black-scene brand film.

## Intention

Within an all-white sentence, only the keyword gets "electrified": a gradient of colored light sweeps fast left to right across the characters, like an energy injection — brightest the instant it passes (wavefront trail), then decaying to a steady state; once filled, fine lightning arcs jump between characters and the word keeps a breathing glow. Three crux points: **fast** (sweep-charge 15–20f; slower reads as a progress bar), **brightest at the wavefront** (the character that just lit up is strongest — without this gradient it's just a static clipped gradient), and **restrained glow** (After-Effects-style layered bloom, but don't let it smear into a blob; the lightning should be thin and sparse, a garnish not a flood).

## Duration & energy

- Duration: Sweep-charge ~15–20f (must be fast) + steady lightning-breathing 1–2s; whole segment 2.5–3.5s
- Energy: High (a single-word peak; everything before and after should yield to it)

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

## 意图
整句白字里只有关键词被"通电"：渐变彩光从左到右快速扫过字符，
像能量注入——扫过的瞬间最亮（波前尾迹），随后衰减到稳态；
填满后字符之间跳起勾连的细闪电，词保持泛光呼吸。三个命门：
**快**（扫充 15–20f，慢了读作进度条）、**波前最亮**（刚点亮的
字符效果最强，没有这个梯度就是静态渐变裁切）、**辉光克制**
（AE 式多层泛光但别糊成一团，闪电细而稀疏才是点缀）。

## 动效核心
- 渐变填充：关键词做双层文字（白/渐变彩），彩层用从左到右推进的
  mask 揭开；斜切 mask 边缘略糊（~8% 词宽）
- 波前尾迹增亮：跟随 mask 前沿一条 ~34% 词宽的增亮带，波前处
  辉光最强、向后衰减；填充结束后 ~10f 淡出到稳态
- 辉光：4 层泛光（环境大柔光+中晕+近核+亮核），稳态 opacity
  0.55–0.72 档（实测：0.75–0.95 档被裁"泛光感有点强"）
- 闪电：填满后字符间勾连细闪电，紫红系三层描边（外晕 6/中 2.4/
  亮核 1.4），mulberry32 种子随机跳位闪烁，稀疏零星（不是持续电弧）
- 禁：填充过程不带跟随移动的光点/星光（实测判例：跟随白色光点读作廉价装饰，删）

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 扫充时长 | 15–20f | 原片"速度很快"；>28f 读作进度条 |
| 波前增亮带 | ~34% 词宽，波前最亮向后衰减 | 无梯度＝静态渐变；带太宽＝整词一起亮没有"注入"感 |
| 稳态泛光 | 4 层 opacity 0.55/0.55/0.62/0.72 | 0.75+ 档被裁太强；辉光层数<3 读作纯色 |
| 闪电线宽 | 外 6/中 2.4/核 1.4 @1080p | 加倍即被裁"粗"；颜色偏紫红（magenta 216,60,190 系） |
| 闪电频率 | 稀疏零星（同屏 ≤2 道，间歇 >8f） | 频率高读作电弧故障；实测 demo 仍略密于原片 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 判例三条（用户逐字意见沉淀）：①填充过程禁跟随光点；②闪电
  必须紫红+细；③泛光宁弱勿强，波前梯度补足冲击力
- 与 type-rhythm-sync/cel-flash-stomp 分工：那些是节拍/砸字；
  本卡是单词"充能"的能量语义，词必须是句中卖点词
- 关键词外的正文保持纯白静止——全句都动就没有"只有它通电"的戏

## 参考实现
demos/typography/gradient-word-sweep/
（GradientWordSweep.tsx）
原片出处：clickup-30.mp4

## Reference implementation (Remotion)

- demos/typography/gradient-word-sweep/GradientWordSweep.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/typography/gradient-word-sweep/GradientWordSweep.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/typography/gradient-word-sweep/GradientWordSweep.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.