{
  "slug": "gradient-transition",
  "title": "Gradient transition",
  "tagline": "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.",
  "description": "The background smoothly transitions among linear, radial, and conic CSS gradients — angle, color stops, center, and radius each interpolate, with a cross-fade",
  "category": "transition",
  "tags": [
    "shotcraft",
    "remotion",
    "transition"
  ],
  "tier": "free",
  "license": "Apache-2.0",
  "spec": {
    "width": 1920,
    "height": 1080,
    "fps": 30,
    "duration": 6.5,
    "aspect": "16:9"
  },
  "kind": "remotion",
  "params_schema": {
    "type": "object",
    "properties": {}
  },
  "default_params": {},
  "preview": {
    "poster": "https://gimgs.net/motion/media/gradient-transition/poster-839964140755.jpg",
    "video": "https://gimgs.net/motion/media/gradient-transition/video-d5268ce692ca.mp4"
  },
  "variants": [
    {
      "key": "gradient-transition",
      "label": "gradient-transition · Gradient transition",
      "description": "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.",
      "use": "",
      "video": "https://gimgs.net/motion/media/gradient-transition/video-d5268ce692ca.mp4",
      "poster": "https://gimgs.net/motion/media/gradient-transition/poster-839964140755.jpg"
    }
  ],
  "credits": {
    "author": "video-shotcraft (Vincent Wei)",
    "url": "https://github.com/Vincentwei1021/video-shotcraft"
  },
  "page_url": "https://gimgs.net/motion/gradient-transition.html",
  "json_url": "https://gimgs.net/motion/gradient-transition.json",
  "template_url": "https://gimgs.net/motion/gradient-transition/template.html",
  "play_url": null,
  "markdown_url": "https://gimgs.net/motion/gradient-transition.md",
  "updated_at": "2026-09-24T07:39:59.868Z",
  "prompt": "## When to use\n\nA continuous variation for the atmosphere / section background color; gives a static layout section a background layer that feels \"alive\".\n\n## Intention\n\nA 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.\n\n## Duration & energy\n\n- Duration: About 6.0s (180f@30fps; linear 0–2.4s · radial 2–4.2s · conic 4–6s)\n- Energy: Low (pure background motion, stays out of the foreground content's way)\n\n## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)\n\n## 意图\n渐变不是静态贴图而是可动画的参数集：同类型渐变内部任何参数都能插值出丝滑变化，跨类型则用短交叉淡化衔接。作背景层用，给\"没有主体运动\"的段落一层持续的低速能量。\n\n## 动效核心\n- 三层各持一种渐变类型，同一时刻只有一层主导，交叉淡化窗口很窄（0.08）\n- linear 段（t=0–0.4）：角度 40°→230°，两组色标在 HSL 空间三通道插值（`mixH` 对 h/s/l 分别 lerp）——比 RGB 插值不发灰\n- radial 段（t=0.33–0.7）：圆心 (28%,66%)→(72%,32%) 对角迁移 + 半径 45%→85% 扩张，暗色外圈近黑，光斑像在画面里游走\n- conic 段（t=0.66–1）：七段彩虹色环 `from` 角 0→300° 旋转，首尾同色（hsl 0 出现两次）可无缝循环\n- 中央玻璃 pill 标签实时显示当前类型（LINEAR/RADIAL/CONIC），demo 用；实用时删掉\n\n## 参数表\n| 参数 | 典型值 | 调节手感 |\n|------|--------|----------|\n| 段窗口重叠 | 相邻段起点比前段终点早 0.07 | 重叠保证淡化时两层都在动；无重叠会看到\"接管瞬间静止\" |\n| 交叉淡化 | 0.30–0.38 / 0.63–0.71，各 0.08 | 拉宽会同屏看到两种渐变结构打架；窄淡化 + 参数同动是\"换类型不换气\"的关键 |\n| HSL 插值 | h/s/l 三通道独立 lerp | 色相差 >180° 时会绕远路（如 340→160），需要短路径时给起点 +360 |\n| radial 迁移 | 中心对角走位 + 半径近倍扩 | 中心不动只扩半径会读作\"呼吸\"不是\"游走\" |\n| conic 旋转 | from 0→300°（不满一圈） | 转满 360° 收尾与开头同帧，接循环时用；单次播放留 60° 缺口避免\"回到原点\"感 |\n| 色标组 | 每段两组 HSL 起止 | 换项目色时保持\"亮色+暗色\"配对结构，radial 外圈必须暗（光斑成立的前提） |\n\n## 已知坑\n- 这是背景卡：前景放排版/UI 时把 label pill 删掉，并把整层 opacity 压到 0.6–0.8 或叠暗色 scrim，否则彩虹 conic 段会吃掉前景对比度\n- CSS 渐变字符串每帧重写触发 repaint 而非 composite——大画幅 + 低端设备需实测；Remotion 服务端渲染无此顾虑\n- conic 段的七段色环是\"演出\"性质，品牌化场景建议换成三色循环（A→B→C→A）\n- 三段各自独立可拆用：只要 linear 段（0–0.4 重归一化到 0–1）就是一张\"角度扫过\"的极简底\n\n## 参考实现\ndemos/transition/gradient-transition/\n（GradientTransition.tsx）\n\n## Reference implementation (Remotion)\n\n- demos/transition/gradient-transition/GradientTransition.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/gradient-transition/GradientTransition.tsx\n\nThe component imports shared fixtures from `demos/_fixtures` and helpers from `assets/lib` in the repo; SKILL.md there documents the render workflow.\n",
  "flow": [
    {
      "step": "Read the recipe",
      "note": "Prompt = when to use, intention, parameter table with typical values and how each one feels, known pitfalls. Treat values as calibrated starting points."
    },
    {
      "step": "Get the code",
      "tool": "git",
      "cmd": "git clone https://github.com/Vincentwei1021/video-shotcraft && cd video-shotcraft && npm install"
    },
    {
      "step": "Register + render",
      "tool": "remotion",
      "cmd": "npx remotion render <CompositionId> out.mp4   # component: demos/transition/gradient-transition/GradientTransition.tsx"
    },
    {
      "step": "Or re-implement",
      "note": "Port the timing/easing from the recipe to HTML + WAAPI (gimgs motion contract) or any engine; keep the same segment windows and easing."
    }
  ],
  "files": [
    {
      "path": "demos/transition/gradient-transition/GradientTransition.tsx",
      "url": "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/gradient-transition/GradientTransition.tsx"
    }
  ],
  "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.",
  "render": {
    "engine": "remotion",
    "frames": 195,
    "repo": "https://github.com/Vincentwei1021/video-shotcraft",
    "files": [
      "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/gradient-transition/GradientTransition.tsx"
    ],
    "note": "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."
  },
  "source": "// ===== demos/transition/gradient-transition/GradientTransition.tsx =====\n// gradient-transition — Gradient Transition 渐变过渡（motion-lab 定稿转原生 Remotion）\n// 背景在三类 CSS 渐变之间平滑过渡：linear 段插值角度+色标，radial 段插值中心+半径，\n// conic 段旋转彩虹；等价\"解析 gradient 字符串逐参数插值\"的配方，中央 pill 标注当前段。\n// 设计坐标 480×270（DesignStage 等比放大），参数表数值以此坐标系标定。\nimport React from 'react';\nimport { DesignStage, E, lerp, seg, useT } from '../../_fixtures/Motion';\n\nexport const GRADIENT_TRANSITION_DURATION = 180; // 6000ms @30fps\n\nconst hsl = (h: number, s: number, l: number) => `hsl(${h},${s}%,${l}%)`;\ntype H3 = [number, number, number];\n// hsl 三元组按分量插值\nconst mixH = (a: H3, b: H3, k: number): H3 => [lerp(k, a[0], b[0]), lerp(k, a[1], b[1]), lerp(k, a[2], b[2])];\n\nconst layerStyle = (background: string, opacity: number): React.CSSProperties => ({\n  position: 'absolute',\n  inset: 0,\n  background,\n  opacity,\n});\n\nexport const GradientTransition: React.FC = () => {\n  const t = useT();\n\n  // Phase 1: linear —— 角度 40°→230°，两组色标 hsl 插值\n  const p1 = seg(t, 0, 0.4, E.inOutQuad);\n  const ang = lerp(p1, 40, 230);\n  const l1c1 = mixH([340, 88, 60], [160, 78, 52], p1);\n  const l1c2 = mixH([265, 80, 52], [205, 92, 58], p1);\n  const bg1 = `linear-gradient(${ang}deg, ${hsl(...l1c1)}, ${hsl(...l1c2)})`;\n\n  // Phase 2: radial —— 中心 (28%,66%)→(72%,32%)，半径 45%→85%\n  const p2 = seg(t, 0.33, 0.7, E.inOutQuad);\n  const cx = lerp(p2, 28, 72), cy = lerp(p2, 66, 32), rr = lerp(p2, 45, 85);\n  const l2c1 = mixH([45, 95, 62], [285, 85, 58], p2);\n  const l2c2 = mixH([220, 60, 14], [230, 55, 10], p2);\n  const bg2 = `radial-gradient(circle ${rr}% at ${cx}% ${cy}%, ${hsl(...l2c1)}, ${hsl(...l2c2)})`;\n\n  // Phase 3: conic —— from 角度旋转的彩虹环（首尾同色可无缝循环）\n  const p3 = seg(t, 0.66, 1, E.inOutQuad);\n  const from = p3 * 300;\n  const bg3 = `conic-gradient(from ${from}deg at 50% 50%,\n    hsl(0,85%,60%), hsl(60,85%,60%), hsl(120,75%,55%), hsl(180,80%,55%),\n    hsl(240,85%,62%), hsl(300,85%,60%), hsl(0,85%,60%))`;\n\n  return (\n    <DesignStage bg=\"#0a0b10\">\n      {/* 三层渐变依次交叉淡入淡出 */}\n      <div style={layerStyle(bg1, 1 - seg(t, 0.3, 0.38))} />\n      <div style={layerStyle(bg2, seg(t, 0.3, 0.38) - seg(t, 0.63, 0.71))} />\n      <div style={layerStyle(bg3, seg(t, 0.63, 0.71))} />\n      {/* 中央 pill：标注当前渐变类型 */}\n      <div\n        style={{\n          position: 'absolute',\n          left: '50%',\n          top: '50%',\n          transform: 'translate(-50%,-50%)',\n          padding: '6px 18px',\n          borderRadius: 999,\n          background: 'rgba(8,9,14,.55)',\n          color: '#fff',\n          fontFamily: '-apple-system,system-ui,sans-serif',\n          fontSize: 13,\n          letterSpacing: 4,\n          fontWeight: 700,\n          backdropFilter: 'blur(4px)',\n        }}\n      >\n        {t < 0.34 ? 'LINEAR' : t < 0.67 ? 'RADIAL' : 'CONIC'}\n      </div>\n    </DesignStage>\n  );\n};\n\n\n"
}