Curtain

Two panels slide apart as you scroll through a pinned stretch.

Use it for: Chapter breaks, big reveals, section transitions.
Knobs: outer height = scroll length; panel content/colors are yours

revealed

scroll

vars

<div data-sv data-sv-pin class="relative h-[250vh]">
  <div class="sticky top-0 h-screen overflow-hidden">
    <div class="grid h-full place-items-center">revealed content</div>
    <div class="sv-curtain-l absolute inset-y-0 left-0 w-1/2 bg-zinc-900"></div>
    <div class="sv-curtain-r absolute inset-y-0 right-0 w-1/2 bg-zinc-900"></div>
  </div>
</div>

<div data-sv data-sv-pin class="outer">   <!-- height: 250vh -->
  <div class="sticky">                        <!-- sticky; top:0; h:100vh; overflow:hidden -->
    <div class="revealed-content">…</div>
    <div class="panel-left sv-curtain-l">…</div>
    <div class="panel-right sv-curtain-r">…</div>
  </div>
</div>

/* the preset (styles/pin.css): */
.sv .sv-curtain-l { translate: calc(var(--sv-pin, 0) * -101%) 0; }
.sv .sv-curtain-r { translate: calc(var(--sv-pin, 0) * 101%) 0; }

<Track pin className="relative h-[250vh]">
  <div className="sticky top-0 h-screen overflow-hidden">
    <Revealed />
    <div className="sv-curtain-l …" />
    <div className="sv-curtain-r …" />
  </div>
</Track>

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