• WebGL
  • Visual Design

Refinement

WebGL · Custom Shaders

Two interactive scenes exploring a single idea: that something raw and shapeless can clear into a finished, faceted form. The first is a blob of ore that polishes itself through the five Platonic solids and back. The second is a tic-tac-toe board that resolves itself, choosing a winning line at random and refining those three pieces into matching gems.

Hover to spin up the morph. Click and drag to rotate the gem.
The board picks a winning line, refines those three gems into matching shapes, then dissolves them back to raw ore.

The Idea

Both scenes are reaching for the same thing: the moment when a rough material reveals the finished form that was already inside it.

The first scene is the simplest version of the metaphor I could think of. A noisy, blob-shaped piece of "raw" material slowly clears its bumps, polishes itself, and snaps into one of the five Platonic solids — tetrahedron, cube, octahedron, dodecahedron, icosahedron — before melting back down and starting again with the next shape in the sequence.

The second takes the same idea and applies it to a puzzle. Nine identical gems sit on a 3×3 grid. Every few seconds the board picks a random winning line — a row, a column, a diagonal — and reshapes those three pieces into the same Platonic solid, holds the win, then dissolves them back to neutral. A tic-tac-toe board that solves itself by refining its own pieces.

What I Was After

The feel of refinement, not just the visual. The blob shouldn't pop into a gem — it should clear up. The bumps should die out before the topology changes, so you never see the polyhedron looking ore-like, and you never see the ore looking faceted. Most of the work was tuning those transitions until the moment of becoming-finished felt patient instead of abrupt.

The tic-tac-toe board is a small bet that the same metaphor scales — that watching a system resolve itself might be more interesting than watching a player solve it.

Built With

A single custom GLSL shader handles both the morphing geometry and the dual-material rendering — soft volumetric lighting at low morph values, a faceted iridescent gem at high morph values, with the cross-fade tuned to feel like polishing rather than switching. The same sapphire palette holds in both light and dark modes.