Lab

A paper-cut lightbox with an evening inside, and the evening is the control. Drag the sun down and every colour follows it into the dark; wait there and the fireflies come to your cursor and start blinking in time with each other.

SVG · One number · A sun you can drag

The content audit as a deck of cards instead of a spreadsheet nobody finishes. Paste your pages, then keep, merge, rewrite or kill each one with a single key. It remembers where you stopped and hands you back a spreadsheet at the end, with the number of the thing everyone avoids: how much of the site you just cut.

React · Four keys · Client-side only

One flick per shot. Bank the ball off the walls and clear every coral target in as few shots as possible. A new table every day, the same table for everyone.

Canvas · Daily seed

Thousands of ink-stroke starlings flying as one animal. Your cursor is the hawk: drift near and they part, dive and they shatter, and the fold back together is the whole show. The three rules that make a flock a flock are dials, so you can turn one down and watch it stop being one.

Canvas · Boids · Three dials

The chart that kills good work. Drag the review date across the year after a relaunch and watch the same structural work read as a failure at 90 days and a success at 240. Nothing changes but when you look.

SVG · A curve with two drivers · A date you can drag

Paste a list of URLs and get an instant read on the architecture: depth histogram, breadth by level, the lonely corners, and an honest verdict on the three-click myth.

Client-side crawl math

A working bench of agentic UX patterns: approval flows, undo, visible reasoning, trust controls. The patterns I argue for, running.

React · Claude API

A sheet of paper in the browser. Crumple it with your cursor, hear it protest, then smooth it flat again and watch the creases refuse to fully leave.

Three.js · Synthesized sound

A perfectly ordinary checkout flow with an x-ray switch. Flip it and every manipulation lights up in place: the countdown that isn't real, the decoy plan, the guilt-trip decline button.

React · GSAP

Your cursor wears a path into the page the way feet wear one across a lawn. Wander long enough and the route you actually take draws itself, right next to the one the designer intended.

Canvas · Your cursor

The IA research method as something you can play. Find three things on a large university site and feel exactly what your users feel.

React · A hand-built IA tree

Paste the labels from your org chart (Bursar, Advancement, Enterprise Solutions) and get back what a human would call them, with a verdict on whether anyone would ever find the original.

Claude API · Plain language

A living topographic map drawn in the site's monoline ink. Press anywhere to raise a mountain and the contour lines redraw themselves around it in real time.

Canvas · Marching squares · GSAP

A working-memory game played against a growing menu. Hold a short list in your head while the navigation keeps adding choices, and feel the exact moment it snaps.

React · Miller's law

Paste a page title and description and see them the way the world will: as a search result and an AI answer, truncation and all, before you publish.

React · Pixel rulers

One visitor getting lost is an anecdote; a hundred is evidence. Watch a hundred simulated visitors pour through a sitemap at once. Their trails burn into a heatmap of exactly where the structure fails.

Canvas · Simulated visitors

A negotiation you can lose. Every stakeholder wants their thing above the fold. Drag their demands onto the homepage, watch it buckle, then find the treaty that holds.

React · Drag physics

Companion piece to “Designing for cognitive load”: a page that deliberately overloads you, then repairs itself one decision at a time.

GSAP · ScrollTrigger

Type an indented outline, or paste a list of URLs, and get the drawn site map back: home, sections, every level below, numbered the way the deliverable is. It reads the shape while you type and tells you which sections are too crowded to scan and which pages nobody will ever reach. Download the SVG and drop it in a deck.

SVG · Tree layout · Client-side only

Ten thousand pages as terrain. A crawler's-eye render of a large sitemap as landscape: peaks where content piles up, valleys nobody visits.

Three.js · Crawl data

One line feeding four tellers, or four lines feeding four tellers. Same people, same speed, wildly different wait. Send a rush through, pull a teller off the floor, and watch a queue explain why the fix is almost never working faster.

Canvas · Queueing theory · Paper people

A pool of ink that never dries. Pick any color the site owns, drag through it, and the pigment blooms into the paper, swirls, marbles, and slowly settles. No goal, no score, just the oldest satisfying thing there is.

WebGL · Fluid simulation · Synthesized sound

A clock built entirely from the site's label voice: twelve-pixel type, tracked caps, and one coral interpunct keeping the seconds.

CSS · A little JS

Throw it, then keep it flying: catch the updrafts, dive through the gaps, and ride the wind drawn as ink streamlines. Your best flight hangs in the sky as a coral line to beat.

Canvas · GSAP

The Lab's front door. A few thousand ink marks hang at wildly different depths, and from exactly where you're standing they line up into one word. Move, and it comes apart into the swarm it always was. It holds together only from here.

Canvas · A word in 3D · Your point of view

You keep the lighthouse. Swing the beam to guide paper boats through fog and rocks to harbor; the boats keep coming and there is only one of you.

Canvas · Fog

Paste any paragraph and see what it costs to read: grade level, sentence-length rhythm, and the words doing the least work. Everything runs in your browser; nothing you paste leaves it.

Client-side text stats

A pocket world floating in the dark, running an ecology. Voxel terrain grown from noise, a forest that seeds and crowds and dies on its own, and two dials that decide what it can become: the rain, and the star it is standing under. Run the star to the end and watch the sky empty.

Three.js · Voxels · Ecology sim

Golf, but the fairway is space. Sling an ink ball around monoline planets whose gravity bends every shot, and sink the cup in as few throws as you can. Nine holes; your attempts stay drawn on the sky.

Canvas · Gravity

Drop in a screenshot and blur it until only the loudest things survive. Whatever you can still read at full blur is the hierarchy you actually shipped, whatever the design was meant to say. Nothing you drop in leaves your browser.

Canvas · Your own screenshots · Client-side only

A surf runner on a wave that never ends. Hold to pump, let go at a ramp to fly, tuck to flip, and when the lip throws over your head keep holding: in the pocket, speed is the only way out.

Canvas · One button

Forty pendulums a fraction out of phase, drifting from chaos into patterns and back forever. Turn the sound on and each pass plays a note.

GSAP · Web Audio

Salt scattered on a steel plate, and a tone you can drag. Sweep the frequency and the grains skitter around looking for the places the plate is holding still, then snap into a symmetry that looks drawn. Stop between two notes and it goes back to noise.

Canvas · Chladni figures · Web Audio

History is taught one country at a time, and it did not happen that way. Drag the timeline to 1877 and the globe fills up: the last samurai lose a battle in Japan, Edison shouts at a tinfoil cylinder in New Jersey, and the first Wimbledon is played to pay for a broken roller.

Canvas · An orthographic globe · Five thousand years

A building you map in the dark, one lantern-width at a time, while something that hunts by sound works out where you are. Run and it hears you from across the plan. Stand still and it hears nothing. The alcoves in the walls are the only way to disappear.

Canvas · Procedural buildings · Synthesized sound

Your day, drawn as the 1,440 minutes it is actually made of. Divide it into the handful of things a life is made of, then watch the ring refuse to grow: every minute you give to one is taken from another, by name. Then run the same day forward ten years and see what it adds up to.

Canvas · 1,440 minutes · A budget you cannot overspend

The tide at the mouth of the Merrimack, drawn as the place it happens to instead of a line on a chart. Nine feet of water climbs the beach and drains off the bar twice a day, the current runs hardest exactly when the tide is halfway, and a boat over the shoal either floats or sits down. The moon and the sun between them only pull about a foot of water here. Switch it off and watch what the sun alone can manage.

Canvas · Real lunar and solar positions · NOAA datums

Point a webcam at a wireframe and find out where people actually look. Upload a screen, give someone a task, and it rebuilds their gaze from the iris after thirteen calibration clicks, then hands back a heatmap, a scanpath, and attention numbers per region. Accurate to a block rather than a word, which is the honest limit of doing this without a lab rig, and enough to settle most arguments about hierarchy. Nothing leaves the machine it runs on.

MediaPipe · Ridge regression · Client-side only

Plan a DIY sprinkler system for any yard. Draw the lot, say what your spigot actually delivers, and the plan is computed, not sketched: nozzles sized to the shape of each piece of ground, heads placed head-to-head, zones packed under your flow budget, trenches routed around the house, and a dig plan with a parts list at the end. Close enough to argue with a quote; not close enough to skip the bucket test.

SVG · A five-stage solver · Client-side only

Real watercolor in the browser. The water is a fluid simulation, the paints are real pigments with their real optics, and the color you see is computed from how each pigment absorbs and scatters light, not from blending hex codes. So the medium behaves: wet-on-wet feathers, glazes multiply, ultramarine granulates into the paper's tooth, and every wash dries with the darkened edge watercolor is famous for, because that is what the water does on its way out.

WebGL2 · Kubelka-Munk optics · 36 real pigments

Every architecture starts as a pile of labels and a person deciding what belongs under what. Pour your pages in, drag a card onto another card to file it underneath, and the structure draws itself three ways at once: the tree you would build, a ring that shows you its balance, and an outline you can type in directly. The text and the table are the same object, so either hand works, and the finished sort exports for a deck.

React · Two drawings, one structure · Client-side only

A walk through an unfinished sketchbook, and the first game I made. You play the first doodle ever drawn in a book two young artists shared, one with a black pen and one with a blue. The ink has stopped and the pages are fading, and your footprints are the last of it: walk, and the world re-inks behind you. Six chapters, a music-box score, and twenty-four notes in the margins that carry the story, all of it drawn by code at load. I have always drawn, and before UX I worked in journalism, so I wanted to find out whether a story and a world I had in my head could stand up in a form I had never worked in.

Three.js · Custom GLSL · No image assets

An open world drawn entirely in ballpoint, and still being drawn. The whole map is one enormous sheet of paper lying on a desk: twelve lands, a castle, a walled town, a desert, an office park, every tree and tower inked by code over watercolor washes, with no image files anywhere. You wake on a bench with no memory and a note in your own hand, and everyone knows you. Three years ago you held these twelve places together, and then you left. There are twelve promises in a notebook, a horse, and a bull that is loose. Margins was the sketch for this. It is the longest story I have tried to tell and it is a work in progress: the opening and the first promises are playable now.

Three.js · Procedural ballpoint · Work in progress

A hidden-object picture book you can walk through. Sixteen tiny rooms share one city block: a laundromat, a roller disco, a noodle shop, a model railway club, an observatory, and eleven more, every one drawn in code in six risograph inks and every one busy at once. Tap a room to step inside. Each hides three things and the same loose goose, and finding all sixteen geese earns the block a victory lap. The Germans have a word for this kind of picture, wimmelbild, a picture that teems. The whole game is looking closely.

Canvas 2D · Isometric, drawn in code · No image assets