Horizontal rail

Vertical scroll travels a horizontal track through a pinned stage.

Use it for: Process steps, timelines, galleries that read left-to-right.
Knobs: outer height = scroll length; works at any viewport width (min() keeps it moving)

<div data-sv data-sv-pin class="relative h-[300vh]">
  <div class="sticky top-0 flex h-screen items-center overflow-hidden">
    <div class="sv-rail flex gap-4 px-[10vw]">
      {cards.map(c => <Card key={c.id} class="w-80 shrink-0" />)}
    </div>
  </div>
</div>

<div data-sv data-sv-pin class="outer">   <!-- height: 300vh -->
  <div class="sticky">                        <!-- sticky stage, flex center -->
    <div class="sv-rail">…cards…</div>
  </div>
</div>

/* the preset (styles/pin.css): */
.sv .sv-rail { width: max-content;
  translate: calc((1 - var(--sv-pin, 0)) * 100vw + var(--sv-pin, 0) * min(100vw - 100%, 0px)) 0; }

<Track pin className="relative h-[300vh]">
  <div className="sticky top-0 flex h-screen items-center overflow-hidden">
    <div className="sv-rail flex gap-4 px-[10vw]">{cards}</div>
  </div>
</Track>

Engine: npm i scrollvars — full core 3.9 KB gzip. All effects respect prefers-reduced-motion and render complete without JS.