
My 404 page is a black hole
Somewhere in the process of building this site (routes, RSS, sitemap, OG images, tag pages, comments) I never once stopped to ask what happens when someone types a URL that doesn't exist. The answer was TanStack Router's default not-found message, unstyled, in the corner of a white page. I found this by mistyping my own blog's address, which is also how I find most things.
A 404 page is a small problem, and I have a weakness for treating small problems as an excuse for enormous solutions. I like space. I like anything at a scale where the numbers stop meaning anything. A missing blog post felt like it deserved the most disproportionate response available, and the most disproportionate response available is a supermassive black hole.
I'd been admiring dgreenheck/webgpu-black-hole for a while and wanted something in that family. My first attempt faked it: a black circle, a squashed orange ellipse for the accretion disk, a blurry ring on top. It looked less like a black hole than like an eclipse drawn from memory. The problem is that everything recognizable in a real black hole image comes from gravity bending light, and you cannot fake bent light with ellipses. I know because I tried.
So now the shader does it properly. Every pixel fires a ray backwards through curved spacetime and marches it a couple hundred steps. Rays that cross the disk pick up glow: doppler-beamed (gas swinging toward you looks brighter, which is why one side burns white and the other smolders orange) and gravitationally redshifted. Rays that fall in go black. Rays that escape land on a starfield, and stars near the hole get smeared into little arcs. The Interstellar look is not art direction. That halo above and below the shadow is the far side of the disk, its light bent over the top. You put the math in and the movie comes out.
Is it excessive that a typo in my address bar now triggers millions of numerically integrated light paths per frame on your GPU? Yes. That's the appeal. It is the most computationally expensive way I know to say "no".
It does try to be polite about it: the render resolution is capped, it pauses in background tabs, and it holds a still frame if you have reduced motion turned on. The three.js chunk only loads on the 404 page itself, so you pay for the black hole only if you're lost. The blog section got a smaller framed version too, so even a dead post link gets an event horizon.
Go ahead, mistype something. /into-the-void is right there.
Comments