--scrollvars

// React — automatic stagger: no classes on children
import { Reveal } from 'scrollvars/react'

<Reveal as="section" auto>
  <h2>Title</h2>
  <p>Copy</p>
  <div>CTA</div>   {/* sv-skip opts a child out */}
</Reveal>

/* ready-made preset */
<div className="sv-drift" style={{ '--sv-distance': '13rem' }}>…</div>

/* or custom CSS — the public API is the variables */
.my-parallax {
  translate: 0 calc(var(--sv-view) * -120px);
  opacity: calc(1 - max(var(--sv-view), -1 * var(--sv-view)));
}

/* markup: a normal section; register feeds the lerp target:
   track(section, { onTravel: (t) => { target = t } }) */

/* different speed = perceived depth */
.column { translate: 0 calc((0.5 - var(--sv-t)) * var(--speed)); }
.column:nth-child(1) { --speed: 24vh;  }
.column:nth-child(2) { --speed: -34vh;  }  /* against the flow */

// inertia: exponential smoothing — silky in motion, and the stop
// decelerates asymptotically (natural ease-out). One lerp per column:
current += (target - current) * factor   // 0.07…0.16 per frame
col.style.setProperty('--tl', current)

/* markup: a normal section tracked with { once: true } —
   sv-live latches and every item plays its own entrance */

/* each item declares its own entrance */
<div class="collage-item" style="--ex:-60vw; --er:-180deg;
     --curve:cubic-bezier(0.34,1.56,0.64,1)">  /* bounces */

.collage-item { translate: var(--ex) var(--ey); rotate: var(--er); opacity: 0; }
.sv-live .collage-item { translate: 0 0; rotate: 0deg; opacity: 1; }

/* 1 · CSS 3D (this demo) — cheap, runs on any phone */
.card3d { transform: rotateY(calc(var(--sv-t) * 240deg)); }

// 2 · Scrubbed video (pre-rendered 3D scene,
//     the scroll only drives the clock)
useTrack({ onTravel: (t) => {
  video.currentTime = t * video.duration
}})

// 3 · Real-time WebGL (React Three Fiber) — when the client
//     needs INTERACTION: rotate, recolor, day/night
useTrack({ scenes: 4, onScene: (i) => camera.lookAt(points[i]) })

/* the pointer becomes two variables; CSS does the rest */
.card {
  transform: perspective(900px) rotateY(calc(var(--mx) * 14deg))
             rotateX(calc(var(--my) * -14deg));
}
.card::after {  /* glare mirrors the pointer */
  background: radial-gradient(circle at
    calc(50% + var(--mx) * 38%) calc(50% + var(--my) * 38%),
    rgba(255,255,255,.14), transparent 42%);
}

import { mountEffect } from 'scrollvars/canvas'  // or useCanvasEffect in React

mountEffect(canvas, {
  setup:  (fx) => { /* build your particles */ },
  frame:  (fx, dt) => { /* one step; dt in seconds, ctx pre-scaled to CSS px */ },
})
// resize + DPR cap · pauses offscreen & on hidden tab · fx.reducedMotion live
// scroll input crosses over by closure, the modules stay decoupled:
track(section, { onTravel: (t) => { amplitude = t } })

// pointer physics stay in userland; the harness just gives the loop
mountEffect(canvas, {
  frame: (fx, dt) => {
    blob.ox += ((push.x - blob.ox)) * 0.06   // spring toward (or back from) the pointer
    fx.ctx.globalCompositeOperation = 'screen'
    // radial gradient per blob — soft edges do the "organic" work
  },
})

.carousel { overflow-x: auto; scroll-snap-type: x proximity; }  /* or x mandatory */
.carousel > * { scroll-snap-align: center; }
.carousel.slideshow > * { scroll-snap-stop: always; }  /* one card per gesture */

/* markup — the whole carousel:
   <div class="sv-slider" id="el"> <div>…slide…</div> ×N </div>
   import { slider } from 'scrollvars'   (styles.css ships the base CSS) */

const s = slider(el, { duration: 1400, onSlide: (i) => dots.select(i) })  // or useSlider() in React
s.next(); s.prev(); s.goTo(3)

/* the coverflow — every slide reads its own --sd */
.slide {
  scale: calc(1 - abs(var(--sd)) * 0.13);
  transform: perspective(900px) rotateY(calc(var(--sd) * -18deg));
}

/* markup: same .sv-slider container, tall padding creates the
   pick-line; a fixed overlay draws the detent lines */

slider(el, { axis: 'y', onSlide: (i) => pick(OPTIONS[i]) })

.wheel > * {
  transform: rotateX(calc(var(--sd) * -34deg)) translateZ(10px);
  opacity: calc(1 - abs(var(--sd)) * 0.38);
}

/* the clock: one registered property in transition — that's the engine */
@property --sv-act { syntax: '<number>'; initial-value: 0; inherits: true; }
.sv-acts { --sv-act: 0; transition: --sv-act 2.4s linear; }
.sv-acts.sv-open { --sv-act: 3; }

/* acts = slices; sub-slices stagger inside an act (the chips) */
--a2: clamp(0, calc(var(--sv-act) - 1), 1);
.chip { --chip: clamp(0, calc(var(--a2) * 3 - var(--i)), 1); }

/* the same sequence in GSAP, the market reference: */
//   gsap.timeline().to('.title',{…}).to('.chip',{stagger:.2},'-=.2').to('.line',{…})
//   → identical result, plus a 28 KB core on the page.
// Where GSAP legitimately goes further — and sv-acts stops:
//   branching mid-timeline · per-act JS callbacks · spring physics ·
//   exotic eases on the clock itself · nested master timelines.
//   Linear sequence? You don't need the engine.

on arrival · plays once live

scrubbed · follows the scroll

/* cards sit in their real flex row; the deck is just a translate */
.sv-spread > * {
  --sv-d: calc(var(--sv-order) - var(--sv-mid, 1));  /* slots from center */
  translate: calc(var(--sv-d) * (var(--sv-spread, 0) - 1) * (100% + 16px)) 0;
  rotate: calc(var(--sv-d) * (1 - var(--sv-spread, 0)) * -5deg);
}

/* clock 1 — on arrival: sv-live flips the var, transitions deal the cards */
.sv-live .sv-spread-in > * { --sv-spread: 1; }

/* clock 2 — scrubbed: map it from the driver (spread done by mid-viewport) */
.spread-scrub > * { --sv-spread: clamp(0, calc(var(--sv-t) * 2), 1); }

# install
npm i scrollvars

// app/layout.tsx — one client component, the whole wiring
import { ScrollVarsBoot } from 'scrollvars/react'
import 'scrollvars/styles/core.css'   // or styles.css for everything

<body><ScrollVarsBoot />{children}</body>

// any page — plain Server Components, Tailwind as usual
<section data-sv data-sv-once className="py-24">
  <h2 className="sv-rise text-4xl">Title</h2>
  <p className="sv-rise" style={{ '--sv-order': 1 }}>Copy</p>
</section>

// responsive knobs ARE Tailwind arbitrary properties:
<Slider className="[--sv-per-view:1.2] md:[--sv-per-view:2.5] xl:[--sv-per-view:4]" arrows dots>
  {cards.map(c => <Slide key={c.id}><Card {...c} /></Slide>)}
</Slider>

Machine-readable docs for AI assistants: /llms.txt — the full API, recipes and performance rules, ready to ingest.

Weight on the wire (min / gzip)

CPU cost for the same frames (identical 12s run, 900 scrubbed elements — all three deliver 60 fps; this is what those frames cost)

Lighthouse mobile (the PageSpeed profile: Moto G, 4× CPU, slow 4G)

The honest summary: in frame delivery all engines tie — every competent one animates only the viewport. What separates them is what the frames cost (CPU, memory, battery) and what the engine costs to load — which is exactly what PageSpeed punishes. Run the benchmark yourself →

// vanilla — no React at all
import { track } from 'scrollvars'

const untrack = track(el, {
  scenes: 4,
  onScene: (i) => console.log('scene', i),
})