FIELD NOTE / 01PAPER / LIVE
Paper / ASCII-THINGS
A quieter interface.
One scene, one idea, a little air. The canvas is the illustration.
A FIELD GUIDE TO LIVING UI
Design ideas.
Six layouts built from the same ASCII parts. Take a composition, copy the starter code, or hand the prompt to your agent and make it yours.
BUILT FORClaude Code · Cursor · Codex · a patient human
Snippets assume npm install ascii-things and a bundler.
Robot dogKoiServersCityStarlingsJellyfishAntsFirefliesKanji field+ your own bad idea
Compositions / live
One scene. Three surfaces.
Same canvas, three existing ascii-things languages. Swap the scene; keep the surface. Take the one that fits.
PRODUCT / 02ABYSS / LIVE
Abyss / ASCII-THINGS
Make it move.
The canvas carries the surface. Type stays quiet in front of it.
LAGOON / 03IMMERSIVE / LIVE
Immersive / ASCII-THINGS
Let it fill the room.
Full-bleed scene, minimal shell, one clear exit.
Same composition data / Design ideas + ShowcaseSee the archive Install
Search the field guide
What are you building?
6 recipes
Command deck
A live dog as the product hero, with a terminal that actually talks back. The scene is the character; the command bar is the interface.
Best when the product has a personality. Keep the copy short enough to let the dog move.
Signal room
A wall of servers reduced to status lights, packet counts, and one calm readout. The ants become a second kind of traffic.
Use this when the data is the atmosphere. Keep the numbers fake but believable.
Quiet pond
A slow koi pond behind a text column. The motion is the ornament, and the jellyfish inset keeps the page from feeling like a single screenshot.
The cream card is the trick: put the reading surface on top of the scene instead of beside it.
Night commute
A city at rush hour, one line of copy, and a live route readout. Starlings turn the skyline into weather.
The route line is a cheap way to make a scene feel like a product without adding a dashboard.
Glyph specimen
Treat a live kanji field like a field specimen: cream paper, clipped labels, a dark viewing window, and fifteen drifting studies.
This is the most useful pattern for an about page, changelog, or case study: the scene becomes evidence.
Launch sequence
A murmuration as a loading screen. The type waits; the sky moves. Fireflies add a second, slower rhythm.
Use this for a launch page, a waitlist, or the pause before a product demo.
UNIVERSAL BRIEF / 07
Now make
the seventh.
Start with one scene, one overlay, and one point of view. The brief carries the layout rules so your agent can carry the taste.