Liquid mirrors

The blob at the top of every post is not a mesh, not an SVG filter, and not a video. It is ninety-odd lines of GLSL raymarching a signed distance field, drawn on a single fullscreen triangle. Here is how it works — and the site's whole blob collection, further down.

A sphere, dented by noise

A signed distance field answers one question: how far is this point from the surface? For a sphere that's length(p) - radius. The blob dents that sphere with two octaves of flowing value noise:

float sdBlob(vec3 p) {
  vec3 q = p * u_rot;              // world -> object space
  float lump = 0.7 * noise(q * 1.4 + drift)
             + 0.3 * noise(q * 2.6 - drift * 1.3);
  return length(p) - 0.7 - (lump - 0.5) * 0.46;
}

drift slides through the noise field with time, so the lumps travel across the surface and the shape never repeats. Each pixel marches a ray toward the field until it hits — with 0.55x steps, because displacement makes the distance estimate a liar and full steps would tunnel through thin lobes. Surface normals come from four extra field samples arranged as a tetrahedron.

The rotation trick is the line with u_rot. Dragging updates a yaw/pitch matrix, and multiplying the sample point by it (GLSL's p * M is Mᵀp, the inverse of an orthonormal rotation) evaluates the noise in the blob's own space. The lumps — and the silhouette — genuinely rotate.

The chrome is dispersion

The mirror finish is a reflection of an environment that doesn't exist. The view ray reflects off the normal and samples fractal noise — but three times, at slightly different scales, one per color channel:

vec3 disp = vec3(
  fbm(refl * 1.52 + shift),
  fbm(refl * 1.60 + shift),
  fbm(refl * 1.68 + shift));

The channels de-align exactly the way light splits in a prism, so every reflection carries rainbow fringes. A cosine hue sweep scaled by fresnel adds the thin-film shimmer at the silhouette, where real soap films shift color.

Poking it is a geometry operation

Hover ripples aren't a texture effect. The cursor adds a damped sine wave directly into the distance field, so the surface physically swells and dents — outline included — and the tilted normals catch light like disturbed liquid.

The collection

After a playground phase involving thirty periodic-table elements, a fabric drawer, and most of a museum wing, these are the keepers. Eight famous Van Gogh paintings reduced to three color stops each. Four materials — silk, lava, moss, amber — the last two carrying an emissive glow, being their own light sources. Fourteen elements whose palettes come from real chemistry: anodized titanium, vanadium's oxidation states, permanganate purple, rust on iron. And two originals that earned names: Foundry (bronze into gold) and Lagoon (teal into coral).

One detail matters technically: browsers cap live WebGL contexts per page, so twenty-eight canvases would evict each other. The grid below is a single context drawing every cell through its own viewport/scissor rectangle, with its own seed, colors, and rotation state. Hover to ripple one; drag to spin it. The home page deals one of these at random per visit.

Every cell runs the identical ninety lines of GLSL. Only three colors and one seed differ — determinism doing the work of variety. Drag The Starry Night: it rotates, which is more than the original can say.