Skip to content

Acrylic Paint Pour

Glossy acrylic pour painting that slowly swirls, with cells blooming and fine lacing. Loops perfectly.

Background, V1 Effects3DSeamless loop, verified250 lines of codev1.0.0

In Liquids

Next: Faraday WaveSurprise me

Acrylic Paint Pour preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

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

Effect controls

Presets

The cells open mostly in this colour's bands.

Can be metallic (see below).

1.6

Higher is busier.

1.8
2.4
0.55
6

Higher means more, smaller cells.

0.8
0.5

How far the paint swirls during one loop.

1

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

Info

What it is

A wet acrylic pour seen from above: bands of paint folded by a slow swirl, round cells with pale rims opening inside them, fine lacing along the edges and glossy highlights where the paint's surface catches a window light. Choose five colours (one can be metallic gold or silver), how busy the pattern is, how many cells and how glossy it looks. It loops seamlessly and stays sharp at full size.

Reuse it in your own idea

  • Satisfying background: render it full frame behind Kinetic Title Reveal for a reel opener.
  • Brand texture: set the five colours to a brand palette, one metallic accent, for a loop or a slide background.
  • Product scene: apply the material to a canvas, a phone screen or packaging in a Three.js scene.

Which part is reusable

src/paint-pour.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

  • A painted look, not a fluid simulation: the paint swirls in place and does not spread from a pour point.
  • Seen from straight above; the relief is shading only, not geometry.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/paint-pour.js
Exports
  • createPaintPour({ colors?, metallic?, scale?, flow?, bands?, cells?, cellSize?, gloss?, relief?, motion?, seed?, aspect?, lightDir? }) => { mesh, material, update(progress), dispose() }
  • createPaintPourMaterial(options) => THREE.ShaderMaterial
Dependencies (exact)
  • three@0.185.1 (source) — Renderer and shader material.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Fills clip space under OrthographicCamera(-1, 1, 1, -1); on your own plane it follows the UVs.

Lighting: Self-lit: the shader shades its own relief with a soft window light; scene lights do not affect it.

Timing: update(progress) is a pure function of progress; frames render in any order.

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — The swirl offsets travel once round closed circles in the noise domain per loop, and everything else is a pure function of them, so the last frame meets the first.
Tested
Rendered 240 frames on 2026-10-05 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
One fragment shader: about 30 noise evaluations and a 3 × 3 cell search per pixel. Smooth at 1080p on laptop GPUs. Software WebGL (no GPU) renders slowly; lower the resolution for live previews there.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- paint-pour/1.0.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.0.0 · sha256:44efb138a0133663…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
Provenance
Adapted from the owner's threejs-sketches/abstract-artistic/paint-pour (MIT), rebuilt for AI Pixel Wizard in October 2026: new pour pattern (folded bands, round cells, lacing) with antialiased edges, relief lighting, metallic paint, and the frame/time contract.
BinMore like this

Lava Lamp

3D object3DSeamless loop15 seconds

Cube Wave

3D object3DSeamless loop12 seconds