The site that redraws itself

Reload this page and watch the hero. The colors changed. That is deliberate: it is the one ritual this site performs on every visit, and the rest of the design exists to make room for it.

the draw

Before the browser paints anything, a small inline script in the document head draws two colors: one dark, saturated “main” from a list of eighteen, and one bright pastel “secondary” from a list of nineteen. It writes them onto the root element as --color-main and --color-secondary. Every accent on the site reads from those two variables. Link underlines, the selection color, the hero artwork, hover states on cards. Nothing else on the page is allowed to carry color.

Here is the draw, extracted from the site so you can run it by hand:

Eighteen mains and nineteen secondaries make 342 possible sites. You were served one of them when you arrived. Come back tomorrow and you will probably get another.

the seed

Color is half of it. The draw also produces a 32-bit seed. The hero runs a WebGL ribbon field in the pair colors (move your pointer, or click it), and every work thumbnail plots a De Jong attractor, both fed from that seed through a deterministic PRNG, mulberry32. Each canvas mixes the visit seed with its own stable key, so the hero and every thumbnail get different art, but the same art for the whole visit. Navigate around and things hold still. Reload and the studio rearranges itself.

Determinism matters more than the randomness here. Random art that changes every frame is a screensaver. Random art that is fixed for exactly one visit feels like a print you were handed at the door.

why bother

The brand line is “show yourself more”, and a studio site should practice what it sells. Most agency sites are a template with the logo swapped. I wanted the opposite: a strict monochrome stage, near-black on near-white, mono annotations in the margins, and one loud random voice on top of it. Because ink and paper never change, the pair can be as loud as it wants without the page falling apart.

There is also a quieter argument. A visitor who notices the site changed since yesterday has learned something true about the studio: the system underneath is stable, the surface is alive. That is roughly what I try to build for clients too.

The whole mechanism is a few hundred lines. One inline script, one theme module that is the typed vault for the palettes, two canvas components. No library. If you build something like this, put the draw before first paint. A theme that flashes its fallback and then corrects itself gives the trick away.