Shape Shift guide

Overview

Shape Shift grows one mark into the next: a seed into a sprout, a word into the same word in another script, your logo into your name. It is a shape tween drawn on your graphics card.

A hand-drawn lotus a third of the way into a flower, black on a cream paper ground, a thin red and blue fringe along its moving edges
Grow, as the room opens: the lotus a third of the way into the flower, in Blend, on the Paper ground.

Every mark is drawn once in white on black, then measured: each point of the frame learns how far it is from the mark's edge. That picture of distances is a signed distance field, made by a distance transform that finds each point's nearest edge as the lower envelope of parabolas, in a web worker so the drawing never waits.

The distance starts from the drawing's own antialiased edge, so a curve is placed between pixels (sub-pixel edge). The graphics card draws the edge wherever the distance is zero, the zero level set, at whatever size the screen or the save needs, so edges stay clean when a mark fills a 4K frame.

Between two marks the two distances are mixed, in one of eight ways: straight, bent by slow noise, twisted, pooled together (smooth minimum), place by place, cell by cell, coarsened (pixelation) or in rings from the middle.

A lens follows the speed of the morph: it pulls red and blue apart (colour fringe) and streaks the mark along its way, like an animator's smear frame. A mark at rest is clean.

The ground under it can be clean, or carry grain, paper fibres or speckle, and N takes the noise off in one press.

Save this frame as a PNG, or one loop of the whole sequence as an MP4 at 60 frames a second. It is all drawn in your browser with WebGPU; nothing is uploaded.

Open Shape Shift Start here

In this guide

  1. StartWhat you need and your first loop in five steps.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree loops and the settings that made them.
  4. Keep your workThe PNG, and one loop as an MP4.
  5. KeysEvery shortcut, and what each one does.
  6. HelpWhat to do when something goes wrong.

It opens on Grow: seed, sprout, leaf, lotus, flower, tree and fruit, drawn by hand for this room, already playing.

It needs a browser with WebGPU: Chrome or Edge, or Safari 26. Without it the frame says so in one line.

Words grown out of a noise field, cut into glyph tiers, are Glyph Weave; colour pushed around as a fluid is Chromatic fluid.