Studies

Tools for a live-theatre animation piece in progress: shape, colour and time on one street, worked by hand.

1. 03 Through The Looking Glass A capture station for a live performance. The glass takes a face from five angles and wraps them onto one shared head — the same geometry for everybody, made particular by skin alone. Nothing leaves the tab. camera · nothing leaves your browser
2. 07 Touch Grass A field of grass you move with your hands. The webcam follows your fingertips and they sweep through the blades like wind: a quick pass makes a gust, a still hand parts the grass around it. Nothing leaves the tab. camera or mouse · nothing leaves your browser
3. 08 Murmuration An attempt at a quick AI effect driven by hand motion: trails from your fingertips, redrawn as birds by an image model. On a 2020 M1 laptop it manages one image a second and looks bad. Notes on why. case study · a documented failure
4. 09 Dark Puddle Your recently viewed websites, laid out as a map and fed into a portal that eats them: newest sites crisp at the top, older ones dripping, tearing and spiralling into a black eye you can steer. Your history stays in the tab. your history file or a sample · move to steer
5. 10 Fever The picture-treating tool from Fantasmagoria, on its own. It opens on an endless pastel suburb: press Fever and cast a spell on it, on all of it or only the things you pick — the pink houses, the lamps, the lawn. Cyclone wrings what it passes into a black eye, Shatter breaks it into bricks, boards and turf, Liquify ripples it, melts it and sets it crawling. pointer to steer · click to pick
6. 11 Make-Up Fever's sister, for how things look. The same endless suburb under a layers panel, as in an image editor: stack hand-made looks — pencil, scribble, chalk, watercolour, spray, ink, neon, riso print and more, each made of thousands of marks laid along the street's shapes — and a LUT colour grade, each with a blend mode, a mask and its own motion. click things to mask a layer
7. 12 Stutter The third of Fantasmagoria's tools, after Fever (shape) and Make-Up (colour): time. Two houses on the same street, one either side; give each its own motion, stutter, echoes and reverb, in time with a tempo, and drag a curve to fade the echoes. pick the left or right house
8. 13 Afterglow Two balls on a white page, one for each hand. The webcam follows your palms and each ball leaks a trail of colour — a smear, smoke, drips or ripples, in a palette of its own — and where the two trails meet, their colours blend. Nothing leaves the tab. camera, mouse or touch · nothing leaves your browser
9. 14 Cat Head, Part One: Modelling A cat head for Alexithymia, modelled by thirty-two small AI sessions instead of one long one. Each works from a single card, the folder is the only memory, and a person decides at every stop. process notes · Blender · AI agents

Websites that behave like instruments instead of pages: you play them.

1. 01 Scrollwork A generative radial pattern, built from nested SVG primitives, that reshapes continuously as you scroll. scroll
2. 02 Front Door tristan.design opens on a sixteen-mode visual synthesizer instead of a portfolio grid. A wordmark with two million states, and a choice that follows you across the site. case study · embeds the live site
3. 05 Beacon A street on a very small planet. Scroll to travel down it as the sun sets and a beacon rises to light the town; move across the frame and the camera rolls. scroll · move the cursor
4. 06 Grasset A calendar plate after Eugène Grasset, rebuilt as an instrument. Every panel plays: two visual synths, borders, tiles and rosettes, around 3D plants that turn through the four seasons. click anything · season slider · microphone optional
5. 15 Prelude Packing Bach’s C major Prelude cuts the page into rectangles. The music decides every split, how deep it goes and what fills it, and every cut is a rung of the √3 ladder; small shapes move in time with the bars and the bar now playing is outlined. A bigger window divides deeper. resize the window · space to pause

Everything else.

1. 04 Packfold A folding carton built out of ordinary page elements, with no 3D library. The same numbers that fold it on screen write out a two-layer CAD dieline a flatbed cutter will accept. fold it · exports a real .dxf