Plate 58: The tune you drew
Draw music with falling marbles.
Canvas
Live web techniques, with the recipe to remake each one.
68 plates, 58 techniques and 10 rules, and every one of them works. Open one and try it.
Frosted glass, and something behind itPlate 15 · try this one
Open plate 15, Frosted glass, and something behind itThe catalogue
Plate 57: One shape, many lives
An interface with no cuts.
Canvas
Plate 56: The seasons express
A year beyond the window.
Canvas
Plate 55: Particle foundry
Turn a cloud of points into your own word.
Canvas
Plate 54: Recipe theatre
A small ritual, poured in layers.
Canvas
Plate 53: Signal studio
See the sound take shape.
Canvas
Plate 52: The last opening
Twelve gates. One way out.
Canvas
Plate 51: A little piece of sunlight
From a star to a blue horizon.
Canvas
Plate 50: Beyond the frame
A poster refuses its edges.
Canvas
Plate 49: Type in motion
Your word is the material.
Canvas
Plate 48: A booking film in one take
A launch film made of one shape and one camera, that you can play, drag and run backwards.
Motion
Plate 47: The moon has come loose
Your hands become shadow animals with a moon to steal and a little film to keep.
Camera
Plate 46: Keep a straight face
The minutes of a parish meeting are read to you. Do not smile. Your face is the controller.
Camera
Plate 45: Live 3D, drawn in ink
Live 3D drawn as an engraving, lit by your pointer, trembling like pen work.
WebGL
Plate 44: A workshop that answers in holograms
A workshop that answers your questions by putting holograms on the table.
WebGL
Plate 43: Shapes that fuse
Flat coloured discs that fuse with a smooth neck where they touch and snap apart as they part.
Motion
Plate 42: Dunk brink
Get the biscuit out before it breaks. One more go, obviously.
Generative
Plate 41: A choir for your complaint
Type something small that is wrong and a choir sings it back in four parts.
Sound
Plate 40: You can sit here
A shy little park that warms to you when you stop trying.
Generative
Plate 39: Two names, one cloth
Type two names and watch the colours meet where they cross.
WebGL
Plate 38: A window that gives colour to light
Design leaded glass, move the sun and take away a measured order sheet.
WebGL
Plate 37: Weave a cloth thread by thread
Set the stripes, watch a shuttle weave them, take home a yarn list and a price.
WebGL
Plate 36: A valley to fly, a cabin to keep
Follow a generated river from dawn to dusk, find six cabins and take home a stay shortlist.
Generative
Plate 35: A tray of ink you can comb
A live fluid tray: drop inks, comb them, take the paper home.
WebGL
Plate 34: Describe a garden, then walk into it
Your words become a garden you can walk through, then a printable design brief.
Generative
Plate 33: A wall of loops that writes your brief
A wall of twenty live loops under one giant line, that also writes your brief for you.
Motion
Plate 32: Notes that meet become a chord
A pocket sequencer where coloured notes join into chords and your loop leaves as a WAV file.
Sound
Plate 31: A colour kitchen with a recipe book
Bring dyes together, stir a measured screen mix and keep a swatch you can use again.
Colour
Plate 30: A dye vat that mixes
Discs of dye that fuse where they meet and really mix their colours, with the result named.
Motion
Plate 29: Tabs that trade height
Stacked tabs in a box of fixed height: one grows as the other shrinks, in 0.15 s.
Layout
Plate 28: A cloud front you can blow apart
A drift of pixel-block clouds you can blow apart, in front of a forecast.
Motion
Plate 27: A menu that tumbles
A menu of tiles that fall in and pile up, that you can throw about and tap to open.
Motion
Plate 26: A list with one sharp line
A list where only the step you are on is sharp, beside a panel that draws it.
Type
Plate 25: A road you walk by scrolling
Scroll and a pixel-art Pete walks a road from first light to full day, stopping at five signposts.
Scroll
Plate 24: COR Intelligence, with Pete on the sign
COR Intelligence in chunky pixel letters, with a small drawn Pete who lives on the sign.
Type
Plate 23: A title with a cat on it
A pixel title with a stepped extrusion and a small ginger cat that lives on it.
Type
Plate 22: A 404 that fills up
A 404 that fills up with shapes that fall, tumble and pile, and that you can pick out and throw.
Motion
Plate 21: Guides that trail your pointer
Named guides that trail your pointer on springs, and go back to work when you leave.
Pointer
Plate 20: A title the pointer shears apart
An arcade's title built from slivers that your pointer scatters and that heal in two seconds.
Type
Plate 19: A slide that arrives through a shape
A cycle workshop's slides, each revealed through a square that turns upright as it grows.
Motion
Plate 18: The viewing
An estate agent's photo listing, where she is nearer every time you look back.
Canvas
Plate 17: Don't fall asleep
A sleep clinic at three in the morning, and a figure that glides down the corridor towards you.
Canvas
Plate 16: The board that answers
A spirit board that answers your questions while your hand is still on it.
Canvas
Plate 15: Frosted glass, and something behind it
Frosted glass, a hissing television, and something that moves when you cannot see it.
WebGL
Plate 14: Built from nothing, layer by layer
Built from nothing, layer by layer: the desk, then the person, then the screens.
WebGL
Plate 13: Drawn on the plot, then built through the drawing
An architect's drawing is pen-drawn onto a plot, then built through the lines.
WebGL
Plate 12: The season ahead, through the glass
Scroll turns the year round one log, and the glass always shows the season ahead.
WebGL
Plate 11: A lens with several views of one place
One log, and a glass that shows who lives there after dark, in winter and spring.
WebGL
Plate 10: The finished house rises through the old
The finished house rises through the old one like land, wherever you rest.
WebGL
Plate 9: A lens that shows the finished house
A glass lens that shows the finished house over the one as found.
WebGL
Plate 8: An arch that opens over a living scene
An arch that opens over a living scene, with the actions live all the way.
Motion
Plate 7: Buttons that lean in and letters that roll
Buttons that lean towards you, with letters that roll on hover.
Interaction
Plate 6: Contour lines that bend around the cursor
Map contours that bend round the cursor, with a hill that rises where it rests.
WebGL
Plate 5: A hero that becomes a card, over a running marquee
A full hero contracts into a card as you scroll, over a running marquee.
Scroll
Plate 4: A loader that opens through its own monogram
A loader that draws its own monogram, then opens as a window onto the page.
Motion
Plate 3: An X-ray lens over a WebGL object
A thrown vase in live 3D, with a lens that shows how it was drawn.
WebGL
Plate 2: A workshop that puts ideas in your hands
A workshop where the holograms sit in his hands, painted into the photographs.
Photography
Plate 1: One scroll, no seams
A bakery told in one scroll, where nothing finishes before the next thing begins.
Scroll
Rules
Small decisions that make a page better, each one made interactive.
Plate 68: A reveal that waits for its picture
A before-and-after wipe that waits for its picture, with the late start measured.
Rule
Plate 67: Hover on a mouse, a button on a phone
Cards that reveal detail on hover, and grow a labelled button on a phone.
Rule
Plate 66: Letters that move, words that read
A headline that animates letter by letter, while a screen reader hears one sentence.
Rule
Plate 65: A live fact on a shaped tag
A bakery's open-now fact, worked out from real UK time, on a notched tag.
Rule
Plate 64: Two voices, read from the mark
A headline that switches its key words into the serif from the client's logo.
Rule
Plate 63: A canvas hero with a real image underneath
A canvas hero with a real image underneath, so a broken canvas still shows.
Rule
Plate 62: A bright accent: fill, never line
A bright accent as fill, text, border and focus ring, with each contrast computed.
Rule
Plate 61: A fluid type scale with a floor
Slide the window from 320 to 2560 and watch type scale hold, or drop under 12px.
Rule
Plate 60: An intro that never locks you out
Two intros side by side: one locks every button for ten seconds, one does not.
Rule
Plate 59: Neutrals from the brand's hue
Pick one brand hue and every ink, paper and grey is rebuilt from it.
Rule