# Soft Moving Gradient — `gradient-background@1.0.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:c0a092c4f3f40e009056216e45ad338dddb3b554fdf2461d0cec3ae0d760baf0
- Role: Full-frame background layer (Canvas 2D).
- Implementation: canvas2d; entry `src/gradient-background.js`
- Files: https://aipixelwizard.com/registry/gradient-background/1.0.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.0.0
- Runnable demo: https://aipixelwizard.com/registry/gradient-background/1.0.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 "#7c6cff") — Colour 1
- `colorB` (color, default "#ff6fb5") — Colour 2
- `colorC` (color, default "#38d6ff") — Colour 3
- `base` (color, default "#0b0912") — Base colour
- `speed` (integer 1–3, default 1) — Drift speed
- `softness` (number 0.3–1.2, default 0.75) — Softness
- `intensity` (number 0.2–1, default 0.75) — Glow strength
- `grain` (number 0–0.2, default 0.06) — 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-02 in Chrome 151.0.7922.137 headless on Linux 7.0.0-31-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.