How the two-slit header works

The strip of dots at the top of my homepage is a two-slit experiment. It isn’t a looping video. Every dot is an electron hit, sampled live in your browser.

The physics

Send electrons through two narrow slits one at a time and record where each one lands. A single hit looks random. After a few thousand, the hits stack into bands: interference fringes. Each electron behaves like a wave that went through both slits.

In the far-field approximation, the probability of landing at position x on the screen is

I(x) = sinc²(αx) · cos²(βx)

The cos² term comes from the two slits interfering. The sinc² envelope comes from the width of each slit. α sets how wide the envelope is, and β sets how close together the fringes sit.

Try it below. The sliders change the slit width, the distance between the slits and the electrons’ wavelength. The line is I(x), the dots are electrons drawn from it one at a time, and the switch puts a detector on the slits.

Watching the slits

Now put a detector on the slits, so you know which one each electron went through. The cos² term disappears and you get only the envelope, one broad bump. Knowing the path destroys the interference.

On the site, hovering the strip turns the detector on. New hits are sampled from the envelope, the old fringes fade, and the bands wash out. Move away and they come back. Moving the cursor across the page changes the electrons’ wavelength: shorter waves pull the fringes closer together.

Sampling

To draw hits from I(x), I use rejection sampling. Pick a random x in [−1, 1] and a random u in [0, 1). If u < I(x), keep x. Otherwise, try again. I(x) peaks at 1, so this always works, and it’s cheap enough to run about 160 times a second.

const pdf = (x, watching) => {
  const s = ALPHA * x;
  const envelope = s === 0 ? 1 : (Math.sin(s) / s) ** 2;
  return watching ? envelope : envelope * Math.cos(BETA * x) ** 2;
};

Each hit gets a random y and a timestamp. Hits fade out over twelve seconds, so the pattern keeps rebuilding instead of filling up. New hits flash in the accent color for a moment, so you can watch single electrons arrive.

Keeping it cheap

The canvas redraws up to 60 times a second, and only while it’s on screen and the tab is visible. The page starts with about 1,900 hits already placed, so the fringes are there from the first frame.