Motion, frame by frame
Seeded scenes
sunken lagoon
Nobody drew the picture on top of each post. I didn’t want to make covers and keep them up to date, so every post gets a number instead, its seed, and the page builds a scene from it: the place, the time of day, the landmark, then every cloud, star and window. Type a number or any word and a scene grows from it, or let the die pick one.
When the seed changes, the picture doesn’t just cut. The old scene melts into the new one: a WebGL layer holds a snapshot of the old frame and the live canvas of the new one, warps both through noise, and lets the new scene break through where the noise is lowest. It started as the melt from React Bits’ Morph Slider, rewritten for one canvas and no dependencies. The whole story is in Art from a seed.
The die
The die isn’t an icon or a 3D model. I draw it by hand: every frame, a cube is turned and projected into two SVG paths, one for the edges and one for the pips, which flatten as their face turns away. That way every line stays a crisp 1px vector however it turns, at any size.
A throw hops, tumbles at least a full turn on each axis, and lands on the face its seed picks, so the die and the scene always agree. Pause it halfway and step through: the frames it just passed stay behind as faint outlines.
A hand-drawn arrow
A die in the corner of a picture is easy to miss. So the first time you open a post, an arrow draws itself to it: the line swoops and loops once, then the head gets outlined and hatched stroke by stroke. After that your browser remembers, and you don’t see it again.
Each stroke is one dash as long as its own path, slid into place with stroke-dashoffset. Under the strokes runs a thicker copy in the page’s own black, so the part that crosses the picture still reads.
Text reveal
The name at the top of the home page arrives one word at a time. Each word rises a fifth of its height out of a 6px blur over 800ms, 50ms after the one before it, and the role starts 150ms behind the name.
It’s all CSS, no JavaScript and no animation library. The words are in the HTML from the start, so anything that reads the page gets them, and only the animation’s first frame hides them. With reduced motion on, they just fade in.