Re-creating John Maeda's Reactive Books

Letters That Jump Off the Page

In the late 1990s I was at the International Design Conference in Aspen, watching a young artist named John Maeda present a project he called Reactive Books, and nearly thirty years later I can still picture the space. In one of them the letters bolted off the page and chased your mouse around the screen, streaming behind it like the tail of a kite. In another your keyboard became a typewriter again, every keystroke slamming characters onto the screen with the clatter and snap of the real machine.

Each one was a printed booklet that shipped with a disc, written for Macintoshes that are very old and nobody has anymore. The Museum of Modern Art has Reactive Books in its permanent collection, but that's really only the packaging. If there's an emulator out there, I haven't found the files to run on it. The physical book survives, but the actual art doesn't.

So I built my own. I partnered with Claude to create interactive typographic ideas similar to what Maeda had made. Claude had some pretty good ideas, and I had some too, and it took me a long time to refine them and make them feel like something fun and useful, but that's the fun part of creating. Every piece here runs the same sentence, the pangram printers have used for a century to show off every letter in a typeface, and then puts a physical process to work on it.

The whole story is over on the Substack.

01Cool & Heat

A single slider that runs from deep freeze to white-hot, smouldering at the middle. Set it anywhere and hover the letters, and each one holds a temperature that drifts back to neutral on its own. Push a letter past the lift point and it glows like an ember and floats up before gravity and homing pull it down, while a chilled letter sags, frosts, and sheds flakes, bleeding the cold into its neighbours.

How to use

Move the cursor over the canvas to apply the brush, and drag the slider to aim it cool or hot. The centre smoulders on its own.

Try this

Hold the slider full cold, freeze a run of letters until they sag and shed flakes, then move away and watch each one thaw at its own uneven pace.

02Cut

A blade you drag through the sentence. Each drag across empty space draws an infinite cutting line, and any fragment of text it crosses splits into two convex pieces that slide apart by the gap the chosen blade sets. The pieces keep their shape and their slice of letters, so you can cut a cut and break the sentence into smaller and smaller shards.

How to use

Drag across empty space to slice, drag a piece to move it, and pick a blade width from the rack at the top right.

Try this

Choose the widest blade, make two crossing cuts through a single word, then drag the loose quarter away to read the letters right where the strokes were severed.

03Pressure

A foot bellows feeding a tied balloon. Every stomp on the pump pushes a fixed measure of air down the hose and the balloon holding the sentence swells one step larger, while holding the valve open lets the pressure hiss back out in little wisps. Fill it past the strain point and it trembles, then bursts into shards and quietly reforms to take more.

How to use

Press the pump to add pressure and hold the valve open to release it. Everything here responds to clicks rather than hover.

Try this

Stomp fast without touching the valve to tip it over the edge into a burst, or ride it right at the trembling strain line by bleeding a little off between stomps.

04Magnetic

A magnetic field around the cursor. Each letter remembers its resting center and, once the cursor comes within range, slides along the line between them by a force that grows the closer you get. Repel pushes the letters away and attract pulls them in, and either way they ease back home the moment you leave.

How to use

Move the cursor or finger across the words, and switch between Repel and Attract with the chips below.

Try this

Set it to attract and sweep slowly along the baseline to gather the letters into a knot under your cursor, then flip to repel and scatter them in one pass.

05Erosion

The cursor carries grit. Hover the letters and the wind scours them, pitting the strokes and thinning them out, and chunks break loose and tumble off the bottom of the frame for good. Each letter weathers at its own pace, so the sentence wears down unevenly, the way a carved inscription does over years.

How to use

Move the cursor or finger across the words to scour them, and drag the slider from gentle weather to a full sandstorm. Reset to recut the stone.

Try this

Set it to fierce and rake one word until it crumbles to a few falling rocks, then ease back to gentle and graze the rest so they only fray at the edges.

06Melt

A dial that runs from freeze to melt, and a cursor that carries whichever end you set. Work a letter with heat and it softens, slumps into columns that sag at their own rate, then breaks loose and slides down the page into a pool that sloshes as each letter drops in. Swing the dial cold and the letters set hard wherever they happen to be, mid-slump.

How to use

Drag the dial off center, then trace the cursor across the words. Reset pours the letters back onto the line.

Try this

Melt one word until it is halfway down the page, then swing the dial to freeze and catch it in the fall, stranded between the line and the pool.

07Water & Ink

The cursor carries water. Hold it over a letter and the ink loosens and creeps outward through the paper, the warm body of the dye trailing a cooler edge that runs ahead of it and settles into soft translucent splotches. Leave the page alone and it dries on its own, and a faint tide line stays where the wet edge stopped.

How to use

Set the wetness anywhere between damp and soaked, then linger over a letter. Dry all pulls the water back out and leaves the bleed where it stands.

Try this

Soak one letter until it is barely a shape, let it dry all the way, then wet it a second time and watch the new bleed run out past the old tide line.