Iridescent Liquid Shader Design

An Oil-on-Water Appearance Built From Math

Iridescent Liquid is an official OpenDesign example built around a single WebGL preview rather than a collection of application screens. Its authored heading, “LIQUID IRIDESCENCE,” appears over a saturated field of flowing violet, cyan, pink, and rose forms. The composition makes the canvas the subject while keeping the explanatory copy close to the lower-left reading path.

The supporting text calls the effect a “living oil-on-water field.” The implementation renders a fullscreen triangle with procedural noise rather than a sphere mesh or photographic texture. That lets it suggest a fluid material without depicting a literal object. The material language is a visual metaphor, not proof of a physically accurate oil or water simulation.

At the top, “OPENDESIGN · WEBGL PREVIEW” identifies the context and “REAL-TIME · GPU” frames the rendering approach. These labels orient the viewer before the larger title is read, but they should be treated as descriptive interface copy rather than proof of measured frame rate or production performance.

01

Continuous Canvas

The visual field fills the composition, so movement remains the primary content rather than a backdrop for separate panels.

02

Textured Contrast

Large white lettering separates the editorial message from the dense color field, though placement must remain stable as the background changes.

Where The Design Fits

This work is most useful as a reference for interactive visual backgrounds, generative-art studies, and creative-coding demonstrations. It shows how a page can communicate a visual experiment with only a short description, a large title, and a direct interaction cue. It is less suited to information-heavy interfaces because the animated surface competes with small labels and detailed content.

The prompt “MOVE THE CURSOR ↗” turns the viewer from a passive observer into a participant. The supplied states show the same canvas with different color boundaries and ripple arrangements, while the overlay remains consistent. That pairing makes state change legible: the composition changes, but the reading frame does not.

Composition And Motion

The design uses a strong vertical reading order: contextual labels at the top, the oversized “LIQUID IRIDESCENCE” heading near the lower-left, explanatory copy beneath it, and the cursor instruction at the lower-right. This distributes attention across the wide canvas while keeping the main message grouped in one readable block.

The captures show three states of the same shader canvas, not independent screens. Across them, the heading and supporting sentence stay in place while the surrounding currents shift from cyan-heavy regions to more magenta, pink, teal, and ochre passages. The stable overlay gives the motion a reference point; the tradeoff is that the background can reduce contrast behind parts of the copy.

The fragment shader uses six-layer noise through two chained warp fields. A distance-weighted pull from the pointer bends the sampling coordinates, and a cosine palette plus bright ridge terms creates the iridescent currents. Both pointer coordinates ease toward their targets at 0.06 per frame, while elapsed time continues to alter the field. The lower-right instruction is fixed text rather than a clickable control.

Color As Structure

The palette is not a single gradient. It is organized as broad colored currents edged by pale, luminous contours. Cyan and teal provide cooler interruptions inside the dominant magenta and violet field, while pale pink lines reveal the flow direction. This variation helps the canvas feel dimensional without adding literal geometry.

Stable Reading Frame

The repeated overlay demonstrates a practical interaction pattern: preserve the title and instruction while allowing the artwork to vary. A recreation should keep that relationship intact, then test whether the selected palette leaves sufficient contrast beneath the text.

Capability Boundary

This artifact is a design and rendering example. The supplied evidence supports visible WebGL canvas states, local pointer-response handling, resizing, and an animation loop. It does not verify connected services, storage, production deployment, measured frame rates, or the original generation model. The three captures should therefore be read as visual states of one composition, not as proof of separate workflows or tested performance.

How To Adapt It

For a new version, preserve the relationship between procedural motion and editorial framing, then change one variable at a time: palette, ripple scale, title placement, or pointer influence. Keep the change observable in the canvas and describe proposed behavior as proposed behavior rather than as an existing capability.