Soap Film preview
Soap Film Pro · Coming soon for Aperveil 1.0 WebGPU shader

A surface with no inside.

An interactive WebGPU bubble coloured by thin-film interference. The rim turns silver and straw, drainage shifts colour down the shell, and nearby filaments part around the cursor. React component and WGSL included.

Meet the surface

Part of Aperveil Pro · Coming soon. The live demo, editor and downloads will open in a later release. Free shaders and blocks are available now.

Pro · Coming soon for Aperveil 1.0React exportRaw WGSL

Inside Soap Film.

Soap Film marches each ray through a spherical shell rather than a filled ball, so the film is crossed twice and every filament keeps one interference order. Inside the shell a domain-warped fold field carries a zero set that reads as a sheet; each step integrates that band exactly along the ray, so folds draw themselves as smooth bright edges without grain. Colour comes from two-beam interference in three wavelength bands: the path difference is 2nd·cos θ, shorter toward the rim, and each band averages its fringes out as the film thickens, so thick film reads white and the rim turns silver and straw instead of rainbow stripes. The outer skin brightens at grazing angles and mirrors a soft window.

Three sampled wavelengths are not a spectrum, and the three palette colours are broad rather than monochromatic, so the band weights are sharpened before mixing to keep a fringe coloured. Drainage is a fixed vertical gradient, not a solved thin-film flow; there is no surfactant model, no rupture, no Plateau borders and no real bubble lifetime. Nothing here is a spectral render or a physically validated optics result.

7.93 ms GPU timestamp median; p95 9.765 ms. 1440x900 @ dpr 1.5; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-28. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

Position

Adjust position in the editor. The default is [0.5,0.5].

Bubble size

Size of the bubble.

Fold frequency

How many folds the film makes inside the bubble.

Fold warp

How much the folds twist and warp.

Color Looks preserve these settings. Open the editor for all 21 controls.

Coming soon.

This Pro surface's demo, editor and downloads will open in a later release. Free shaders and blocks are available now.

Explore shaders

Made for a real interface.

Open a beauty, materials or research page with a single object that rewards looking. Give it space, a quiet serif or geometric sans beside it, and let the visitor part the film's filaments with the cursor. The product copy stays ordinary HTML next to the canvas.

Soap Film used behind an example interface
INTERFACE LABExample composition

Notes on thin things

Colour without pigment.

A working record of surfaces that are too thin to have a colour of their own, and have one anyway.

Subject

Interference at the boundary.

Method

Observation, three bands.

Illustrative layout, not a customer project. The image is a still preview of the selected Look.

An illustrative layout. Your content stays in HTML; the shader sets the atmosphere.

Before you ship.

What this surface does, where it fits, and where it stops.

All shaders

Make Soap Film yours.