<div class="bar" id="bar"></div>
<nav class="rail" id="rail">
<button class="dot" data-target="c1"><span class="ring"></span><span class="lbl">I — Attention</span></button>
<button class="dot" data-target="c2"><span class="ring"></span><span class="lbl">II — Friction</span></button>
<button class="dot" data-target="c3"><span class="ring"></span><span class="lbl">III — Depth</span></button>
<button class="dot" data-target="c4"><span class="ring"></span><span class="lbl">IV — Rhythm</span></button>
<button class="dot" data-target="c5"><span class="ring"></span><span class="lbl">V — Closure</span></button>
</nav>
<div class="orb">
<svg width="62" height="62" viewBox="0 0 62 62">
<circle class="track" cx="31" cy="31" r="26"/>
<circle class="prog" id="orbProg" cx="31" cy="31" r="26"/>
</svg>
<div class="pct" id="orbPct">0%</div>
</div>
<article>
<div class="eyebrow">Essay · Reading Experience</div>
<h1>The Quiet Architecture of Long-Form Attention</h1>
<p class="standfirst">Three progress signals — a bar, a rail, an orb — each answering a different question the reader never asks aloud.</p>
<section class="chapter" id="c1">
<h2>I — Attention</h2>
<p>Reading on a screen is an act of sustained negotiation. The text wants forward motion; the eye wants reassurance. A good interface offers both without demanding either, and the simplest gift it can give is a sense of place.</p>
<p>The top bar is the most literal of these signals. It maps the scroll to a single horizontal line, and that line says only one thing: this much remains.</p>
<div class="pull">A progress bar is a promise the page makes — small, honest, and easy to keep.</div>
</section>
<section class="chapter" id="c2">
<h2>II — Friction</h2>
<p>Friction is not the enemy of reading. The right kind of friction — a heading, a pause, a turn of phrase — slows the eye on purpose, and a chapter rail formalises those pauses into navigable anchors.</p>
<p>Click a dot and the page travels. Scroll naturally and the active dot keeps pace. The reader is never told where they are; they simply notice.</p>
</section>
<section class="chapter" id="c3">
<h2>III — Depth</h2>
<p>Depth is the feeling that a piece has more underneath it than the surface admits. Typography carries most of that weight — the drop cap, the measured line length, the italic standfirst that sets a tone before the argument begins.</p>
<p>None of it is decoration. Each choice is a quiet instruction about how fast to move and how much to trust.</p>
<div class="pull">The page that respects its reader rarely raises its voice.</div>
</section>
<section class="chapter" id="c4">
<h2>IV — Rhythm</h2>
<p>Rhythm is the cadence of revelation. Paragraphs of even weight lull; paragraphs that vary — short, long, short — keep the eye awake. The orb in the corner tracks this rhythm as a percentage, a number that climbs while the reader forgets it exists.</p>
<p>That forgetting is the point. The best progress indicator is the one you only consult when you wonder, not the one that nags.</p>
</section>
<section class="chapter" id="c5">
<h2>V — Closure</h2>
<p>Closure is the reward. The bar reaches full width, the final dot lights, the orb completes its circle — three small confirmations that the journey had a shape and the shape has ended.</p>
<p>Long-form reading survives not because screens improved but because a few quiet signals learned to respect the time a reader gives.</p>
</section>
</article>