# Soft Moving Gradient — `gradient-background@1.1.0`

Slowly drifting, blurred colour glows with a touch of film grain. A calm, seamless background.

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.

- Kind: background; status: published; digest sha256:be610e299a2f2202f10befbc71bcd08679f2a32fed8b1306ffb087a9ec7e40db
- Role: Full-frame background layer (Canvas 2D).
- Implementation: canvas2d; entry `src/gradient-background.js`
- Files: https://aipixelwizard.com/registry/gradient-background/1.1.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/gradient-background.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/gradient-background/versions/1.1.0
- Runnable demo: https://aipixelwizard.com/registry/gradient-background/1.1.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `apw-runtime@1.0.0` (demo) — Demo harness. src/gradient-background.js has no dependencies.

## Exports
- `createGradientBackground({ colors?, base?, speed?, softness?, intensity?, grain?, seed? }) => { draw(ctx, info, width, height) }` — Fills the canvas with the animated gradient.

## Parameters
- `colorA` (color, default "#3a2a9a") — Colour 1
- `colorB` (color, default "#b23a74") — Colour 2
- `colorC` (color, default "#1a6f86") — Colour 3
- `base` (color, default "#07060d") — Base colour
- `speed` (integer 1–3, default 1) — Drift speed
- `softness` (number 0.3–1.2, default 0.8) — Softness
- `intensity` (number 0.2–1, default 0.85) — Glow strength
- `grain` (number 0–0.2, default 0.08) — Film grain
- `seed` (integer 1–9999, default 5) — Variation

## 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).
- Works with: kinetic-title, rolling-counter, torus-wave, particle-tunnel
- Draw it first; draw everything else on top.

## Output and loop
- 1080×1080, 30 fps, 8 s, procedural
- Seamless loop: yes — Each glow follows a closed path with whole-number frequencies. Grain is random per frame, so it never shows a seam.
- Verified 2026-10-03 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D); deterministic: yes; loop check: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.

## Use it
New project: Each frame call background.draw(ctx, { progress, frame }, width, height) before drawing anything else.

Existing project: 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.

Reuse ideas:
- 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.

## Limitations
- Gradients are 8-bit; very dark subtle gradients can band slightly in compressed video. Grain helps hide banding.

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.

Provenance: Original code written for AI Pixel Wizard in October 2026. Demo rebuilt in October 2026 to the catalog quality bar (docs/QUALITY.md).