01 / MANIFESTO

Chrome should earn its pixels

Every interface element competes with your content for attention. The best navigation is the kind you never notice until you need it — present at the exact moment of intent, invisible the rest of the time.

That is the contract here: the bar watches where you are in the document, the menu steps aside while you read, and both cost less than a kilobyte of JavaScript.

02 / CRAFT

Transforms, not layout

The progress bar never touches its width property. It renders at full width once, then scaleX squeezes it on the compositor thread — sixty frames per second even on a mid-range phone, because the browser never recalculates layout.

The same discipline applies to the hide-and-reveal: a single translateY transition, driven by comparing this frame's scroll position against the last, throttled through requestAnimationFrame.

03 / MOTION

Direction is information

Scrolling down means reading; scrolling up means navigating. The interface listens to that grammar. Down past a small threshold and the chrome slides away with an ease-out curve; the first pixel of upward intent brings it back.

No timers, no hover zones, no hamburger detours — the gesture itself is the command.

04 / SHIPPING

Copy, paste, keep scrolling

Everything on this page is one self-contained file: the bar, the navbar logic, the blurred scrolled state, the long-form placeholder chapters you have been reading to test it.

Swap the links, keep the physics. Your documentation, blog and changelog pages will feel instantly more expensive.

The Library