Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Weather Inside a Record

Magenta, amber and cobalt dyes swirl on a black record: oil cells form a rainbow sun, then twist into the eye of a storm as a chrome tonearm traces the edge. Loops.

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

In Music & sound, Light, glass & shine, Liquids, Made for phones

Next: Neon KoiSurprise me

Weather Inside a Record preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Combine several clips and hand them over together from your sequence.

A finished film

It plays exactly as rendered and has nothing to adjust. The preview runs the same code your AI receives.

View code Sample video (1.6 MB)
Info

What it is

A turntable seen from above, its lacquer-black record holding a living projection of liquid light. Dye cells in magenta, amber and cobalt drift and merge behind dark membranes, arrange into a rainbow sun with a corona, then twist into a vortex with a dark eye, while a chrome S-shaped tonearm rests at the edge and fine grooves catch rotating glints. The 8 seconds loop seamlessly. The film has no settings.

Reuse it in your own idea

  • Music visual: the swirl and the sun make a natural beat-synced loop.
  • Festival or club promo: loop it behind dates and names.
  • Seamless background: the 8 seconds repeat cleanly for any length.

Which part is reusable

src/liquid-vinyl.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

  • The film is finished: it has no settings. To change colours or timing, edit the shader.
  • It is composed for a 4:5 portrait frame.
  • Its length is fixed at 8 seconds; repeat the loop to fill a longer clip.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/liquid-vinyl.js
Exports
  • createLiquidVinyl() => { scene, camera, setSize(width, height), update(time), dispose() }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer and a full-screen shader material.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Composed for a 4:5 portrait frame and measured by the frame height: in a wider frame the picture stays centred at full height and its background fills the sides; in a narrower one, such as 9:16, the sides are cropped.

Lighting: A lit projection: luminous dye filaments on dark fluid, with glints that rotate across the lacquer and the chrome arm.

Timing: Dye cells drift and merge, arrange into a rainbow sun with a corona, twist into a vortex with a dark eye, then relax back to the opening.

Output
1080×1350, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — Every part of the film is a function of the time modulo its length, and every motion completes whole cycles, so the last frame meets the first.
Tested
Rendered 240 frames on 2026-10-10 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 full-screen fragment shader. About 3 ms a frame at 1080 by 1350 on an integrated Intel GPU (Iris Xe), and about 1 s a frame with software WebGL. Plays at 30 frames a second at full size on an integrated GPU.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- liquid-vinyl/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:09abf3bb52f078be…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
From the owner's collection Twenty Impossible Worlds: the original GLSL ES 3.00 shader of the film “Weather Inside a Record”, created with ChatGPT / Codex and used as published, wrapped for AI Pixel Wizard as a three.js full-screen shader in October 2026. The collection's synthesised soundtrack is not part of this ingredient.
BinMore like this

More like this

Play these full screen

Neon Koi

Background3DSeamless loopPortrait8 seconds

Bass Pulse

Background3DSeamless loop8 seconds