Shape Shift guide

Every control

The panel on the right, top to bottom. On a phone it is the sheet at the bottom of the screen; press its bar to open it.

Your own picture, play and pause, the next mark, the ground's noise, and the two saves.

Add pictureButton: Opens an SVG, PNG, JPG or WebP from your device and adds it to the sequence. A drop on the page or a paste does the same; pasted SVG code and pasted words are added too. Pictures stay in this tab only. See rasterisation.
PauseButton: Plays or pauses the loop (Space).
NextButton: Jumps to the next mark (→); ← goes back one.
Noise onButton: Takes the ground's noise off, and brings the last noise back on the second press (N).
PictureButton: Saves this frame as a PNG (E), 2160 pixels on its long side, in the frame's shape, with the ground's noise.
TakeButton: Saves one loop of the whole sequence as an MP4 at 60 frames a second, up to 60 seconds. The line under Frame says how long and how large before you press it, and counts the per cent while it works.

The marks the loop walks through, in order, and everything that adds to it: your words, five sets and single marks.

The sequenceFilled in by the tool: One chip per mark, in the order the loop plays them. Press a chip to jump to it; its × takes it out (the last one cannot go).
AddButton: Adds the words typed in the box above it to the end of the sequence, in any script; commas split them into several marks. Latin letters use Font for words; other scripts use the best font your device has for them.
SetsPick one: Replaces the sequence with a ready set: Grow (seed to fruit, as the room opens), Sky (sun, moon and comet), Elements (flame, wave, peak, shell, snow, feather, cairn), Scripts (love in five scripts) or Geometry (triangle to heart).
GrowPick one: Adds one mark of the Grow family to the end of the sequence: seed, sprout, leaf, lotus, flower, tree or fruit.
SkyPick one: Adds one mark of the sky: sun, crescent, full moon, sparkle, comet, planet or cloud.
ElementsPick one: Adds one mark of the elements: flame, wave, peak, shell, snow, feather or cairn.
GeometryPick one: Adds one plain shape: polygons from three to eight sides, a circle, a star, a heart and more.

How one mark becomes the next, how it is timed, and how far the frame bends on the way.

MorphPick one: How the two distance fields are mixed: Blend (straight), Melt (bent by slow noise), Swirl (twisted, most at the middle), Ink (the two pool together, see smooth minimum), Erode (each place in its own time), Shards (cell by cell), Pixel (coarsened mid-way, see pixelation) or Ripple (rings from the middle).
EasingPick one: The timing curve of each morph: Smooth (slow at both ends, see ease-in-out), Snap, Soft or Spring. See easing.
Through nothingOn or off · starts off: Each mark shrinks away to nothing before the next one grows, instead of turning straight into it. See dilation.
MorphSlider · 0.3 to 3 · starts at 1.1: How long one morph takes, from 0.3 to 3 seconds.
HoldSlider · 0 to 3 · starts at 0.7: How long each mark rests before it moves on, from 0 to 3 seconds.
WarpSlider · 0 to 1 · starts at 0.5: How far Melt, Swirl, Ink and Ripple bend the frame on the way.

The fringe and the smear, which follow the speed of the morph, and which way they point.

FringeSlider · 0 to 40 · starts at 12: How far red and blue are pulled apart while a mark moves. See chromatic aberration.
SmearSlider · 0 to 60 · starts at 16: How far a moving mark is streaked along its motion. See smear frame.
Fringe directionPick one: Which way the fringe points: Travel (the way the mark moves), Radial (out from the middle) or Sideways.

The ground's noise, the colours, the font for words, an outline, the size, and how a photo is cut into a mark.

GroundPick one: The noise on the ground: Clean, Grain (alive, like film, see film grain), Paper (still fibres, as the room opens) or Speckle.
NoiseSlider · 0 to 1 · starts at 0.6: How strong the ground's noise is.
Font for wordsPick one: The font for Latin words: Outfit, Archivo, Playfair, Cormorant, Mono or Fugaz. Only the font you pick is loaded, from aikizi.com itself. See FontFace API and font subset.
ColoursPick one: Four pairs of ink and paper: Paper (black on cream, as the room opens), Night (cream on black), Cobalt and Sand.
InkColour · starts #111111: The colour of the marks.
PaperColour · starts #f4f3ef: The colour behind them.
OutlineOn or off · starts off: Draws each mark as a line along its edge instead of a solid shape. See offset curve.
LineSlider · 1 to 40 · starts at 10: How thick the outline is.
SizeSlider · 0.4 to 2 · starts at 1: How large the marks are in the frame.
Photo cutSlider · 0.05 to 0.95 · starts at 0.5: For a photo or a JPG: where it is cut into a mark. Parts darker than this become the mark. See luma key.
Light parts are the shapeOn or off · starts off: For a light subject on a dark ground: the light parts become the mark instead.

The frame's shape, for the screen and both saves.

Frame shapePick one: Fill (the frame's own shape, as the room opens), 1:1, 4:5, 9:16 or 16:9, for the screen, the PNG and the MP4. See aspect ratio.

ResetButton: Puts the look and the sequence back to how the room opens: Grow, Blend, the Paper ground and the Paper colours (R).