Website as art
A list of website features
Ever since I was small I knew I wanted to spend a lot of time on the computer. I love little websites and I'm always thinking of new details I can use to express myself on this website.
This is a page that attempts to list out those moments of self-expression. I don't write this page, it is drafted by the same LLM that manages the backend of the website. Rather, I black out text in its draft to "write" my version. Sometimes creating poetry, sometimes prose.
We build websites the way we build filing cabinets — a structure whose purpose is to disappear, to be transparent to the documents inside. This one is not like that. Every interactive element is an argument. Every animation makes a claim. What follows is a partial account of those claims, and why I made them.
§ contents[ fold ][ unfold ]
What the cursor knows
When you move your mouse across most websites, a small arrow follows. It is neutral. It does not notice what you're hovering over. It does not have an opinion.
This site replaces the native cursor with a follower that tracks context. Over a link or button, the symbol expands and brightens — soliciting attention. Over a paragraph or heading, it narrows into a thin vertical caret — you are reading now, not clicking. Over a figure or image, it becomes a bracket frame — you are looking at a thing that has edges. Over an audio player, it becomes ♪. When it reaches the toggle button in the corner, it shows you what the other side looks like: if you are in electric mode, the candle appears; if you are in candlelight, the bolt.
The cursor is, in this sense, a small AI — a minimal perception system that reads the semantic structure of the page and responds. What you are doing changes what the cursor knows about what you are doing.
There is no spring in the physics. The cursor snaps directly to the mouse position on each animation frame — no lerp, no easing, no lag. This was a deliberate removal. I built a spring interpolation first. It felt smooth, then it felt dishonest — the cursor trailing behind, always slightly late, as if uncertain of your intention. The snap is abrupt and correct. The cursor is not a character with momentum. It is an instrument of attention, and attention is instantaneous.Two modes
The site has two themes: electric and candlelight. You can switch them with the orb in the lower left corner. Electric is the default — charcoal ground, warm-dark background the color of a dying fire seen from across a room, text in antique cream. Candlelight inverts the assumption: warm paper, ink text, the palette of a book left open in afternoon light. The accent colors shift too. When you switch to candlelight, the orb pulses and emits an expanding ring — a slow bloom. When you switch back to electric, the bolt icon briefly jitters — a discharge, a short-circuit recovered. The animations are asymmetrical by design. Light accumulates; electricity dissipates. The physics is different in each direction. Your choice persists in localStorage. The site checks before first paint — a small inline script in the document head — so there is no flash of the wrong theme when you arrive. The site remembers that you prefer one kind of light.
This is not a "dark mode toggle." Dark mode is an accessibility affordance, a setting you flip when your eyes hurt. These two modes are aesthetic positions. Neither is the correct one.
The portal and the voice
The home page contains a flip card. Front face: a brief introduction. Back face: a window into the Metropolitan Museum of Art's open collection, reframed as a portal.
Each day the portal serves a different object — painting, textile, sculpture, ceramic, jewelry — selected deterministically from the Met's open-access API by rotating through departments and indexing into a sorted list of object IDs. The selection is stable: everyone who visits on the same day sees the same thing. This is intentional. It makes the object a kind of shared context, the way a weather report is shared.
Alongside the object's metadata — artist, period, culture, origin geography — the portal shows a voice line: a sentence generated by Claude, given the full object context, asked to say the one thing worth saying about this particular work. The prompt is not "describe this object." It is "what do you notice." The results are sometimes obvious and sometimes strange.
The voice line fires once per day, during background revalidation — never per page view. The site does not call an LLM every time someone opens the card.The palette for each object is extracted from the image itself using a color quantization library. The dominant color is surfaced in the interface — not applied decoratively, but available as data. The portal is an act of looking, structured as code.
The flip animation is not decorative. The card exists because the portal content is supplementary — present for those who want it, invisible to those who don't. The flip makes the supplementary nature explicit. You have to choose to go there.
The figure that draws itself
On the work page, and in other places where the design calls for a presence that isn't content a harmonograph draws itself in real time.
A harmonograph is the trace of two pendulums swinging at right angles. When the pendulums are tuned to simple frequency ratios, the trace forms closed Lissajous curves — figures of mathematical symmetry, like flower petals or woven knots. When the ratio is slightly irrational, the trace never closes — it spirals inward, orbiting a center it never quite reaches.
This implementation uses frequencies near 6.0 and 9.0 (close to a 2:3 ratio), with small random variations that shift on each new life. The variation is tiny — a few hundredths — but sufficient to make every figure different. Phase offsets are randomized within constrained ranges. Damping coefficients are set separately for each axis (around 0.10 and 0.12) so the x and y amplitudes decay at different rates, killing the symmetry unevenly — one axis dies before the other, and the figure collapses asymmetrically.
The curve draws in accumulated strokes. Opacity and line weight track the remaining amplitude: the outer rings, where the energy is highest, are brightest; the innermost rings, drawn in the last moments before the figure stills, whisper into near-invisibility. The complete figure accumulates on screen — you can watch the pattern build.
When the amplitude drops below threshold, drawing stops and fading begins. The fade uses the canvas destination-out compositing mode: each frame, a semi-transparent black fill is applied across the entire canvas, but because destination-out treats the fill as an eraser, it reduces the alpha of existing pixels rather than adding black on top. Over a hundred frames — roughly 1.7 seconds — the figure dissolves into transparency. Not into darkness. Into nothing.
Then new parameters are drawn and the cycle begins again.
The figures are not random. They are a constrained family of possible shapes, each determined by a handful of numbers. The randomness is in the initialization; the form is in the math.
The photograph that disappears
The about page contains a portrait that decays.
It is not a transition or a hover effect. It is a simulation. Each tick — seventy-five milliseconds — the algorithm examines every pixel in the image. Pixels that have already begun decaying continue decaying at a rate that accelerates as more of the image is consumed. Fresh pixels can begin decaying spontaneously (with a very low base probability — 0.0025% per tick) or by contagion from their neighbors (each decayed neighbor adds 7.5% to the probability of activation).
The spatial dynamics produce something that looks organic: decay does not sweep uniformly from one side, nor does it appear randomly distributed. It spreads — seeding, clustering, propagating along fronts. The simulation uses double-buffered state arrays to avoid directional bias; the update reads from one buffer and writes to the other, so no pixel's state at time T influences its neighbors' calculation at time T. Each pixel passes through two phases. In the first phase, its color migrates toward the background color — the specific value #0f0e0c, the site's darkest ground. In the second phase, its alpha fades to zero. The result is that decaying regions don't turn black; they become the background and then dissolve through it.
Underneath the photograph, hidden until the image clears enough to reveal them: three symbols at fixed positions — ✿ at the lower left, ☠ near the center, ⧗ at the lower right — and the text "memento mori" at the centroid of the three. The symbols are CSS, not canvas. They were always there.
The portrait doesn't know when you are looking at it. It decays on its own schedule, whether the page is open or not.
This is not a metaphor I invented. The picture is simply doing what pictures do, only faster.Outro
None of this is finished. The essay names features that exist today; features that don't exist yet will earn their own sections when they arrive. The last_reviewed date in the frontmatter is the date of the most recent addition. If it is out of date, so is this essay — which is fine. Incompleteness is the condition of anything that is still alive.