{"id":"gradient-background","version":"1.1.0","title":"Soft Moving Gradient","summary":"Slowly drifting, blurred colour glows with a touch of film grain. A calm, seamless background.","kind":"background","target":"canvas2d","collections":["backgrounds","product-reveals","kinetic-text"],"tags":["gradient","background","mesh gradient","aurora","glow","blur","grain","soft","ambient","loop","2d","canvas"],"loopable":true,"motion":"procedural","durationSeconds":8,"status":"published","media":{"poster":"https://aipixelwizard.com/media/gradient-background/1.1.0/poster.webp","preview":"https://aipixelwizard.com/media/gradient-background/1.1.0/preview.mp4","sample":"https://aipixelwizard.com/media/gradient-background/1.1.0/sample.mp4","sampleBytes":1735187,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/gradient-background","manifest":"https://aipixelwizard.com/api/v1/visuals/gradient-background/versions/1.1.0","agentMd":"https://aipixelwizard.com/registry/gradient-background/1.1.0/agent.md","files":"https://aipixelwizard.com/registry/gradient-background/1.1.0/","demo":"https://aipixelwizard.com/registry/gradient-background/1.1.0/index.html"},"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).","useCases":["Background for titles and numbers","Calm loop for social posts","Product launch backdrop"],"synonyms":["moving gradient","animated gradient","aurora background","blurry colours","colour blobs","lava lamp background","ambient background","glow background"],"digest":"be610e299a2f2202f10befbc71bcd08679f2a32fed8b1306ffb087a9ec7e40db","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."}],"uses":[],"usedBy":[],"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":[]},"rights":{"approvedForPublicRelease":true},"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."}],"verification":{"testedOn":"2026-10-03","inputs":{"gradient-background@1.1.0":"be610e299a2f2202f10befbc71bcd08679f2a32fed8b1306ffb087a9ec7e40db","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d"},"environment":"Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0","renderer":"Canvas 2D","width":1080,"height":1080,"fps":30,"frames":240,"renderSeconds":42.7,"loopCheck":{"checked":true,"seamless":true,"maxDifference":0,"note":"Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/gradient-background/1.1.0/poster.webp","preview":"/media/gradient-background/1.1.0/preview.mp4","sample":"/media/gradient-background/1.1.0/sample.mp4","sampleBytes":1735187}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/gradient-background/1.1.0/LICENSE"},{"path":"asset.json","size":6608,"sha256":"e8eeaf4506d749aca9861c44b08b7cf5858c4050d72d9f6377d19a196a57fb10","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/gradient-background/1.1.0/asset.json"},{"path":"demo.js","size":1491,"sha256":"69c87bc090801a49cf4e8c172297180d318b9406710655d673e0e61bd1a51119","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/gradient-background/1.1.0/demo.js"},{"path":"index.html","size":534,"sha256":"e29341acf539a4c973a581bac76e055f8a00b7145f4904b24d7a2362a8c91fee","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/gradient-background/1.1.0/index.html"},{"path":"src/gradient-background.js","size":4105,"sha256":"dd48f96615f278db0e50f6abebf59820744e076d1a6f28a98c48c159f8611d47","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/gradient-background/1.1.0/src/gradient-background.js"}],"warnings":[]}