Components

Navbar

A glass capsule that floats over everything and measures what is behind it.

The decision

The problem

At a 60% tint, the navbar's text could vanish over a bright photo or a dark video frame.

What I chose

The navbar samples what is behind it and changes its tint when contrast breaks, and only then.

Ruled out

A solid bar, which loses the glass, and a fixed dark tint, heavy on every light page.

What it cost

Sampling is capped at one read every 120 milliseconds, and a change has to hold for 450 before the capsule follows it, so it never flickers.

How it measures

  1. It reads what is under the capsule: the colour of the element there, or the pixels of the photo or video, drawn small into a 24 by 24 grid. Enough to be right, cheap enough to repeat.
  2. It samples three points across the capsule, at 12%, 50% and 88% of its width.
  3. It turns each sample into luminance, weighted the way the eye weighs red, green and blue (the Rec. 709 standard).
  4. It keeps the theme's own style while the backdrop pulls the glass less than 0.25 away from the theme's tint. Past that, the capsule turns dark or light and its text goes to full contrast.
  5. The new state has to hold for 450 milliseconds before the capsule changes, so passing over a thin stripe doesn't make it blink.

Watch it decide

The same algorithm as the navbar, on a photo that slides under a copy of the capsule. Move the photo and watch the three samples, the drift from the theme's tint, and the 450 milliseconds a change has to hold before the capsule follows. Switch theme and the same photo can give another answer: the drift is measured from the theme's own tint. The cost is timed in your browser, every time it reads.

Photo
What it sees
Samples Backdrop Glass Drift Capsule Cost

One template

The navbar and the footer live in one place and are injected into every page, so a change reaches all of them at once. The current page is in blue, and a hairline along the top edge of the screen shows how far you have read.

Phones and tablets

On a phone the links fold into a glass card that matches the capsule, and the bar hides while you scroll down. Touch tablets get the card too; an iPad in landscape gets the links back. The theme toggle keeps a steady 40px target.