Heading Underline Read Progress — Native CSS view-timeline

<article class="hup-article">
  <header class="hup-header"><h1>Read to Fill the Line</h1><p>Scroll down. The underline beneath each heading below fills left-to-right as you scroll past that heading's own paragraph, driven by a native CSS <code>view-timeline</code> attached to the paragraph itself — no scroll listener involved.</p></header>

  <section class="hup-section">
    <h2 class="hup-heading">The Problem With Manual Trust</h2>
    <div class="hup-underline"></div>
    <p class="hup-source">Every workflow that depends on a human remembering to double-check something eventually fails, not because people are careless but because attention is a finite resource that gets spent elsewhere under deadline pressure. Systems that rely on vigilance alone are systems that are quietly waiting to fail at the worst possible time, and the fix is never "try harder" — it is removing the step where a human has to remember at all.</p>
  </section>

  <section class="hup-section">
    <h2 class="hup-heading">Designing for the Absent-Minded Case</h2>
    <div class="hup-underline"></div>
    <p class="hup-source">The strongest interfaces assume the user is distracted, in a hurry, and on a phone with one bar of signal. Defaults should be safe, destructive actions should require confirmation proportional to their cost, and state that matters should be visible without requiring a click to reveal it. Design for the tired eleven-p.m. version of your user, not the attentive one reading the documentation.</p>
  </section>

  <section class="hup-section">
    <h2 class="hup-heading">Why Progress Should Be Legible</h2>
    <div class="hup-underline"></div>
    <p class="hup-source">A reader who cannot tell how much of a page remains will either abandon early out of uncertainty or skim past details assuming there is more time than there is. A visible sense of progress — a bar, a counter, or in this case a filling underline tied to how much of a specific passage has been read — keeps the reader oriented without requiring them to scroll back and check.</p>
  </section>
</article>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0d0e13;color:#eef0f6}

.hup-article{max-width:600px;margin:0 auto;padding:10vh 24px 30vh}
.hup-header{margin-bottom:12vh}
.hup-header h1{font-size:clamp(28px,5.5vw,44px);letter-spacing:-.02em;margin-bottom:14px}
.hup-header p{color:#9aa1b8;font-size:16px;line-height:1.75}
code{background:rgba(129,140,248,.16);color:#c7d2fe;padding:2px 6px;border-radius:5px;font-size:.9em;font-family:ui-monospace,Consolas,monospace}

.hup-section{margin-bottom:16vh}
.hup-heading{font-size:24px;letter-spacing:-.01em;display:inline-block;margin-bottom:2px}

/* The underline's fill is bound to a view-timeline whose SOURCE is the
   paragraph below it, not the underline bar itself -- so the fill tracks
   how far the reader has scrolled through that specific passage of text. */
.hup-source{
  view-timeline-name:--para-read;
  view-timeline-axis:block;
}

.hup-underline{
  height:3px;width:100%;max-width:340px;background:#1c2230;border-radius:2px;margin-bottom:20px;position:relative;overflow:hidden;
}
.hup-underline::after{
  content:"";position:absolute;inset:0;width:100%;background:#818cf8;border-radius:2px;
  transform:scaleX(0);transform-origin:left;

  animation:hup-fill linear both;
  animation-timeline:--para-read;
  animation-range:cover 0% cover 85%;
}
@keyframes hup-fill{ to{ transform:scaleX(1) } }
.hup-section p{color:#b7bdd0;font-size:16px;line-height:1.85}

@supports not (animation-timeline: view()){
  .hup-underline::after{transform:scaleX(1);animation:none}
}

// Every underline's fill above is driven by CSS animation-timeline: view()
// referencing --para-read, a view-timeline-name declared on the PARAGRAPH
// element rather than on the underline bar itself -- so the fill tracks
// that specific paragraph's own transit through the viewport as the
// reader scrolls past it. No JS observes scroll or intersection at all;
// this script only reports feature support for the demo readout.
const supportsView = typeof CSS !== 'undefined' && CSS.supports('animation-timeline: view()');
console.log('[underline-progress] native view() timeline supported:', supportsView);
if (!supportsView) {
  document.querySelectorAll('.hup-underline').forEach(u => { u.title = 'Fallback: underline shown fully filled.'; });
}