Progress bars

.progress-bar / .scroll-fill fill an element from 0→100% (scaleX, anchored left) across a scroll range. They are scroll-driven extras: no spawn class needed on the element.

Demo - three ranges side by side

Scroll down slowly and compare: the early-start bar begins filling as soon as it peeks over the bottom edge, the default bar starts at the standard range, and the reversed one drains from full to empty. All three scrub with your scrollbar - scroll back up and they rewind.

.progress-bar - default range (top bottom → centre centre)

.progress-bar .progress-start-40 - starts filling while still low in the viewport

.scroll-fill .progress-reverse - full → empty

Tunables

progress-start-NRange begins when top hits (100−N)% of viewport

progress-end-NRange ends at (100−N)% instead of bottom-top

.progress-reverseRuns the fill backwards: full → empty

html

<div class="track">
  <div class="scroll-fill progress-reverse h-full bg-cyan-400"></div>
</div>

Both names are aliases of one entry; pick whichever reads better in your markup. The fill uses transform-origin: left center, so it never triggers layout - only compositing.