Who’s reading?
Pick one and the page folds to what matters to you. Skip it to read everything.
Context
Most portfolios sit perfectly still.
A portfolio says you can make things that move and respond. Then it loads as a stack of still screenshots.
I wanted the page itself to show it, without fighting the work for attention.
- What I did
- The idea, the design and the code.
- Where it lives
- Behind every section of my homepage, the headline included.
The rules
Four rules. Nothing is scripted.
Every cell looks at its eight neighbours and follows the same rules, every step. Gliders, blinkers and collapsing towers all come from these four.
- Fewer than two neighbours: it dies.Too lonely
- Two or three neighbours: it lives.Just right
- More than three: it dies.Too crowded
- An empty square with exactly three: a cell is born.Just enough
The problem
At full strength, it ate every headline.
My first version ran the whole field in solid black. It looked great for a few seconds. Then it was all anyone could see.
The goal
Make the page feel alive without taking attention from the work.
Approach
The maths took an afternoon. The judgement took the rest.
Anyone can copy Conway’s four rules. How loud it is, what a click does and what happens to the words were design decisions, made one at a time.
Part 1 · Keeping it quiet
Alive, but not loud.
01
Old cells fade
A field of solid black cells shouts over everything on the page.
Cells fade as their colony ages. New activity is bright, and settled patterns sink into the paper.
Part 2 · Making it yours
Give every click a result.
02
A click plants a colony, not a cell
A single cell dies on the next step. That’s a poor reward for a click.
Each click plants one of four small patterns, picked at random. Most keep spreading long after the click. Yours are pink.
03
Colour spreads by vote
Once your cells mixed with mine, I wanted you to still see which were yours.
A new cell takes the colour of most of its three parents. Your pink can win ground, or lose it.
Two pink parents and one black: the new cell is pink.
Two black parents and one pink: the new cell is black.
04
The words are made of cells
The headline is the first thing people read, so it had to be part of the board too.
Each word is drawn in cells and held for a moment. Then it’s let go, the rules take it apart, and the next word forms. You can type your own.
What I tried first
Before Conway, I spent a week with an ant.
Langton’s Ant is one ant on a grid with two instructions. On a white square, turn right. On a black one, turn left. Flip the square, step forward, repeat.
For about ten thousand steps it makes noise. Then, for no reason anyone has proven, it starts building a straight “highway” and never stops.
I added more colours and a second ant. It was mesmerising, but too much of a show to sit behind text. Conway got the background.
How I built it
It runs behind every page, so it had to be cheap.
- Cells belong to the pageThe board is the size of the whole page, so cells scroll with the text, like ink on paper.
- One canvasThe cells live in a few flat lists of numbers, and only the rows you can see get drawn.
- One pass per shadeCells are grouped by shade, so each shade is painted in one go.
- Its own slow clockThe board steps at its own pace, and you can pause or clear it from the strip at the bottom of the homepage.
What I learned
What I’d keep doing.
- The rules were the easy part.How loud, how fast and what a click does was the real work.
- Reward every click.One click should change something you can see.
- Let people own a piece.Pink cells made the board feel shared.
The board is live on my homepage. Go and plant something.