Scroll Progress — <mv-scroll-progress>

node scripts/add.mjs scroll-progress --out ./src/marvelous

<div id="mv-sp-demo">
  <style>
    #mv-sp-demo { display: flex; flex-wrap: wrap; gap: 1rem; width: min(100%, 50rem); margin-inline: auto; align-items: flex-start; }
    #mv-sp-demo .box { flex: 1 1 22rem; min-width: 0; }
    #mv-sp-demo aside { flex: 1 1 13rem; }
    #mv-sp-demo .box { height: 400px; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-xl); background: var(--mv-bg); }
    #mv-sp-demo .head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem .8rem 1.5rem; background: var(--mv-bg); border-bottom: 1px solid var(--mv-border); }
    #mv-sp-demo .head b { display: block; font-size: .9rem; }
    #mv-sp-demo .head > div:first-child { flex: 1; min-width: 0; }
    #mv-sp-demo .head span { font-size: .75rem; color: var(--mv-fg-muted); }
    #mv-sp-demo .head .mv-scroll-progress { position: absolute; top: auto; bottom: -1px; left: 0; right: 0; }
    #mv-sp-demo article { padding: 1.25rem 1.5rem 2rem; line-height: 1.65; font-size: .92rem; color: var(--mv-fg-muted); }
    #mv-sp-demo article h3 { margin: 1.5rem 0 .4rem; color: var(--mv-fg); font-size: 1.05rem; letter-spacing: -.01em; }
    #mv-sp-demo article p { margin: 0 0 .8rem; }
    #mv-sp-demo aside { display: grid; gap: .75rem; }
    #mv-sp-demo .card { padding: 1rem 1.1rem; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-lg); background: var(--mv-surface); }
    #mv-sp-demo .row { display: flex; align-items: center; gap: .9rem; }
    #mv-sp-demo small { display: block; color: var(--mv-fg-muted); font-size: .75rem; }
    #mv-sp-demo code { font: 500 .7rem var(--mv-font-mono); color: var(--mv-fg-subtle); }
  </style>

  <div class="box mv-scroll-area" id="mv-sp-article" data-orientation="vertical" tabindex="0" aria-label="Article: scroll-driven animations">
    <header class="head">
      <div>
        <b>Scroll-driven animations</b>
        <span>Guide · 6 min read</span>
      </div>
      <mv-scroll-progress variant="circle" style="--mv-scroll-progress-size:2.6rem"></mv-scroll-progress>
      <div class="mv-scroll-progress" data-scope="nearest"></div>
    </header>
    <article>
      <p>For years, animating an element in step with scrolling meant listening to the <em>scroll</em> event, reading positions and writing styles on every frame. The result was often janky, especially on mobile.</p>
      <h3>A native timeline</h3>
      <p>With <code>animation-timeline: scroll()</code>, the browser ties a CSS animation directly to the scroll position. No JavaScript needed: the animation moves forward as you scroll down and rewinds as you scroll back up.</p>
      <p>The bar at the top of this article is the simplest example: a single class, not one line of script.</p>
      <p>You win twice: the animation runs off the main thread when possible, and the code disappears. Less computation, fewer bugs, and smoothness that no longer depends on how busy the page is.</p>
      <h3>What about other browsers?</h3>
      <p>Where the feature is still missing, the component falls back to a passive listener, throttled to one update per frame. The result looks the same; only the mechanics change.</p>
      <h3>Any container</h3>
      <p>The ring in the header follows its nearest container; the ones next to it target this exact article through the <code>scroller</code> attribute, wherever they sit on the page. The percentage is computed in CSS with a counter.</p>
      <h3>Accessibility</h3>
      <p>The indicator is purely decorative: the native scrollbar remains the reference for assistive technologies. With reduced motion, smoothing is turned off and the value tracks the position exactly.</p>
      <p>Finally, remember to test your effects with the “reduce motion” setting turned on: content must stay complete and readable, with no information lost.</p>
      <p>Happy reading — you made it to the end.</p>
    </article>
  </div>

  <aside>
    <div class="card row">
      <mv-scroll-progress variant="circle" scroller="#mv-sp-article" smooth></mv-scroll-progress>
      <div><b style="font-size:.9rem">Elsewhere on the page</b><small>Follows the article via <code>scroller</code></small></div>
    </div>
    <div class="card">
      <small style="margin-bottom:.6rem">Smoothed bar (spring)</small>
      <mv-scroll-progress scroller="#mv-sp-article" smooth style="--mv-scroll-progress-size:6px;--mv-scroll-progress-track:var(--mv-bg-muted)"></mv-scroll-progress>
      <p style="margin:.7rem 0 0"><code>scroller="#mv-sp-article" smooth</code></p>
    </div>
  </aside>
</div>