I ray-marched a black hole for my landing page. It goes dark on Nov 25 unless 200 people come back

Lessicon — Tue, 10 Nov 2026 17:54:32 +0000

I'm a student, and I'm building Lessicon: you throw your lesson notes (or a photo of them, or just a topic) into a black hole, and a whole study website comes out. Explanations, a quiz, a concept map, cards with spaced repetition, progress.

The black hole isn't a video. It's a fragment shader running live in your browser, and this post is how it works. At the end there's the slightly unhinged part: a public deadline.

One triangle, one ray per pixel

The whole thing is a single fullscreen triangle in three.js with a ShaderMaterial. Three vertices, (-1,-1), (3,-1), (-1,3), cover the screen, so the fragment shader runs once per pixel and does everything: it shoots a ray from the camera and marches it toward the hole.

Bending light without general relativity

A full geodesic integrator is overkill for a landing page. The well-known shortcut (you'll find it in a lot of real-time black holes) is to march the ray in flat 3D space and add one extra acceleration that pulls it toward the mass:

vec3 p = ro, v = rd;
vec3 cc = cross(p, v);
float h2 = dot(cc, cc);            // the ray's angular momentum, squared: constant, so compute once

for (int i = 0; i < STEPS; i++) {
  float r2 = dot(p, p);
  if (r2 < 1.) { captured = 1.; break; }                  // inside the horizon: this pixel is shadow
  float r = sqrt(r2), dt = clamp(.12 * (r - .7), .04, 2.2);
  v += -1.5 * h2 * p / (r2 * r2 * r) * dt;                // the bend
  vec3 np = p + v * dt;
  // ...check for a disk crossing between p and np...
  p = np;
}

Two things make this cheap:

h2 is computed once. Because the pull is central, |p × v| doesn't change along the ray.
The step size grows with distance. dt = clamp(0.12 * (r - 0.7), 0.04, 2.2): tiny steps near the horizon where the curve is tight, big strides far away. That's what lets it run in 60 to 120 steps.

It isn't an exact relativistic render, but it gets the things your eye checks right: the back of the disk shows up above and below the hole, and the stars bend around the shadow.

The disk

Each step checks whether the ray crossed the disk's plane (p.y and np.y have opposite signs), interpolates the exact crossing point, and samples the disk if the radius is between 3 and 11.5. Samples are composited front to back with a transmittance T, so one ray can pass through the thin disk in front and hit it again behind the hole. That's the arc over the top.

Three tricks make it look alive:

Keplerian spin. Angular speed goes as r^-1.5, so inner rings move faster. If you just rotate noise by w * t forever, it shears into thin rings within seconds. So there are two noise phases, each sheared for a limited time, cross-faded against each other (the same idea as a flow map).
Doppler beaming. The side moving toward you is brighter: dp = 1 + 0.55 * dot(velocity, toCamera), and the intensity is multiplied by dp * dp.
Tone mapping. col = 1 - exp(-1.25 * col) keeps the hot inner edge from clipping to flat white.

Making phones survive it

This is the part that took longest.

Steps by quality tier: 120, 110, 84 or 60.
Fewer pixels: the canvas renders below one pixel per CSS pixel. The glow hides it.
Render on demand: the frame loop caps at 60 fps, drops to 30 when nothing's moving, and stops while the tab is hidden.
A governor: if frames run long, it steps the quality tier down, at most twice.
The little site cards orbiting the hole are DOM, not WebGL. Drawn into the sub-pixel canvas they came out blurry, so they're HTML elements placed each frame from the same orbit math.

If you want to read or fork the shader, there's a standalone ~9 KB version with no libraries on CodePen.

What comes out of the hole

The model only writes words: topics, questions, page copy and a diagram spec. The page itself is built in code from 15 layout families with a per-site seed, so no two sites look the same, and the cards and questions are fact-checked against your notes before the checked page replaces the draft. Generated pages are served sandboxed under a strict Content-Security-Policy, because they're model output built from user input.

The deadline

I've promised 200 returning users by November 25. "Returning" means someone who made a study site and came back to make another one, not a sign-up. As of Nov 10 it's 2, out of 20 people who've made a site. The live count is at lessicon.com/200.

Edit: I first wrote 3 (of 21). One of those was my own account, so it's 2.

If it doesn't get there, the black hole page goes dark for 24 hours.

It's free to start (your first site is free, Pro is $5/month): lessicon.com. Questions about the shader are very welcome, and if it stutters on your phone, tell me which phone.

This post was written by an AI agent that works for me (Aboud), from my code and the real numbers.