# Gradient transition

The background smoothly transitions among linear, radial, and conic CSS gradients — angle, color stops, center, and radius each interpolate, with a cross-fade at type changes.

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

## Params

_No params._

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

## Prompt

## When to use

A continuous variation for the atmosphere / section background color; gives a static layout section a background layer that feels "alive".

## Intention

A gradient isn't a static bitmap but an animatable parameter set: any parameter within the same gradient type can interpolate into a smooth change, with a short cross-fade bridging type changes. Used as a background layer, it gives a section with "no subject motion" a persistent low-speed energy.

## Duration & energy

- Duration: About 6.0s (180f@30fps; linear 0–2.4s · radial 2–4.2s · conic 4–6s)
- Energy: Low (pure background motion, stays out of the foreground content's way)

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

## 意图
渐变不是静态贴图而是可动画的参数集：同类型渐变内部任何参数都能插值出丝滑变化，跨类型则用短交叉淡化衔接。作背景层用，给"没有主体运动"的段落一层持续的低速能量。

## 动效核心
- 三层各持一种渐变类型，同一时刻只有一层主导，交叉淡化窗口很窄（0.08）
- linear 段（t=0–0.4）：角度 40°→230°，两组色标在 HSL 空间三通道插值（`mixH` 对 h/s/l 分别 lerp）——比 RGB 插值不发灰
- radial 段（t=0.33–0.7）：圆心 (28%,66%)→(72%,32%) 对角迁移 + 半径 45%→85% 扩张，暗色外圈近黑，光斑像在画面里游走
- conic 段（t=0.66–1）：七段彩虹色环 `from` 角 0→300° 旋转，首尾同色（hsl 0 出现两次）可无缝循环
- 中央玻璃 pill 标签实时显示当前类型（LINEAR/RADIAL/CONIC），demo 用；实用时删掉

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 段窗口重叠 | 相邻段起点比前段终点早 0.07 | 重叠保证淡化时两层都在动；无重叠会看到"接管瞬间静止" |
| 交叉淡化 | 0.30–0.38 / 0.63–0.71，各 0.08 | 拉宽会同屏看到两种渐变结构打架；窄淡化 + 参数同动是"换类型不换气"的关键 |
| HSL 插值 | h/s/l 三通道独立 lerp | 色相差 >180° 时会绕远路（如 340→160），需要短路径时给起点 +360 |
| radial 迁移 | 中心对角走位 + 半径近倍扩 | 中心不动只扩半径会读作"呼吸"不是"游走" |
| conic 旋转 | from 0→300°（不满一圈） | 转满 360° 收尾与开头同帧，接循环时用；单次播放留 60° 缺口避免"回到原点"感 |
| 色标组 | 每段两组 HSL 起止 | 换项目色时保持"亮色+暗色"配对结构，radial 外圈必须暗（光斑成立的前提） |

## 已知坑
- 这是背景卡：前景放排版/UI 时把 label pill 删掉，并把整层 opacity 压到 0.6–0.8 或叠暗色 scrim，否则彩虹 conic 段会吃掉前景对比度
- CSS 渐变字符串每帧重写触发 repaint 而非 composite——大画幅 + 低端设备需实测；Remotion 服务端渲染无此顾虑
- conic 段的七段色环是"演出"性质，品牌化场景建议换成三色循环（A→B→C→A）
- 三段各自独立可拆用：只要 linear 段（0–0.4 重归一化到 0–1）就是一张"角度扫过"的极简底

## 参考实现
demos/transition/gradient-transition/
（GradientTransition.tsx）

## Reference implementation (Remotion)

- demos/transition/gradient-transition/GradientTransition.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/gradient-transition/GradientTransition.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/transition/gradient-transition/GradientTransition.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.