Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Soft Moving Gradient

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

Background, V1 Effects2DSeamless loop, verified106 lines of codev1.1.0

In Light, glass & shine, Liquids

Next: Liquid GlassSurprise me

Soft Moving Gradient preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

1
0.8
0.85
0.08
5

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 1.7 MB)
Info

What it is

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.

Reuse it in your own idea

  • 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.

Which part is reusable

src/gradient-background.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

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

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/gradient-background.js
Exports
  • createGradientBackground({ colors?, base?, speed?, softness?, intensity?, grain?, seed? }) => { draw(ctx, info, width, height) }
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness. src/gradient-background.js has no dependencies.
How it fits a scene

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).

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — Each glow follows a closed path with whole-number frequencies. Grain is random per frame, so it never shows a seam.
Tested
Rendered 240 frames on 2026-10-03 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
Three full-screen radial gradients and one pattern fill per frame. Grain uses a 192 px tile; at 4K disable grain on slow machines.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- gradient-background/1.1.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.1.0 · sha256:be610e299a2f2202… · other versions: 1.0.0
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Original code written for AI Pixel Wizard in October 2026. Demo rebuilt in October 2026 to the catalog quality bar (docs/QUALITY.md).
BinMore like this

More like this

Play these full screen