Design study

288 landing pages from nine paintings

Renaissance oil paintings, generated then animated, rendered live in the browser as an ordered dither. Nine motifs across thirty-two design styles — every page a running canvas, not a video file.

How it works

One painting becomes a page

Every motif starts as a single generated still, becomes a five-second clip, and ends as a grid of dots redrawn eleven times a second on an HTML canvas. The dot field is the design — it is not a filter laid over an image.

Generate a still

A Renaissance oil painting of a subject made of many small elements — a flock, a field, a fleet. Solid objects dither into an illegible blob; many-part subjects render as themselves.

Animate it as video

Image-to-video with a locked-off camera. Video rather than separately generated frames, because independent frames drift in geometry and the result flickers.

Extract and clean frames

Eleven frames a second, borders cropped, background flattened so codec noise does not dither into a haze of stray dots.

Dither in the browser

Luma, auto-levels pinned across the sequence, then an 8×8 Bayer ordered matrix quantising to a few tone levels. Each cell drawn as a circle whose radius scales with tone.

Loop and react

Turbulent motifs never repeat, so the tail crossfades into the head rather than cutting. The cursor displaces sampling coordinates, bending the field like wind.

The five-stage pipeline
The pipeline, end to end
Solid subject versus many elements
Why the subject must be made of many parts
Scale

Nine motifs, thirty-two styles

Styling is downstream of the artwork, so the marginal cost of another page is zero. All 288 came from nine clips.

9Animated motifs
32Design styles
288Landing pages
~$17Total generation cost
Explore

Where to start

Recreate it

The prompts are included

Every page carries a companion prompt at its own /prompt route, and the technique is written up generically so it works on any source material and any colour scheme.