
Falling Into a Black Hole
How the live, light-bending black hole behind our home page is built — real gravitational physics, ray-traced in your browser as you scroll.
The dark, glowing shape drifting behind our home page is a black hole — and it isn't a video. It's a simulation, drawn fresh every frame while you scroll, using the same physics that bends real starlight around real black holes. Your browser is quietly doing a small amount of Einstein's homework, about two million times per frame.
This is the story of how it's made, with as little math as we can get away with.
What you're actually looking at
Stare at it for a moment and you can pick out four distinct things.
The four ingredients of the picture.
- The shadow — the black disc in the middle. That's not the black hole itself (which is far smaller); it's the region where every direction you could look ends inside the hole. No light comes back out, so you see nothing.
- The photon ring — the thin, bright halo hugging the shadow. This is light that got so close it briefly orbited the black hole before escaping toward you.
- The accretion disk — the bright, banded ring of glowing gas. In reality this is matter spiralling in, heated by friction until it shines.
- The starfield — the background sky, which you'll notice looks warped near the hole, as if seen through a lens.
That warping is the key to everything else.
Why it looks so strange: gravity bends light
A black hole's gravity is strong enough to bend the path of light itself. Light still travels in "straight" lines — it's just that space near the hole is curved, so those straight lines curve along with it.
The dramatic consequence: you can see parts of the disk that should be hidden. The far side of the disk, the part behind the hole, has its light bent up and over the top, so it appears arched above the shadow like a halo. The underside of the disk gets lensed below. A flat ring of gas ends up looking like a glowing ribbon wrapped completely around a dark sphere.
Bent light lets you see the far side of the disk folded over the top.
This is called gravitational lensing, and it's real — it's how the first photograph of a black hole, in 2019, got its ring shape.
How the picture is actually made
Here's the clever inversion at the heart of it. Instead of trying to follow light from the disk to your eye, we run it backwards.
For every single pixel on your screen, the program shoots an imaginary ray outward from the camera and asks: if light arrived here, where did it come from? It then steps that ray forward through the curved space around the hole, nudging its direction a little at each step to account for gravity's pull — exactly the way the real light path would bend. The ray keeps going until one of three things happens:
- It crosses the glowing disk → that pixel gets the disk's color and brightness.
- It falls past the edge into the shadow → that pixel goes black.
- It escapes to the distant sky → that pixel shows a (lensed) star.
Do that for two-million-ish pixels, sixty times a second, and you get a moving image of a black hole. All of it runs as a tiny program called a shader on your graphics card, which is built to do exactly this kind of "same calculation, every pixel, all at once" work.
Why one side is brighter than the other
Look again and you'll see the disk isn't evenly lit — one side blazes, the other is dimmer. That's not a stylistic choice; it's physics, and we simulate it on purpose.
The gas in the disk orbits at a sizable fraction of the speed of light. The side sweeping toward you gets beamed brighter and shifted slightly bluer; the side moving away is dimmer and redder. (It's the light-speed cousin of why a passing siren drops in pitch.) On top of that, light climbing out of the hole's gravity loses energy on the way, which reddens and dims it near the edge. The simulation folds all of these in, which is what makes the disk read as a real, fast-spinning object rather than a flat decal.
The journey as you scroll
The backdrop isn't a fixed view — it's a flight. As you scroll down the page, the camera falls inward along a carefully choreographed path, modeled on NASA's 2024 visualization of what a plunge toward a black hole would actually look like.
Scrolling drives the camera from a distant approach to the final plunge.
You begin far away, with the whole disk in view. As you scroll, the camera swings around and drops toward the disk's edge, where the lensing is most dramatic and the photon ring is brightest. Near the very bottom, it crosses the point of no return — the event horizon — and the whole frame floods red and fades, the simulation's nod to the extreme redshift you'd experience on the way in.
Because the camera is tied to scroll position rather than a clock, the same spot on the page always shows the same moment of the fall. Scroll back up and you climb back out.
Making it run on anything
A live black hole is demanding to draw, and not every visitor has a gaming GPU. So the simulation watches its own frame rate, several times a second, and adjusts itself to stay smooth:
- On a capable machine it renders at full resolution and quality.
- If frames start to lag, it dials quality back in two stages — first the internal resolution, then how finely each ray is traced through the curved space — and eases back up the moment there's headroom again. It's steering toward a smooth frame rather than a fixed setting, so it stays smooth wherever you are on the page, even in the busiest part of the fall.
- Even a modest device keeps the live simulation; it just runs a little coarser. There's no video understudy waiting in the wings — the real thing scales down instead of handing off.
- If you've told your system you prefer reduced motion, it holds a still frame instead of animating — present, but calm.
There's one more trick, and it's the reason this rewrite exists. Browsers are allowed to throw away a page's graphics work when you switch to another tab — and some, like Edge, do it eagerly to save power. Come back, and the canvas can be blank. The simulation notices the instant its graphics context is pulled out from under it and quietly rebuilds the scene, live, right where you left off in the fall. Only as a genuine last resort — a graphics driver crashing over and over — does it settle for a simple static backdrop.
The goal is that everyone gets something beautiful, the live thing stays live, and nobody gets a frozen page.
Standing on NASA's shoulders
None of the underlying physics is ours — and that's the point. The look is tuned to match a 2024 black-hole "plunge" visualization by Jeremy Schnittman at NASA's Goddard Space Flight Center, whose work makes this exotic physics public and reproducible. The ray-bending technique mirrors well-known open-source black-hole shaders shared by the graphics community. We've recreated and re-tuned the physics for the web; the science it draws on is freely available to everyone.
The ingredients
| Layer | What we use |
|---|---|
| 3D engine | Three.js, via React Three Fiber |
| The actual drawing | A WebGL / GLSL shader, run per-pixel on the GPU |
| Physics | Bent light paths around a (non-spinning) black hole, glowing-disk emission, Doppler & gravitational shifts |
| Motion | Scroll position drives a NASA-modeled camera fall |
| Resilience | Frame-rate-driven quality scaling (resolution + ray steps) and live recovery when the browser drops the GPU context |
| Site | Next.js |
So the next time you land on the home page, know that the quiet thing glowing behind the words is doing real general relativity — just gently enough that you can keep reading.