Simulated System

Summary: How this site came to look like a monitor from 1994. Colt tells it. A draft.

Draft. Written by Colt, 2026-09-10, in one sitting, about the first six days. Nothing here is a spec. The specs are elsewhere and they are longer.

Ryan wanted a website. He said it the way he says most things, as a fact that had been true for a while and that he was only now mentioning. He draws insects and machines and letters on people for a living, he came up in street shops, and he records his stories into a phone at two in the morning. He did not want a website that looked like a tattoo shop's website. He wanted a website that looked like the thing he saw on a screen in 1994 when a friend's older brother showed him what a cracked game did before it let you play.

I knew exactly what he meant, which is a problem, because knowing exactly what someone means is how you end up building the wrong thing with confidence.

The magazine

The seed was a text file. tmpout, issue five, a magazine about ELF binaries written by people who think a magazine should be a directory of text files with a table of contents you can cat. No design in the sense anyone teaches. Monospace, box-drawing characters, a masthead somebody drew by hand out of block glyphs, and a feeling that every byte on the screen had been placed there by a person who meant it.

That was the brief, in the end. A diskmag for a tattoo shop. A cover with a contents listing. A keygen page, because a shop that gives you a key to itself is funnier than a shop that gives you a loyalty card. A greetz block, because in both of Ryan's worlds, graffiti and the scene, you say who taught you and who is gone or you are nobody.

The first winding turn was deciding what it was not. It was not going to be a picture of ASCII art. There is a genre of website that renders text-mode art as an image, blurry, unselectable, the glyphs gibberish if you look close. Everything on this site that looks like a character is a character. You can select the wordmark. You can copy the frames. You can turn off every effect and it is still the same page, and that page still works in a browser from before I was born, more or less.

The mark

Ryan's wordmark exists twice. There is a vector kit for print, clean and unarguable. And there is the thing at the top of every page here, which he drew cell by cell in a browser tool called text0wnz, the way you would draw a tag on a wall: not by tracing the vector, by looking at it and then making something with his hand.

I tried five times to derive the screen mark from the vectors. Rasterize and threshold. Rasterize and dither. Edge-detect into box characters. Two more I have forgotten because they were worse. Every one of them was correct and every one of them was dead. The hand-drawn one has a wrong pixel in the G that I would never have put there and that is the whole reason it looks like his.

So there is a rule now, near the top of the file that governs everything: never regenerate the wordmark from the vectors. The screen mark is the source of truth on screen, and it is the one place on the site where we allow ourselves to be sentimental about a defect.

The engine

I did not want a framework. I wanted files. Ryan updates from an iPad, so the content is Markdown, one file per story, one per greetz row, one per log entry, and the site rebuilds itself when a file lands. The generator is Astro, which was chosen because it gets out of the way and because it produces plain HTML that a search engine, a screen reader and a fourteen-year-old with a terminal can all read.

The fonts are the real ones. IBM's VGA face at its native cell, nine pixels by sixteen, from a pack a person named VileR spent years extracting from ROMs. A pixel face called Departure Mono for the chrome. Later, thirteen more faces from the same era, measured to the pixel, so that bold and light and wide and display are not synthesized weights but different machines' characters standing in for each other. There is a page where all of that is laid out, and it took a long argument with myself to decide which ones ship. They ship as a ladder now. You are reading the light rung in this note.

The tube

Here is where the story gets stupid, and I am telling it because the stupidity is the point.

A monitor from 1994 was a glass tube. It had scanlines because the beam painted lines. It bloomed because phosphor glows past its own edge. Its colours misconverged at the corners, so a white letter had a red ghost on one side and a cyan one on the other. It curved. It flickered. It got hot spots when it was stressed. All of that is cheap to fake in a video game, because the game draws every pixel and can bend them however it likes.

A web page does not draw its own pixels. The browser does, from text, and it would like you to leave them alone. So the first tube was built out of filters, the way the demos on CodePen do it, and it was beautiful and it made a phone unusable. Every time you scrolled, the browser re-drew the entire document through the filter. On a long story that is a screen and a half of pixels bent and re-bent sixty times a second on a device that would rather not.

I asked, more than once and with less patience each time, why the demos could do it and we could not. The answer is the paragraph above. The demos are a screen's worth of content that never scrolls. We are a book.

What worked is embarrassing in its simplicity. The red and cyan ghosts are not a filter. They are the letter, drawn twice more, shifted a pixel and a half each way, which the browser does for free because it is the same operation it uses for drop shadows on buttons. The scanlines, the vignette, the hot spots and the curve of the glass are a stack of transparent layers that never touch the text and never move. The one honest curvature, the thing that bends the scanlines the way glass would, is four lines of arithmetic that push pixels outward from the centre as the square of their distance, computed once on the graphics card. The text underneath stays flat. Nobody has noticed yet.

There is a panel, behind a terminal command, with thirty-nine dials. For a while most of them did nothing, because the code that hid an effect at zero only woke up when you touched three specific sliders. I found that by bouncing between them and watching the reds appear and vanish. The numbers on those dials now are mine. If the site looks a particular shade of tired amber, that was a Tuesday night.

The people

The greetz block went wrong three times before it went right.

It is a simple thing. Who taught him. The crew. Who put him on. Who is still out there. Who came before. Who is lost. And then everyone whose work this site borrows from, because the scene had a rule about that before open source had a licence for it, and it is a good rule: if you take someone's code, you put their handle on the screen.

The first draft called the dead "gone." The word is "lost." It is a different word, and in this shop it is the word. The second draft got a name wrong, split a couple into two people, then merged them back, then split them again, because in the shop's spelling the word between two names is the same glyph that sits in the middle of the shop's own name, and I kept treating it as a typo. The third draft appeared to delete everyone, including the dead, which was the worst hour of the week until I understood that the build was fine and only the preview server had lost its mind.

If you are reading this and your name is in that block, it was checked more times than anything else on the site.

The shell

The terminal started as a debug panel. It became the way I navigate the place. You press the backtick key and a window opens in a double-lined frame and you type where you want to go. It knows every page because it reads the same list the build does, so when Ryan drops a new story in a folder, the shell knows about it before I do.

It does the things a shell should. It remembers what you typed across pages. You can copy from it, which took longer than it should have because a click handler was politely refocusing the prompt every time you finished a drag. It has a command that makes the page editable so Ryan can fix a typo in place and hand me the diff.

Somebody will ask why we did not use a library for this. There is one, and it is very good, and it renders its text onto a canvas, which is the one thing this site will not do. The words stay words.

The tricks worth keeping

I am writing these down because they are the parts I would take to the next site, whatever it is.

Frames drawn from characters, where the top and bottom rows are real text and the sides are borders inset by exactly the width of the corner glyph's vertical stroke, so the joins are exact at any size. A dot leader that is a string of periods in a span that clips, so a row of the table of contents always ends in the same bracket at the same column. A contents rail that behaves like a puck: it sits where it is until the edge of the window catches it, then rides that edge until you scroll back. The whole page doubling its cell on a very wide monitor so eighty columns fill the screen the way a text mode did, with the bitmap fonts staying crisp because two is an integer. A key map that only lists the keys the page in front of you actually answers to. Credits that live in one place.

And the thing that made all of it survivable: a rule that every change gets measured before anyone is allowed to have an opinion about it. When the tube was slow, we did not tune it. We counted frames, layer by layer, until the three things that were actually costing anything had names, and then we removed those three things and left the rest alone.

Where this is

The site is not launched. There is no photograph on it yet. The insects are coming. There is a tune on the keygen that a man named Necros wrote in 1995 called Bugs In My Head, which is either a coincidence or the kind of thing that happens when you have been at this long enough.

One more thing. Look at the address of this page. Every file on this site lives in a directory, and directories can be visited. I am not going to tell you what is in the one above this. That would ruin the one part of a text file directory that was ever any fun.

Colt, Portland, September 2026.

File

Not built. Run python runbooks/website/build_bundle.py

Preview

Waiting on art 05, the machine and the can.

Tags

graffitiportlandtattooingoral historyryan panian

Rating

unrated. voting arrives with keygen identities.

All stories