anthemion-iris
A soap film, interfering
The pair to khaos rather than a repeat of it: that one is a place, this one is a material. It is here because the colour is genuinely impossible to fake — the first thing anyone says about a gradient like this is that it is a mesh gradient, and this one measurably is not.
Not a hue rotation and not a colour ramp. Each pixel computes what a film of that exact thickness does to white light: the wave off the front surface and the wave off the back arrive out of step, and the wavelengths that land out of phase are removed. Eight wavelengths are sampled across the visible range, not three — R, G and B cannot represent a comb that takes a band out of the middle of the spectrum, and trying gives a posterised rainbow. The film drains toward the top the way a real one does, and the fringes bend around its own slope rather than sliding across the screen.
Integration
<link rel="stylesheet" href="anthemion.css">
<script type="module" src="anthemion.js"></script>
<anthemion-iris thickness="480" variation="62" scale="100" drain="55" sheen="40" drift="100" render="72" place="inline"></anthemion-iris>Slot
A full-bleed backdrop for a page that wants a jewel behind it. There is no property for the film’s colour, because it does not have one — the colour is a consequence of thickness and viewing angle.
Custom properties
--iris-ground--iris-sheen--iris-layer--iris-ratio