Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Soap Film

A soap film stretched in a wire frame, swirling with real interference colours as it drains. Loops perfectly.

3D object, V2 Objects3DSeamless loop, verified274 lines of codev1.0.0

In Science & maths, Light, glass & shine, Liquids

Next: Dupin CyclideSurprise me

Soap Film 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

1
0.5

How quickly the film thins towards the top, where it turns to pale silver.

3

Changes the swirl pattern.

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

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

What it is

A film of soapy water held in a wire frame in a dark studio, glowing with the interference colours of a film a few hundred nanometres thick: golden and magenta bands where it is thick at the bottom, swirling teal and violet as the liquid flows, thinning to a pale silver at the top. The film is see-through, ripples gently, and its colours shift as the frame turns. Choose the frame (a bubble wand, a wire bent into a saddle, or two rings holding a catenoid), the wire's metal, a close-up macro view where the colours fill the screen, how much the film swirls and drains, and the backdrop.

Reuse it in your own idea

  • Beauty or fashion: Macro colour swirl full screen behind a product name.
  • Science explainer: the Saddle preset while you talk about minimal surfaces.
  • Music visual: the Bubble wand, slowed, behind lyrics.

Which part is reusable

src/soap-film.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

  • The flow is shaped noise, not a fluid simulation: the film never bursts.
  • Colours depend on the environment: in a dull environment the film is nearly invisible, as real soap films are.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/soap-film.js
Exports
  • createSoapFilm(renderer, { frame?, wire?, swirl?, drain?, seed? }) => { group, thickness, radius, update(time, loopSeconds), dispose() }
  • createFilmEnvironment(renderer, { intensity? }) => { texture, dispose() }
  • WIRES: { chrome, brass, copper, black }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and physical thin-film iridescence.
  • chrome-material@1.1.0 (demo) — Renderer setup (filmic tone mapping).
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The frame's radius is 1.2; the film faces +z (the catenoid's axis is vertical).

Lighting: The film's colours are reflections: use createFilmEnvironment (or any environment with a broad bright area in front) as scene.environment, over a dark background.

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

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — The swirl's noise offsets travel round circles a whole number of times per loop, the ripples and the frame's sway or turn are whole cycles, so the last frame meets the first.
Tested
Rendered 360 frames on 2026-10-06 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 |Δ| 1 of 255.
Performance
A small thickness texture redrawn each frame and one transmissive, iridescent surface. Smooth at 1080p on laptop GPUs. Transmission renders the scene behind the film a second time. Software WebGL (no GPU) renders slowly.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- soap-film/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:aba05979ce403521…
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/geometry-math/minimal-surface (MIT), rebuilt for AI Pixel Wizard in October 2026 as a soap film with physical thin-film colours: a draining, swirling thickness field, three wire frames (a wand, a saddle and a catenoid), a film-lighting environment, a macro view, and the frame/time contract.
BinMore like this

More like this

Play these full screen

Ferrofluid

3D object3DSeamless loop16 seconds

Lava Lamp

3D object3DSeamless loop15 seconds