{
  "schemaVersion": 1,
  "id": "gradient-background",
  "version": "1.1.0",
  "status": "published",
  "kind": "background",
  "title": "Soft Moving Gradient",
  "summary": "Slowly drifting, blurred colour glows with a touch of film grain. A calm, seamless background.",
  "description": "Big soft pools of colour drift gently across a dark base, like light through frosted glass, with optional film grain for a premium finish. It sits quietly behind text, numbers or products without stealing attention. Pick three colours, how fast they drift and how soft they are; it loops seamlessly.",
  "role": "Full-frame background layer (Canvas 2D).",
  "collections": [
    "backgrounds",
    "product-reveals",
    "kinetic-text"
  ],
  "tags": [
    "gradient",
    "background",
    "mesh gradient",
    "aurora",
    "glow",
    "blur",
    "grain",
    "soft",
    "ambient",
    "loop",
    "2d",
    "canvas"
  ],
  "synonyms": [
    "moving gradient",
    "animated gradient",
    "aurora background",
    "blurry colours",
    "colour blobs",
    "lava lamp background",
    "ambient background",
    "glow background"
  ],
  "useCases": [
    "Background for titles and numbers",
    "Calm loop for social posts",
    "Product launch backdrop"
  ],
  "featured": 10,
  "publishedAt": "2026-10-03",
  "implementation": {
    "target": "canvas2d",
    "runtime": "browser",
    "language": "javascript",
    "module": "esm",
    "entry": "src/gradient-background.js",
    "exports": [
      {
        "name": "createGradientBackground",
        "signature": "createGradientBackground({ colors?, base?, speed?, softness?, intensity?, grain?, seed? }) => { draw(ctx, info, width, height) }",
        "description": "Fills the canvas with the animated gradient."
      }
    ],
    "reusable": [
      "src/gradient-background.js"
    ],
    "demo": "demo.js",
    "harness": "index.html"
  },
  "dependencies": [
    {
      "id": "apw-runtime",
      "version": "1.0.0",
      "scope": "demo",
      "reason": "Demo harness. src/gradient-background.js has no dependencies."
    }
  ],
  "params": [
    {
      "key": "colorA",
      "label": "Colour 1",
      "type": "color",
      "default": "#3a2a9a"
    },
    {
      "key": "colorB",
      "label": "Colour 2",
      "type": "color",
      "default": "#b23a74"
    },
    {
      "key": "colorC",
      "label": "Colour 3",
      "type": "color",
      "default": "#1a6f86"
    },
    {
      "key": "base",
      "label": "Base colour",
      "type": "color",
      "default": "#07060d"
    },
    {
      "key": "speed",
      "label": "Drift speed",
      "type": "integer",
      "min": 1,
      "max": 3,
      "step": 1,
      "default": 1
    },
    {
      "key": "softness",
      "label": "Softness",
      "type": "number",
      "min": 0.3,
      "max": 1.2,
      "step": 0.05,
      "default": 0.8
    },
    {
      "key": "intensity",
      "label": "Glow strength",
      "type": "number",
      "min": 0.2,
      "max": 1,
      "step": 0.05,
      "default": 0.85
    },
    {
      "key": "grain",
      "label": "Film grain",
      "type": "number",
      "min": 0,
      "max": 0.2,
      "step": 0.01,
      "default": 0.08
    },
    {
      "key": "seed",
      "label": "Variation",
      "type": "integer",
      "min": 1,
      "max": 9999,
      "step": 1,
      "default": 5
    }
  ],
  "presets": [
    {
      "id": "default",
      "label": "Night",
      "params": {}
    },
    {
      "id": "sunrise",
      "label": "Sunrise",
      "params": {
        "colorA": "#d8632a",
        "colorB": "#f2b25a",
        "colorC": "#c2344f",
        "base": "#140806"
      }
    },
    {
      "id": "mint",
      "label": "Mint",
      "params": {
        "colorA": "#2fb59a",
        "colorB": "#2c6fd6",
        "colorC": "#9adfc9",
        "base": "#05100e",
        "grain": 0.05
      }
    }
  ],
  "output": {
    "width": 1080,
    "height": 1080,
    "fps": 30,
    "durationSeconds": 8,
    "posterSeconds": 2,
    "alpha": false,
    "motion": "procedural",
    "loop": {
      "seamless": true,
      "cycleSeconds": 8,
      "method": "Each glow follows a closed path with whole-number frequencies. Grain is random per frame, so it never shows a seam."
    },
    "seed": {
      "param": "seed",
      "behavior": "Seed sets starting positions and drift paths."
    }
  },
  "composition": {
    "inputs": "Canvas 2D context, info.progress and info.frame, width, height.",
    "outputs": "Fills the whole canvas (it is the bottom layer).",
    "coordinates": "Pixels; glows are sized relative to the larger side.",
    "lighting": "Additive glows over the base colour.",
    "timing": "Pure function of progress (grain uses the frame index).",
    "compatibleWith": [
      "kinetic-title",
      "rolling-counter",
      "torus-wave",
      "particle-tunnel"
    ],
    "notes": [
      "Draw it first; draw everything else on top."
    ]
  },
  "reuse": [
    "Background for Minimal Animated Number Reveal.",
    "Draw it into a canvas and use it as a Three.js scene.background via CanvasTexture.",
    "Use brand colours behind a Kinetic Title for an announcement."
  ],
  "integration": {
    "newProject": "Each frame call background.draw(ctx, { progress, frame }, width, height) before drawing anything else.",
    "existingProject": "Copy src/gradient-background.js and call draw at the start of your frame loop. In a DOM/CSS project, render it to a <canvas> positioned behind your content."
  },
  "performance": {
    "notes": "Three full-screen radial gradients and one pattern fill per frame.",
    "limits": "Grain uses a 192 px tile; at 4K disable grain on slow machines."
  },
  "limitations": [
    "Gradients are 8-bit; very dark subtle gradients can band slightly in compressed video. Grain helps hide banding."
  ],
  "license": {
    "spdx": "MIT",
    "notice": "Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.",
    "thirdParty": []
  },
  "provenance": "Original code written for AI Pixel Wizard in October 2026. Demo rebuilt in October 2026 to the catalog quality bar (docs/QUALITY.md).",
  "changelog": [
    {
      "version": "1.1.0",
      "date": "2026-10-03",
      "notes": "Composed as a backdrop: deeper base, glows kept to the edges with a stage in the middle, a soft light from the upper left, a vignette and a little more grain. Chosen palettes replace the rainbow defaults. The gradient code is unchanged."
    },
    {
      "version": "1.0.0",
      "date": "2026-10-02",
      "notes": "Initial release."
    }
  ]
}