Making of
Every effect on this site has a story, and almost all of them start in the sky: the color came from an aurora's spectrum, the display face is named after an astronomer, the cursor is a black hole, and the fabric behind the projects is space-time. Nothing here is video or an off-the-shelf library: it is canvas, WebGL and CSS written by hand.
- 23,368
- lines of code
- 125
- files
- 114
- design tokens
- 11
- runtime dependencies
The aurora came from real photos
The sky that opens this page is the only aurora on it: a flow field in raw WebGL2. No three.js, no GSAP, no shader library. Move the cursor through it: it reacts with the same damping as the reference scene it was ported from.
The hues were not picked from theory. Reference photos of real auroras were converted pixel by pixel to OKLCH: the measured green peaks at 160–165° (the token sits at 158°), and the magenta that theory placed at 322° actually measured 335°. Six of the nine photos had no magenta at all, which is why magenta is a rare accent here, not a band.
0 · rgb(126 249 176)0.18 · rgb(56 224 158)0.38 · rgb(30 178 148)0.58 · rgb(22 96 96)0.78 · rgb(16 34 38)1 · rgb(10 14 16)
Dark base, green as light
The palette is a night sky, not a brand color. Every surface sits at low chroma (near-neutral night blue, because a real night sky is almost neutral), and green exists only as light: a glow, an edge, a line. Never as fill. That one rule is what separates space glow from an eco brand.
And the green is not any green. About 100 km up, solar particles hit atomic oxygen and it answers with one exact wavelength: 557.7 nm, the line that makes auroras green. The blue is ionized nitrogen at 427.8 nm. This site's palette is not a mood board; it is a spectrum.
voidabysssurfacesurface-hilineline-hi
greenblue
- Aa
fg - Aa
fg-dim - Aa
fg-mute
That blue almost never shows up as a surface, and that is deliberate. It lives as a thread instead: every glass panel here carries a green hairline along its top edge and a blue one along its bottom. Chapter six is where you can see it.
All of the emission flows through a single variable, --color-emit-accent. Recoloring the site's emission line is a one-place edit. The mechanism is ready; green is the line in use.
Kepler, by name
The display face on every hero of this site is Kepler. On a page made of night sky, an astronomer's name was not a coincidence worth wasting: Johannes Kepler is the one who looked at orbits everyone drew as circles and measured ellipses, the laws that still steer every spacecraft. Four centuries later, NASA put his name on a telescope that stared at one patch of sky for nine years and found over 2,600 planets around other stars.
The other two voices stay out of the way on purpose. Inter carries the body text, and JetBrains Mono carries the metadata: the coordinates, wavelengths and dates that a page like this one keeps quoting.
A checkout built for the Amazon region
A checkout built for the Amazon region
A name made of particles
The name on the home page is rasterized from the real font and sampled into a grid; every cell of ink becomes a particle held by a spring. The cursor is a black hole, and the physics is the fun part:
Gravity with swirl
The pull has a tangential component: the swirl is what separates a black hole from a magnet.
Event horizon
Particles that cross it are projected back onto its surface. Nothing escapes; nothing is lost either.
Accretion disk
The glowing ring only lights up when there is matter within reach: a black hole with nothing to eat is invisible.
Christofer Ramos
And the ring reads differently here than on the home page. That is a real difference, not your eyes. The ink is always the same: the green emission line, one gradient. What paints it blue is the cursor. The magnifier it carries samples each color channel at a different scale on purpose (34 pixels for red, 28 for green, 22 for blue), and where the three stop lining up, a fringe is left over. On the home page the same ring sits over the aurora, already green and low-frequency, so the fringe has nothing to show against. Here it sits on black and the blue comes through whole: chromatic aberration, the kind real glass has, on the rim of a black hole.
The same black hole became an object of its own on the error page. There it is not a tool, it is the subject. The ring around it has a name: the accretion disk, matter caught in orbit that heats up by friction and glows on the way down. People call it the junkyard of the universe, and nothing that crosses the event horizon comes back: not matter, not light, not a URL typed wrong.
The object from the 404, running here. It is two stacked canvases with the event horizon drawn BETWEEN them: particles behind the sphere go on the lower one, particles in front go on the upper one. The sphere is the only opaque pixel in the whole piece, and that is what makes the disk pass behind it and come out the other side.
The fabric behind the projects
Under the project stack on the home page there is a mesh. It is not decoration: space-time as physics diagrams draw it, a fabric of coordinates that mass deforms. The link out of that section sits inside a gravity well, and the mesh bends toward it. The rule behind every background on this site: the field anchors to content, never floats free.
Pull the well deep enough and it opens into a wormhole. It is drawn with polylines and one two-line perspective formula, s = f / (f + z). No 3D library: a wormhole is cheaper than its reputation.
And the jump between pages is the same formula a third time: a star field converging on a vanishing point while the route swaps mid-flight. Three effects, one projection. The page transition that brought you here was this chapter all along.
The browser's own page-transition API would have done that for free, and it was tried. It takes a snapshot of the page, and a snapshot freezes every canvas. On a site where everything that matters moves, the hand-rolled version won.
That is the field itself, not a picture of it: the same component the home page runs, with the same well opening under the link.
And this is the other end. Go through the well above and the work page receives you through this: the throat of the tunnel, drawn with the same s = f / (f + z) as the well, the star field and the page transition. One projection, four places.
Where the glass lives, and where it dies
Glass is not here for fashion. On a single-theme site there is no light mode to contrast against, so hierarchy has to come from depth instead of color. And depth is exactly what the material buys: the control recedes, the content comes forward. Same Apple lineage as the tab bar on phones, and the same reason it dies inside a product screen.
The frame material refracts what passes beneath it, and the specular highlight follows your cursor. When a panel expands, it gets thicker. Content never sits directly on glass: there is always a solid layer under the text.
Look at the edges: green on top, blue at the bottom. That is chapter two applied as a hairline: the aurora's two wavelengths, one at each end of the panel.
And inside a product screen the glass dies on its own, by a CSS rule, not by discipline. The site's personality lives in the frame; the work being shown never competes with it.
.glass
.glass
Designed by a human, built with an agent
This site was designed by Christofer and built in partnership with Claude Code. The method is what makes that work. Visual decisions become measurements: contrast is computed, rendered color is read back from the page, overlaps are proven with hit tests, and the photo captions on the About page were verified against the originals by perceptual hash. Decisions live in project files that every next session reads, so nothing gets re-argued from zero.
The dependency list below is the whole of it, also counted from the repository. Everything that moves on this site (the aurora, the particles, the mesh, the wormhole) was written by hand, so what is left are the pieces that would have been reckless to rewrite: the framework, the animation runtime, the 5 KB globe.
Designed byChristofer Ramos
Built withClaude Code