The quiet interface: designing for attention, not dopamine

Most reading chrome shouts. Bars race across the top, docks claim the thumb zone, pills float like notifications. The reader never forgets they are being measured.

A quieter pattern treats progress as place. You always know where you are in the essay, but the chrome stays at the edge — a spine, not a banner.

Map each section to a tick on a tall rail along the inline end. As the reading line moves, ticks fill and the active chapter label updates. No competing sticky header.

Because the rail is logical (`end`), it mirrors correctly in RTL without rewriting layout math. The article column stays centered and calm.

Show remaining minutes only when it helps — mid-read, not at the first pixel. Round gently so the number does not jitter every scroll frame.

When the reader reaches the end, swap the HUD for a finished state. Completion should feel like closing a book, not clearing a quest.

If the chrome is quiet, the type has to carry the experience. Generous leading, a clear dek, and section titles that earn their weight.

Pull quotes and short paragraphs give the spine room to breathe. Short demos make every tick fire at once — long copy is part of the interaction design.

Throttle scroll updates with requestAnimationFrame. Prefer a reading-line spy over noisy IntersectionObserver thresholds on short blocks.

Expose a real progressbar for assistive tech, keep focus rings on chapter ticks, and never trap scroll inside the demo unless the product truly uses a nested scroller.