# ScrollVars fx, llms.txt (copy-paste effects)

> A growing library of scroll/pointer/state effects on the ScrollVars engine
> (npm i scrollvars, 12.9 KB gzip as ESM; the fx/sv.js IIFE on these pages is 13.1 KB). Each effect below includes when to
> use it and its knobs. Effects include Tailwind/CSS/React recipes; Sections
> expose the complete CLI source (CSS included). Engine API: see
> https://scrollvars.dev/llms.txt

## Staggered reveal (staggered-reveal)

Children rise in sequence when the section enters the viewport.
Category: Reveals
Use for: Heroes, editorial sections, any "content arrives" moment.
Knobs: --sv-distance (travel), --sv-stagger (delay step), --sv-duration, --sv-ease
Install: npx scrollvars add staggered-reveal
Styles: scrollvars/styles/core.css

### Tailwind
```html
<section data-sv data-sv-once class="py-24">
  <h2 class="sv-rise text-4xl font-bold">Title</h2>
  <p class="sv-rise" data-sv-order="1">Copy</p>
  <p class="sv-rise" data-sv-order="2" data-sv-distance="3rem">More</p>
</section>
<!-- once: import 'scrollvars/styles/core.css' + <ScrollVarsBoot /> in the layout -->
<!-- data-sv-order/-distance/-from/-to become the CSS vars on mount. No
     style attr, works with mapped CMS content, adds zero global CSS.
     Also fine: [--sv-order:1] arbitrary classes for static one-offs;
     sv-stagger on the parent for sequential lists (no attrs at all). -->
```

### CSS
```html
<section data-sv>            <!-- tracked; sets --sv-live in the band -->
  <h2 class="sv-rise">Title</h2>
  <p class="sv-rise" style="--sv-order: 1">Copy</p>
</section>

/* needs styles/core.css (or paste the preset): */
.sv, [data-sv] { --sv-live: 0; }
.sv.sv-live { --sv-live: 1; }
.sv-on .sv .sv-rise { opacity: var(--sv-live);
  translate: 0 calc((1 - var(--sv-live)) * var(--sv-distance, 6rem));
  transition: opacity .8s var(--sv-ease, cubic-bezier(0.28, 0.84, 0.42, 1)),
              translate .8s var(--sv-ease, cubic-bezier(0.28, 0.84, 0.42, 1));
  transition-delay: calc(var(--sv-order, 0) * var(--sv-stagger, 90ms)); }

/* the same sheet's reduced-motion override, and it has to sit AFTER the rule
   it beats: equal specificity, later wins */
@media (prefers-reduced-motion: reduce) {
  .sv-on :is(.sv, [data-sv]) :is(.sv-rise, .sv-fade, .sv-slide-l, .sv-slide-r, .sv-drift) {
    transition: none; animation: none; opacity: 1; translate: none; }
}
/* the same under html[data-sv-motion="reduce"], the site's own switch */
.sv-on:where([data-sv-motion="reduce"]) :is(.sv, [data-sv]) :is(.sv-rise, .sv-fade, .sv-slide-l, .sv-slide-r, .sv-drift) { transition: none; animation: none; opacity: 1; translate: none; }

/* a focused entrance child must be visible now, not after its stagger
   delay (WCAG 2.4.7): must sit AFTER the reduce blocks above, same
   source-order rule */
.sv-on .sv .sv-rise:focus-within { transition: none; opacity: 1; translate: none; }
```

### React
```tsx
<Reveal auto>            {/* every direct child, stagger for free */}
  <h2>Title</h2>
  <p>Copy</p>
</Reveal>

// or per-child knobs as props:
<Reveal stagger={140}>
  <Item order={0}>first</Item>
  <Item order={1} effect="slide-l" distance="4rem">second</Item>
</Reveal>
```

## Deck spread (deck-spread)

A centered card deck deals itself into the grid. On arrival or scrubbed.
Category: Reveals
Use for: Feature cards, pricing tiers, portfolio grids that deserve an entrance.
Knobs: --sv-mid = (N−1)/2, --sv-order per card, --sv-gap; map --sv-spread yourself to scrub
Install: npx scrollvars add deck-spread
Styles: scrollvars/styles/core.css, scrollvars/styles/pin.css

### Tailwind
```html
<section data-sv class="py-24">
  <div class="sv-spread sv-spread-in [--sv-gap:14px]">
    <div class="[--sv-order:0] rounded-xl border p-8">01</div>
    <div class="[--sv-order:1] rounded-xl border p-8">02</div>
    <div class="[--sv-order:2] rounded-xl border p-8">03</div>
  </div>
</section>
```

### CSS
```html
<section data-sv>
  <div class="sv-spread sv-spread-in">
    <div style="--sv-order: 0">…</div>
    <div style="--sv-order: 1">…</div>
    <div style="--sv-order: 2">…</div>
  </div>
</section>

/* styles/core.css ships it; the math, if you want it inline: */
.sv-spread { display: flex; gap: var(--sv-gap, 16px); justify-content: center; }
.sv-spread > * { --sv-d: calc(var(--sv-order, 0) - var(--sv-mid, 1));
  translate: calc(var(--sv-d) * (var(--sv-spread, 0) - 1) * (100% + var(--sv-gap, 16px))) 0;
  rotate: calc(var(--sv-d) * (1 - var(--sv-spread, 0)) * -5deg); }

/* scrub instead of play: */
.mine > * { --sv-spread: clamp(0, calc(var(--sv-t) * 2), 1); }

/* the same sheet's reduced-motion override, last so it wins on source order: */
@media (prefers-reduced-motion: reduce) {
  .sv-spread > *,
  .sv-on .sv .sv-spread.sv-spread-in > * {
    translate: none; rotate: none; transition: none; }
}
/* the same under html[data-sv-motion="reduce"], the site's own switch */
:where([data-sv-motion="reduce"]) .sv-spread > *, .sv-on:where([data-sv-motion="reduce"]) .sv .sv-spread.sv-spread-in > * { translate: none; rotate: none; transition: none; }
```

### React
```tsx
<Track>
  <div className="sv-spread sv-spread-in">
    {cards.map((c, i) => (
      <Item key={c.id} order={i}><Card {...c} /></Item>
    ))}
  </div>
</Track>
{/* Item carries the vars as props. No style attr; sv-spread targets
   direct children, and the Item wrapper IS the direct child. */}
```

## Curtain (curtain)

Two panels slide apart as you scroll through a pinned stretch.
Category: Pinned scenes
Use for: Chapter breaks, big reveals, section transitions.
Knobs: outer height = scroll length; panel content/colors are yours
Install: npx scrollvars add curtain
Styles: scrollvars/styles/pin.css

### Tailwind
```html
<div data-sv data-sv-pin="250vh">
  <div class="sv-stage">
    <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>
```

### CSS
```html
<div data-sv data-sv-pin="250vh">     <!-- the pin helper owns the height -->
  <div class="sv-stage">                <!-- the sticky viewport, from pin.css -->
    <div class="revealed">…</div>
    <div class="panel sv-curtain-l">…</div>
    <div class="panel sv-curtain-r">…</div>
  </div>
</div>

/* the preset (styles/pin.css), plus the two panels, which are yours: */
.sv-stage .panel { position: absolute; inset: 0; width: 50%; background: #14141a; }
.sv-stage .sv-curtain-r { left: 50%; }
.sv .sv-curtain-l { translate: calc(var(--sv-pin, 0) * -101%) 0; }
.sv .sv-curtain-r { translate: calc(var(--sv-pin, 0) * 101%) 0; }

/* the same sheet's reduced-motion override, last so it wins on source order: */
@media (prefers-reduced-motion: reduce) {
  .sv .sv-curtain-l,
  .sv .sv-curtain-r { display: none; }
}
/* the same under html[data-sv-motion="reduce"], the site's own switch */
:where([data-sv-motion="reduce"]) .sv .sv-curtain-l, :where([data-sv-motion="reduce"]) .sv .sv-curtain-r { display: none; }
```

### React
```tsx
<Track pin="250vh">
  <div className="sv-stage">
    <Revealed />
    <div className="sv-curtain-l …" />
    <div className="sv-curtain-r …" />
  </div>
</Track>
```

## Horizontal rail (horizontal-rail)

Vertical scroll travels a horizontal track through a pinned stage.
Category: Pinned scenes
Use for: Process steps, timelines, galleries that read left-to-right.
Knobs: outer height = scroll length; works at any viewport width (min() keeps it moving)
Install: npx scrollvars add horizontal-rail
Styles: scrollvars/styles/pin.css

### Tailwind
```html
<div data-sv data-sv-pin="300vh">
  <div class="sv-stage flex items-center">
    <div class="sv-rail flex gap-4 px-[10vw]">
      {cards.map(c => <Card key={c.id} class="w-80 shrink-0" />)}
    </div>
  </div>
</div>
```

### CSS
```html
<div data-sv data-sv-pin="300vh">        <!-- the pin helper owns the height -->
  <div class="sv-stage rail-stage">      <!-- the sticky viewport, from pin.css -->
    <div class="sv-rail">…cards…</div>
  </div>
</div>

/* the preset (styles/pin.css), plus the stage layout, which is yours: */
.rail-stage { display: flex; align-items: center; }
/* --sv-stage-width is measured by the driver; --sv-rail-start overrides it */
.sv .sv-rail { width: max-content; display: flex; gap: 1rem; padding: 0 10vw;
  translate: calc((1 - var(--sv-pin, 0)) * var(--sv-rail-start, var(--sv-stage-width, 100vw)) +
                  var(--sv-pin, 0) * min(var(--sv-stage-width, 100vw) - 100%, 0px)) 0; }

/* the same sheet's reduced-motion override, last so it wins on source order: */
@media (prefers-reduced-motion: reduce) {
  .sv .sv-rail { translate: none; width: auto; flex-wrap: wrap; }
}
/* the same under html[data-sv-motion="reduce"], the site's own switch */
:where([data-sv-motion="reduce"]) .sv .sv-rail { translate: none; width: auto; flex-wrap: wrap; }
```

### React
```tsx
<Track pin="300vh">
  <div className="sv-stage flex items-center">
    <div className="sv-rail flex gap-4 px-[10vw]">{cards}</div>
  </div>
</Track>
```

## Sequenced scrub (sequenced-scrub)

Each child animates over its own slice of the pin. Choreography without a timeline.
Category: Pinned scenes
Use for: Pinned stories where A plays over 0–40%, B over 30–70%, C over 60–100%.
Knobs: --sv-from / --sv-to per child (slice of the clock), --sv-distance; override --sv-clock to pick the clock
Install: npx scrollvars add sequenced-scrub
Styles: scrollvars/styles/pin.css

### Tailwind
```html
<div data-sv data-sv-pin="250vh">
  <div class="sv-stage grid place-items-center">
    <div class="sv-range sv-range-rise grid gap-3">
      <h2 data-sv-from="0" data-sv-to=".4" class="text-4xl font-bold">First</h2>
      <p data-sv-from=".3" data-sv-to=".7">Second</p>
      <p data-sv-from=".6" data-sv-to="1">Third</p>
    </div>
  </div>
</div>
<!-- needs calc() division by var: Chrome 112 / Safari 16.4 / FF 112.
     --sv-r is a registered property (initial-value: 1), so an engine
     that can't compute the division settles there instead of turning
     invalid; still consume it as var(--sv-r, 1). -->
```

### CSS
```html
<div data-sv data-sv-pin="250vh">     <!-- the pin helper owns the height -->
  <div class="sv-stage">                <!-- the sticky viewport, from pin.css -->
    <div class="sv-range sv-range-rise">
      <h2 style="--sv-from: 0; --sv-to: .4">First</h2>
      <p style="--sv-from: .3; --sv-to: .7">Second</p>
      <p style="--sv-from: .6; --sv-to: 1">Third</p>
    </div>
  </div>
</div>

/* styles/pin.css ships it; the mechanism, if you want it inline: */
/* the clock lives on the container at zero specificity, so your own rule on
   that container (--sv-clock: var(--sv-t)) or an inline style wins */
:where(.sv .sv-range) {
  --sv-clock: var(--sv-pin, var(--sv-t, 0));
}
.sv .sv-range > * {
  --sv-r: clamp(0, calc((var(--sv-clock) - var(--sv-from, 0)) /
                        (var(--sv-to, 1) - var(--sv-from, 0))), 1);
}
/* consume --sv-r however you like, ALWAYS with a fallback of 1, and floor
   an opacity so unread text still meets 4.5:1 (the presets floor at .55): */
.mine > * { opacity: calc(.55 + .45 * var(--sv-r, 1)); scale: calc(.8 + var(--sv-r, 1) * .2); }

/* the same sheet's reduced-motion override, last so it wins on source order: */
@media (prefers-reduced-motion: reduce) {
  .sv .sv-range > * { --sv-r: 1; }
}
/* the same under html[data-sv-motion="reduce"], the site's own switch */
:where([data-sv-motion="reduce"]) .sv .sv-range > * { --sv-r: 1; }
```

### React
```tsx
<Track pin="250vh">
  <div className="sv-stage grid place-items-center">
    <div className="sv-range sv-range-rise grid gap-3">
      {steps.map((s, i, all) => (
        <Step key={s.id} style={{ '--sv-from': i / all.length, '--sv-to': (i + 1.6) / all.length } as React.CSSProperties} {...s} />
      ))}
    </div>
  </div>
</Track>

// JS twin for canvas/WebGL consumers:
// track(el, { pin: '250vh', onPin: (p) => uniform.set(mapRange(p, 0.3, 0.7)) })
```

## Wall to floor fold (wall-floor-fold)

Copy runs down a wall and, at the fold, keeps going onto the floor toward you. A clone in perspective, --sv-pin driving both.
Category: Pinned scenes
Use for: Manifestos, case-study openers, one long passage that deserves the corner.
Knobs: data-sv-pin (total scroll length) and --sv-fold-travel (pin length minus 100vh, keep them matched); --sv-fold-depth, --sv-fold-eye, --sv-fold-angle, --sv-fold-line (perspective)
Install: npx scrollvars add wall-floor-fold
Styles: scrollvars/styles/pin.css

### Tailwind
```html
<div data-sv data-sv-pin="380vh">
  <div class="sv-stage fold-scene relative">
    <div class="fold-wall">
      <article class="fold-copy mx-auto w-[min(720px,100%-40px)]">…your copy…</article>
    </div>
    <div class="fold-line" aria-hidden="true"></div>
    <div class="fold-floor" aria-hidden="true" inert>
      <div class="fold-shift"><article class="fold-copy mx-auto w-[min(720px,100%-40px)]">…your copy again…</article></div>
    </div>
  </div>
</div>
<!-- Use the CSS tab's fold-scene/fold-wall/fold-floor/fold-line/fold-copy
     rules: the geometry (perspective, rotate, the floor's
     wrapper offset) is not expressible as utility classes. Tailwind only styles the
     copy itself. -->
```

### CSS
```html
<div data-sv data-sv-pin="380vh">     <!-- the pin helper owns the height: match your copy's length -->
  <div class="sv-stage fold-scene">                    <!-- the sticky viewport (pin.css) plus the perspective -->
    <div class="fold-wall">
      <article class="fold-copy">…your copy…</article>
    </div>
    <div class="fold-line" aria-hidden="true"></div>
    <!-- the same copy again, laid flat toward the viewer: aria-hidden AND
         inert together keep it out of the accessibility tree and the tab
         order, never focusable, never announced -->
    <div class="fold-floor" aria-hidden="true" inert>
      <div class="fold-shift"><article class="fold-copy">…your copy again…</article></div>
    </div>
  </div>
</div>

<script type="module">
import { track } from 'scrollvars'
track(document.querySelector('[data-sv-pin]'))
</script>

/* geometry as custom properties, so a page can tune them without touching
   the rules: depth (perspective), eye (perspective-origin y), fold (where
   the wall ends and the floor starts), travel (total scroll distance the
   copy moves, matched to data-sv-pin minus 100vh). */
.fold-scene { perspective: var(--sv-fold-depth, 650px); perspective-origin: 50% var(--sv-fold-eye, 11%); }
.fold-wall { position: absolute; inset: 0 0 auto 0; height: var(--sv-fold-line, 70vh); overflow: hidden; }
.fold-line { position: absolute; left: 0; right: 0; top: var(--sv-fold-line, 70vh); height: 1px; background: currentColor; opacity: .2; }
/* drawn at twice the size and scaled back down: the text nearest the camera stays sharp */
.fold-floor {
  position: absolute; left: 0; width: 100%; top: var(--sv-fold-line, 70vh); height: 100%; overflow: hidden;
  transform-origin: 50% 0; rotate: x var(--sv-fold-angle, 90deg);
  mask-image: linear-gradient(#000 55%, transparent);   /* fades out before it reaches the camera */
}
/* centered with left: 50% + a -50% translate (relative to the copy's own,
   possibly overflowing, width) rather than margin: auto, which clamps to 0 and
   goes flush-left the moment the floor copy is wider than the floor
   itself (narrow viewports): a symmetric overflow reads as "close to the
   camera", a one-sided one reads as a clipped bug. */
.fold-copy { width: min(720px, 100% - 40px); position: relative; left: 50%;
  translate: -50% calc(var(--sv-pin, 0) * -1 * var(--sv-fold-travel, 280vh)); }
.fold-floor .fold-copy { translate: -50% 0; }
/* the floor copy scrolls on its own wrapper, in the same units as the wall: no
   zoom or scale here, engines disagree on how zoom treats vh (the floor drifted). */
.fold-floor .fold-shift { translate: 0 calc(-1 * (var(--sv-pin, 0) * var(--sv-fold-travel, 280vh) + var(--sv-fold-line, 70vh))); }

/* no JS: the wall reads as a normal column; the floor clone never renders */
html:not(.sv-on) .fold-wall { position: static; height: auto; overflow: visible; }
html:not(.sv-on) .fold-floor,
html:not(.sv-on) .fold-line { display: none; }
html:not(.sv-on) .fold-copy { position: static; left: auto; margin: 0 auto; translate: none; }

/* released later (data-sv-off): the same reset, for a tracker that stops */
[data-sv-off] .fold-wall { position: static; height: auto; overflow: visible; }
[data-sv-off] .fold-floor,
[data-sv-off] .fold-line { display: none; }
[data-sv-off] .fold-copy { position: static; left: auto; margin: 0 auto; translate: none; }

/* the same sheet's reduced-motion override, last so it wins on source order:
   .sv-stage already returns to flow (pin.css); this drops the perspective,
   unclips the wall and hides the floor clone. Flat, no clone, no 3D. */
@media (prefers-reduced-motion: reduce) {
  .fold-scene { perspective: none; }
  .fold-wall { position: static; height: auto; overflow: visible; }
  .fold-floor, .fold-line { display: none; }
  .fold-copy { position: static; left: auto; margin: 0 auto; translate: none; }
}
/* the same under html[data-sv-motion="reduce"], the site's own switch */
:where([data-sv-motion="reduce"]) .fold-scene { perspective: none; }
:where([data-sv-motion="reduce"]) .fold-wall { position: static; height: auto; overflow: visible; }
:where([data-sv-motion="reduce"]) .fold-floor,
:where([data-sv-motion="reduce"]) .fold-line { display: none; }
:where([data-sv-motion="reduce"]) .fold-copy { position: static; left: auto; margin: 0 auto; translate: none; }
```

### React
```tsx
// npx scrollvars add wall-floor-fold
import { WallFloorFold } from './components/fx/WallFloorFold'

function Manifesto() {
  return (
    <WallFloorFold>
      <h2>Every page is a place.</h2>
      <p>We build brands the way architects build rooms…</p>
    </WallFloorFold>
  )
}
// pin defaults to '380vh': pass a longer one to match more copy, and keep
// travel (default '280vh') at pin minus 100vh. depth/eye/angle/fold are
// props too, written as --sv-fold-* vars.
// The floor is the same children, rendered a second time and marked
// aria-hidden + inert: it never reaches assistive tech or the tab order.
```

## GSAP timeline under scrub (gsap-scrub)

Author the choreography in GSAP, let ScrollVars drive it. One listener, one writer.
Category: Interop
Use for: The page that genuinely needs timeline authoring. You keep the driver; GSAP renders.
Knobs: the timeline is yours; ScrollVars owns scroll (pin/onPin). Never let GSAP add its own scroll listener
Install: npx scrollvars add gsap-scrub
Styles: scrollvars/styles/pin.css

### Tailwind
```html
<div data-x>   <!-- no data-sv: tracked in JS with pin: '250vh' (the helper sets the height) -->
  <div class="sv-stage grid place-items-center">…</div>
</div>
<!-- zero-wrapper pages: use the css pane's guarded track()/onPin callback,
     never gsap.ticker: it has no reduced-motion guard and reads an empty
     var as 0 the instant the tracker releases -->
```

### CSS
```html
<div class="scene">                     <!-- no data-sv: tracked in JS below -->
  <div class="sv-stage">…stage…</div>   <!-- the sticky viewport, from pin.css -->
</div>

<script>
  // author in time-space, consume as a scrub. This stays input-driven:
  const tl = gsap.timeline({ paused: true })
    .from('.sv-stage > *', { y: 140, opacity: 0, stagger: 0.2 })

  // reduced motion settles the timeline instead of scrubbing it; a failed
  // or released tracker never fires onPin again, so it settles too, or the
  // .from() content stays at opacity 0 forever
  let progress = 0, tracking = true
  const settle = () => tl.progress(prefersReducedMotion() || !tracking ? 1 : progress)
  settle()
  onMotionChange(settle)

  track(document.querySelector('.scene'), {
    pin: '250vh',                                        // the helper owns the wrapper height
    onPin: (p) => { progress = p; settle() },             // ScrollVars steers, GSAP renders
    onStatus: (status) => { tracking = status !== 'failed' && status !== 'released'; settle() },
  })
  // Do NOT also create a ScrollTrigger. One scroll listener, one writer.
</script>
```

### React
```tsx
const stage = useRef<HTMLDivElement>(null)
const tl = useRef<gsap.core.Timeline | null>(null)
const progress = useRef(0)
const tracking = useRef(true)
// reads only refs, so identity does not matter to the effect below
const settle = () => tl.current?.progress(prefersReducedMotion() || !tracking.current ? 1 : progress.current)
useEffect(() => {
  // scoped to this instance's own stage, never a bare class selector: two
  // of these on one page must not animate each other's children
  tl.current = gsap.timeline({ paused: true })
    .from(stage.current!.children, { y: 140, opacity: 0, stagger: 0.2 })
  settle()
  const off = onMotionChange(settle)
  return () => { off(); tl.current?.kill() }
}, [])

<Track
  pin="250vh"
  onPin={(p) => { progress.current = p; settle() }}
  onStatus={(status) => { tracking.current = status !== 'failed' && status !== 'released'; settle() }}
>
  <div ref={stage} className="sv-stage">…</div>
</Track>
```

## Three.js scene on the pin (three-scene)

A WebGL scene scrubbed by scroll. The canvas harness runs the lifecycle, Three renders.
Category: Interop
Use for: Hero 3D moments, product tours, camera paths, WebGL driven by the same variables.
Knobs: mountEffect({ context: null }) hands you the raw canvas; feed progress via onPin/onTravel closures
Install: npx scrollvars add three-scene
Styles: scrollvars/styles/pin.css

### Tailwind
```html
<div>   <!-- tracked in JS with pin: '250vh' -->
  <div class="sv-stage grid place-items-center">
    <canvas id="scene" class="h-[60vh] w-full max-w-xl"></canvas>
  </div>
</div>
<!-- same JS as the CSS tab, Tailwind only does the skeleton here -->
```

### CSS
```html
<div id="outer">                       <!-- no data-sv: tracked in JS below -->
  <div class="sv-stage"><canvas id="scene"></canvas></div>   <!-- from pin.css -->
</div>

<script type="module">
  import { track } from 'scrollvars'
  import { mountEffect } from 'scrollvars/canvas'
  import * as THREE from 'three'

  let progress = 0
  mountEffect(document.getElementById('scene'), {
    context: null,                       // you own the WebGL context
    setup(fx)  { /* renderer/scene/camera on fx.canvas */ },
    resize(fx) { /* setSize(fx.width, fx.height); setPixelRatio(fx.dpr) */ },
    frame(fx, dt) { /* advance + render; respect fx.reducedMotion */ },
  })
  track(document.getElementById('outer'), { pin: '250vh', onPin: (p) => (progress = p) })
  // The harness gives you: DPR cap, resize, pause offscreen/hidden tab,
  // delta-time loop, reduced-motion flag, cleanup, Three stays userland.
</script>
```

### React
```tsx
'use client'
const progress = useRef(0)
const canvasRef = useCanvasEffect({
  context: null,
  setup(fx)  { /* THREE renderer on fx.canvas */ },
  resize(fx) { /* size + DPR */ },
  frame(fx, dt) { /* render with progress.current */ },
})

<Track pin="250vh" onPin={(p) => (progress.current = p)}>
  <div className="sv-stage grid place-items-center">
    <canvas ref={canvasRef} className="h-[60vh] w-full max-w-xl" />
  </div>
</Track>
```

## Split reveal (split-reveal)

A headline broken into words, each rising on its own beat, SplitText without the engine.
Category: Text
Use for: Hero headlines, section titles, any text that deserves an entrance.
Knobs: data-sv-split (word|char) does the splitting; --sv-stagger (beat), --sv-duration; pair with sv-reading to scrub instead
Install: npx scrollvars add split-reveal
Styles: scrollvars/styles/core.css

### Tailwind
```html
<section data-sv data-sv-once class="py-24">
  <h2 class="sv-split-rise text-5xl font-extrabold" data-sv-split>
    Words arrive one by one
  </h2>
</section>
<!-- knobs per element: [--sv-stagger:60ms] [--sv-duration:600ms] -->
```

### CSS
```html
<section data-sv data-sv-once>
  <h2 class="sv-split-rise" data-sv-split>Words arrive one by one</h2>
</section>
<!-- data-sv-split wraps each word in a span with --sv-order; the full text
     stays in a visually-hidden span for AT and the animated spans are
     aria-hidden. char mode: data-sv-split="char". -->

/* the preset (styles/core.css): */
.sv, [data-sv] { --sv-live: 0; }
.sv.sv-live { --sv-live: 1; }
/* non-replaced inline boxes ignore translate: the animated spans need it */
.sv-split > span[aria-hidden] { display: inline-block; }
.sv-on .sv .sv-split-rise > span {
  opacity: var(--sv-live); translate: 0 calc((1 - var(--sv-live)) * 0.6em);
  transition: opacity var(--sv-duration, 800ms) var(--sv-ease, cubic-bezier(0.28, 0.84, 0.42, 1)),
              translate var(--sv-duration, 800ms) var(--sv-ease, cubic-bezier(0.28, 0.84, 0.42, 1));
  transition-delay: calc(var(--sv-order, 0) * var(--sv-stagger, 90ms));
}
/* the same sheet's reduced-motion override, and it has to sit AFTER the rule
   it beats: equal specificity, later wins */
@media (prefers-reduced-motion: reduce) {
  .sv-on :is(.sv, [data-sv]) .sv-split-rise > span {
    transition: none; animation: none; opacity: 1; translate: none; }
}
/* the same under html[data-sv-motion="reduce"], the site's own switch */
.sv-on:where([data-sv-motion="reduce"]) :is(.sv, [data-sv]) .sv-split-rise > span { transition: none; animation: none; opacity: 1; translate: none; }

/* a focused split heading must reveal every word at once, not after its
   stagger delay (WCAG 2.4.7): must sit AFTER the reduce blocks above, same
   source-order rule */
.sv-on .sv .sv-split-rise:focus-within > span { transition: none; opacity: 1; translate: none; }

/* scrub instead of play: the same spans feed sv-reading directly */
<h2 class="sv-reading" data-sv-split>…</h2>   <!-- inside a data-sv-pin -->
```

### React
```tsx
import { Split } from 'scrollvars/react'

<Reveal>
  <Split as="h2" className="sv-split-rise" stagger={60}>
    Words arrive one by one
  </Split>
</Reveal>

{/* <Split> renders the spans ON THE SERVER. The split markup is in the
   HTML, so no client-side splitting, no layout shift, no hydration
   flash. by="char" for letters. */}
```

## Rotating words (rotating-words)

One word exits up, the next rises from below. A clipped column on one variable.
Category: Text
Use for: Hero headlines: "We build ______".
Knobs: --sv-word (index), --sv-duration; drive it from state, scenes or an interval
Install: npx scrollvars add rotating-words
Styles: scrollvars/styles/state.css

### Tailwind
```html
<h1 class="text-5xl font-extrabold">
  we build
  <span class="sv-words text-violet-400" aria-hidden="true">
    <span>brands</span><span>websites</span><span>products</span>
  </span>
  <span class="sr-only">brands, websites and products</span>
</h1>
<button type="button" id="words-pause" aria-pressed="false">Pause rotation</button>
<!-- set --sv-word from your state; scenes drive it for free in pinned stories -->
<script>
  let paused = false
  document.getElementById('words-pause').addEventListener('click', () => {
    paused = !paused
    document.getElementById('words-pause').setAttribute('aria-pressed', String(paused))
  })
  // guard your own --sv-word write the same way: if (!paused) el.style.setProperty(...)
</script>
```

### CSS
```html
<h1>we build
  <span class="sv-words" aria-hidden="true">
    <span>brands</span><span>websites</span><span>products</span>
  </span>
  <!-- the column reads as three words in a row to a screen reader: hide it and say the phrase once -->
  <span style="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap">brands, websites and products</span>
</h1>
<!-- WCAG 2.2.2: text that auto-rotates past 5s needs a pause control -->
<button type="button" id="words-pause" aria-pressed="false">Pause rotation</button>

/* the preset (styles/state.css): */
.sv-words { display: inline-flex; flex-direction: column;
  vertical-align: baseline; height: 1.15em; overflow: hidden; }
.sv-words > * { display: block; height: 1.15em; line-height: 1.15;
  translate: 0 calc(var(--sv-word, 0) * -1.15em);
  transition: translate .65s var(--sv-ease, cubic-bezier(.28,.84,.42,1)); }
/* the same sheet's reduced-motion override, last so it wins on source order: */
@media (prefers-reduced-motion: reduce) {
  .sv-words > * { transition-duration: .01ms; }
}
/* the same under html[data-sv-motion="reduce"], the site's own switch */
:where([data-sv-motion="reduce"]) .sv-words > * { transition-duration: .01ms; }

// drive it (state, scenes, or a timer), and stop on request:
let paused = false
document.getElementById('words-pause').addEventListener('click', () => {
  paused = !paused
  document.getElementById('words-pause').setAttribute('aria-pressed', String(paused))
})
if (!paused) el.style.setProperty('--sv-word', nextIndex)
```

### React
```tsx
const [word, setWord] = useState(0)
<h1>we build{' '}
  <span className="sv-words" style={{ '--sv-word': word } as React.CSSProperties} aria-hidden="true">
    {words.map(w => <span key={w}>{w}</span>)}
  </span>
  {/* the column reads as three words in a row to a screen reader: say the phrase once */}
  <span className="sr-only">{words.join(', ')}</span>
</h1>
```

## Pointer tilt (pointer-tilt)

Cards tilt toward the cursor with a moving glare. One delegated listener.
Category: Pointer
Use for: Product cards, team grids, anything that should feel physical.
Knobs: tilt degrees and glare live in the preset. Override .sv-tilt to taste
Install: npx scrollvars add pointer-tilt
Styles: scrollvars/styles/tilt.css

### Tailwind
```html
<div ref={rowRef} class="grid grid-cols-3 gap-6">
  <div class="sv-tilt rounded-2xl border p-10">…</div>
</div>
<!-- tilt/glare read --mx/--my; restyle .sv-tilt::after for the glare -->
```

### CSS
```html
<div class="grid">          <!-- any container -->
  <div class="sv-tilt">…</div>
  <div class="sv-tilt">…</div>
</div>

<script type="module">
  import { trackPointer } from 'scrollvars'
  trackPointer(document.querySelector('.grid'))
</script>
/* preset in styles/tilt.css. Tilt + glare from --mx/--my */
```

### React
```tsx
const ref = usePointer()
<div ref={ref} className="grid grid-cols-3 gap-6">
  {cards.map(c => <div key={c.id} className="sv-tilt">…</div>)}
</div>
```

## Coverflow slider (coverflow-slider)

Native-scroll carousel; slides scale, fade and turn by their distance from center.
Category: Sliders
Use for: Anywhere you were about to install Swiper.
Knobs: --sd per slide (written by slider()); --sv-per-view breakpoints; chrome vars --sv-arrow-*/--sv-dot-*
Install: npx scrollvars add coverflow-slider
Styles: scrollvars/styles/slider.css

### Tailwind
```html
<Slider perView={{ base: 1.2, md: 2.5, xl: 4 }} gap={16} arrows dots
  className="[--sv-arrow-bg:theme(colors.zinc.900/60)]">
  {cards.map(c => (
    <Slide key={c.id}
      className="[scale:calc(1-min(max(var(--sd,0),-1*var(--sd,0))*0.12,0.3))] motion-reduce:[scale:none] sv-reduce:[scale:none]">
      <Card {...c} />
    </Slide>
  ))}
</Slider>
```

### CSS
```html
<div class="sv-slider" id="cards" role="region" aria-label="Cards">
  <div class="slide">…</div> ×N
</div>

<script type="module">
  import { slider } from 'scrollvars'
  slider(document.getElementById('cards'))
</script>

/* the coverflow is pure CSS on --sd: */
.slide { scale: calc(1 - min(max(var(--sd, 0), -1 * var(--sd, 0)) * 0.12, 0.3));
  opacity: calc(1 - min(max(var(--sd, 0), -1 * var(--sd, 0)) * 0.35, 0.7));
  transform: perspective(900px) rotateY(calc(var(--sd, 0) * -16deg)); }
@media (prefers-reduced-motion: reduce) { .slide { scale: none; opacity: 1; transform: none; } }
/* the same under html[data-sv-motion="reduce"], the site's own switch */
:where([data-sv-motion="reduce"]) .slide { scale: none; opacity: 1; transform: none; }   /* scroll-linked transforms return to flow */
```

### React
```tsx
<Slider perView={{ base: 1.2, md: 2.5, xl: 4 }} gap={16} arrows dots autoplay={5000}>
  {cards.map(c => <Slide key={c.id}><Card {...c} /></Slide>)}
</Slider>
// chrome: --sv-arrow-* / --sv-dot-* vars, prevIcon/nextIcon, renderDot, or your own UI via ref
```

## Marquee (marquee)

An infinite strip (logos, taglines) that pauses on hover.
Category: Sliders
Use for: Logo walls, ticker bands. The honest replacement for Swiper loop.
Knobs: --sv-marquee-duration (one loop), --sv-gap; --sv-marquee-hover: running disables the pause
Install: npx scrollvars add marquee
Styles: scrollvars/styles/ui.css

### Tailwind
```html
<div id="logo-strip" class="sv-marquee sv-marquee-controlled [--sv-marquee-duration:24s] [--sv-gap:64px] py-8">
  <div class="sv-marquee-track">
    {logos}{/* duplicate once, aria-hidden */}
  </div>
  <button type="button" class="sv-marquee-pause" aria-pressed="false"
    data-sv-toggle="sv-paused" data-sv-target=".sv-marquee-track">Pause animation</button>
</div>
<!-- <ScrollVarsBoot /> already wires this; a plain HTML page calls
     toggles() itself: SV.toggles(document.getElementById('logo-strip')) -->
```

### CSS
```html
<div class="sv-marquee sv-marquee-controlled">
  <div class="sv-marquee-track">
    …content… …content again (aria-hidden)…
  </div>
  <!-- WCAG 2.2.2: auto-moving content past 5s needs a pause/stop control -->
  <button type="button" class="sv-marquee-pause" aria-pressed="false"
    data-sv-toggle="sv-paused" data-sv-target=".sv-marquee-track">Pause animation</button>
</div>
<script>toggles()</script> <!-- wires the button: aria-pressed, sv-paused on the track -->

/* the preset (styles/ui.css): */
.sv-marquee { overflow: hidden; display: flex; }
.sv-marquee-track { display: flex; gap: var(--sv-gap, 48px); width: max-content;
  padding-right: var(--sv-gap, 48px);
  animation: sv-marquee var(--sv-marquee-duration, 30s) linear infinite; }
.sv-marquee:hover .sv-marquee-track,
.sv-marquee:focus-within .sv-marquee-track { animation-play-state: paused; }
.sv-marquee-controlled > .sv-marquee-track.sv-paused { animation-play-state: paused; }
/* while the track holds focus, present it statically and wrapped (WCAG
   2.4.7): pausing alone can leave a focused item translated off the strip */
.sv-marquee-track:focus-within { animation: none; width: auto; flex-wrap: wrap; }
.sv-marquee-track:focus-within > .sv-marquee-dup { display: none; }
@keyframes sv-marquee { to { translate: -50% 0; } }

/* the same sheet's reduced-motion override, last so it wins on source order:
   without width/flex-wrap the strip keeps overflowing past the viewport
   with nothing left to scroll it into view */
@media (prefers-reduced-motion: reduce) {
  .sv-marquee-track { animation: none; width: auto; flex-wrap: wrap; }
  .sv-marquee-track > .sv-marquee-dup { display: none; }
}
/* the same under html[data-sv-motion="reduce"], the site's own switch */
:where([data-sv-motion="reduce"]) .sv-marquee-track { animation: none; width: auto; flex-wrap: wrap; }
:where([data-sv-motion="reduce"]) .sv-marquee-track > .sv-marquee-dup { display: none; }
```

### React
```tsx
<Marquee speed={24}>
  {logos.map(l => <img key={l.id} src={l.src} alt={l.name} className="h-8" />)}
</Marquee>
```

## Cinematic hero (hero-cinematic)

Split headline rising on a beat, pointer-parallax glow, a marquee strip, and the whole block fades out as you scroll past (--sv-t).
Category: Sections
Use for: Landing pages, studio reels, product launches. The first fold that has to land.
Knobs: --sv-stagger (word beat), --hero-parallax (px of pointer drift), --sv-marquee-duration; swap the orbs for images or video
Install: npx scrollvars add hero-cinematic
Styles: scrollvars/styles/core.css, scrollvars/styles/ui.css


### React
```tsx
// ScrollVars fx · hero-cinematic
// Requires: npm i scrollvars · import 'scrollvars/styles/core.css' and 'scrollvars/styles/ui.css'
// Split headline rising on a beat, pointer-parallax glow, marquee strip; the block
// fades and scales out as it leaves (--sv-t). The CSS below is the whole section,
// one constant string injected as raw HTML: React 18's server renderer escapes a
// <style> child (`>` becomes `&gt;`) and <style> is raw text, so the entity never
// decodes and every child-combinator rule is dropped. CSP is unchanged from any
// inline <style>: a style-src nonce or hash, or lift the string into your own CSS.
'use client'
import * as React from 'react'
import { Track, Split, Marquee, usePointer } from 'scrollvars/react'

const css = `
.sv-hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; text-align: center; }
.sv-hero .hero-orb { position: absolute; width: 52vmin; height: 52vmin; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: -1;
  translate: calc(var(--mx, 0) * var(--hero-parallax, 40px)) calc(var(--my, 0) * var(--hero-parallax, 40px)); transition: translate .5s ease-out; }
.sv-hero .hero-orb.a { background: var(--hero-glow, #f2c14e); top: -14%; left: -8%; }
.sv-hero .hero-orb.b { background: var(--hero-glow-2, #ffb454); bottom: -16%; right: -10%; --hero-parallax: -60px; }
.sv-hero .hero-inner { padding: 60px 24px 90px; --hero-out: clamp(0, (var(--sv-t, .5) - .5) * 2, 1); opacity: calc(1 - var(--hero-out)); scale: calc(1 - var(--hero-out) * .12); }
@media (prefers-reduced-motion: reduce) { .sv-hero .hero-orb { translate: none; transition: none; } .sv-hero .hero-inner { opacity: 1; scale: none; } }
/* the same under html[data-sv-motion="reduce"], the site's own switch */
:where([data-sv-motion="reduce"]) .sv-hero .hero-orb { translate: none; transition: none; }
:where([data-sv-motion="reduce"]) .sv-hero .hero-inner { opacity: 1; scale: none; }
.sv-hero .hero-eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.sv-hero .hero-title { font-size: clamp(36px, 6.4vw, 78px); line-height: 1.02; letter-spacing: -.03em; max-width: 14ch; margin: 14px auto 18px; font-weight: 800; }
.sv-hero .hero-sub { max-width: 42ch; margin: 0 auto 26px; font-size: 17px; opacity: .75; }
.sv-hero .hero-strip { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(20, 33, 26, .9); padding: 14px 0; border-top: 1px solid rgba(128,128,128,.25); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.sv-hero .hero-strip span { margin: 0 18px; }
`

export function HeroCinematic({
  eyebrow,
  title,
  copy,
  cta,
  strip = ['Brand', '·', 'Motion', '·', 'Web', '·', 'Type', '·'],
  className,
  nonce,
}: {
  eyebrow?: string
  /** Plain text: it is split into words on the server, each rising on its own beat. */
  title: string
  copy?: React.ReactNode
  cta?: React.ReactNode
  strip?: string[]
  className?: string
  nonce?: string
}) {
  const ref = usePointer<HTMLElement>({ selector: '.sv-hero' }) // --mx/--my (-1..1) on the section itself
  return (
    <section ref={ref} className={className ? 'sv-hero ' + className : 'sv-hero'}>
      <style nonce={nonce} dangerouslySetInnerHTML={{ __html: css }} />
      <div className="hero-orb a" />
      <div className="hero-orb b" />
      <Track travel>
        <div className="hero-inner">
          {eyebrow && <p className="hero-eyebrow sv-rise">{eyebrow}</p>}
          <Split as="h1" className="hero-title sv-split-rise">
            {title}
          </Split>
          {copy && (
            <p className="hero-sub sv-rise" style={{ '--sv-order': 6 } as React.CSSProperties}>
              {copy}
            </p>
          )}
          {cta && (
            <p className="sv-rise" style={{ '--sv-order': 7 } as React.CSSProperties}>
              {cta}
            </p>
          )}
        </div>
      </Track>
      <Marquee className="hero-strip">
        {strip.map((s, i) => (
          <span key={i}>{s}</span>
        ))}
      </Marquee>
    </section>
  )
}

```

## Pinned timeline (timeline-scrub)

Pin the section; the scroll draws the line, counts the year and lights each milestone over its own slice of the pin.
Category: Sections
Use for: Company history, case-study process, roadmap, "how we got here". Any ordered story.
Knobs: --tl-from/--tl-span (year counter), data-sv-from/to per milestone (its slice of the pin), --sv-distance (milestone travel), wrapper height (scroll length)
Install: npx scrollvars add timeline-scrub
Styles: scrollvars/styles/pin.css


### React
```tsx
// ScrollVars fx · timeline-scrub
// Requires: npm i scrollvars · import 'scrollvars/styles/pin.css' (sv-stage, sv-range)
// Pinned: the scroll draws the line, counts the year (a CSS counter) and lights each
// milestone over its own slice of the pin. No JS beyond the driver.
// The CSS below is one constant string injected as raw HTML: React 18's server
// renderer escapes a <style> child (`>` becomes `&gt;`) and <style> is raw text, so
// the entity never decodes and every child-combinator rule is dropped. CSP is
// unchanged from any inline <style>: a style-src nonce or hash, or lift the string
// into your own stylesheet.
'use client'
import * as React from 'react'
import { Track } from 'scrollvars/react'

const css = `
.sv-timeline .tl-sticky { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 40px; padding: 32px clamp(20px, 5vw, 64px); box-sizing: border-box; min-height: 100%; }
.sv-timeline .tl-year { font-size: clamp(64px, 12vw, 150px); line-height: 1; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  counter-reset: tl-year calc(var(--tl-from) + var(--sv-pin, 1) * var(--tl-span)); }
.sv-timeline .tl-year .tl-count::after { content: counter(tl-year); }
.sv-timeline .tl-cap { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.sv-timeline .tl-track { position: relative; padding-left: 34px; }
.sv-timeline .tl-line { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: rgba(128,128,128,.25); }
.sv-timeline .tl-line::after { content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: top; scale: 1 var(--sv-pin, 1); }
.sv-timeline .tl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 4vh, 40px); }
.sv-timeline .tl-items > li { position: relative; --sv-distance: 1.6rem; }
.sv-timeline .tl-items > li::before { content: ""; position: absolute; left: -32px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: color-mix(in oklab, currentColor calc(var(--sv-r, 1) * 100%), rgba(128,128,128,.35)); }
.sv-timeline .tl-items b { display: block; font-size: 12px; letter-spacing: .12em; margin-bottom: 4px; }
.sv-timeline .tl-items p { margin: 0; max-width: 34ch; }
[data-sv-flow].sv-timeline .tl-sticky { min-height: 0; --sv-pin: 1; }
/* under reduced motion the stage is in flow and the driver keeps writing --sv-pin:
   settle the year and the line at their finished value, like the shipped presets */
@media (prefers-reduced-motion: reduce) { .sv-timeline .tl-sticky { --sv-pin: 1; } }
/* the same under html[data-sv-motion="reduce"], the site's own switch */
:where([data-sv-motion="reduce"]) .sv-timeline .tl-sticky { --sv-pin: 1; }
@media (max-width: 640px) { .sv-timeline .tl-sticky { grid-template-columns: 1fr; align-content: center; gap: 22px; } }
`

// aria-label is prohibited on generic roles (p/span/div). Axe
// `aria-prohibited-attr`: so the readable text is a visually-hidden child.
const SR_ONLY: React.CSSProperties = {
  position: 'absolute',
  width: 1,
  height: 1,
  overflow: 'hidden',
  clipPath: 'inset(50%)',
  whiteSpace: 'nowrap',
}

export interface TimelineStep {
  year: number
  text: React.ReactNode
  /** Slice of the pin (0..1) this milestone animates over; defaults to evenly staggered, overlapping. */
  range?: [number, number]
}

export function TimelineScrub({
  steps,
  caption = 'years of shipping',
  height = '320vh',
  className,
  nonce,
}: {
  steps: TimelineStep[]
  caption?: string
  /** Scroll length of the pinned stretch. */
  height?: string
  className?: string
  nonce?: string
}) {
  const from = steps[0]?.year ?? 0
  const span = (steps[steps.length - 1]?.year ?? from) - from
  const n = steps.length
  return (
    <Track
      pin={height}
      className={className ? 'sv-timeline ' + className : 'sv-timeline'}
      style={{ '--tl-from': from, '--tl-span': span } as React.CSSProperties}
    >
      <style nonce={nonce} dangerouslySetInnerHTML={{ __html: css }} />
      <div className="sv-stage"><div data-sv-fit="" className="tl-sticky">
        <div>
          <span className="tl-year">
            <span style={SR_ONLY}>{from + span}</span>
            <span className="tl-count" aria-hidden="true" />
          </span>
          <span className="tl-cap">{caption}</span>
        </div>
        <div className="tl-track">
          <i className="tl-line" />
          <ol className="sv-range sv-range-rise tl-items">
            {steps.map((s, i) => {
              const [a, b] = s.range ?? [i / n, Math.min((i + 1.4) / n, 1)]
              return (
                <li key={s.year} style={{ '--sv-from': a, '--sv-to': b } as React.CSSProperties}>
                  <b>{s.year}</b>
                  <p>{s.text}</p>
                </li>
              )
            })}
          </ol>
        </div>
      </div></div>
    </Track>
  )
}

```

## Sticky steps (sticky-steps)

Media stays put while the copy scrolls; each step swaps the shot. The product-page pattern, with --sv-scene doing the swapping.
Category: Sections
Use for: Product features, "how it works", case-study walkthroughs, onboarding explainers.
Knobs: data-sv-scenes (step count), wrapper height (scroll per step), --i on each shot/step, the crossfade math (see CSS)
Install: npx scrollvars add sticky-steps
Styles: scrollvars/styles/pin.css


### React
```tsx
// ScrollVars fx · sticky-steps
// Requires: npm i scrollvars · import 'scrollvars/styles/pin.css' (sv-stage)
// Media stays put while the copy scrolls; each step swaps the shot. --sv-scene does the
// swapping, the crossfade is one max() per element. Without JS the shots stack in flow.
// The CSS below is one constant string injected as raw HTML: React 18's server
// renderer escapes a <style> child (`>` becomes `&gt;`) and <style> is raw text, so
// the entity never decodes. Here that dropped the whole --st-d rule (its selector
// list carries a child combinator) and every shot stayed at full opacity. CSP is
// unchanged from any inline <style>: a style-src nonce or hash, or lift the string
// into your own stylesheet.
'use client'
import * as React from 'react'
import { onMotionChange, prefersReducedMotion, refresh as refreshFit } from 'scrollvars'
import { useScenes } from 'scrollvars/react'

const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect

const css = `
.sv-steps .st-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 64px); padding: 32px clamp(20px, 5vw, 64px); box-sizing: border-box; min-height: 100%; }
.sv-steps .st-media { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; display: grid; }
.sv-steps .st-shot { margin: 0; display: grid; place-items: center; }
.sv-steps .st-shot > * { width: 100%; height: 100%; object-fit: cover; }
.sv-steps .st-shot, .sv-steps .st-steps > li, .sv-steps .st-dots i {
  --st-d: min(1, max(calc(var(--sv-scene, 0) - var(--i)), calc(var(--i) - var(--sv-scene, 0)))); }
.sv-on .sv-steps:where(.st-ready, .st-measuring) .st-shot { position: absolute; inset: 0; }
.sv-on .sv-steps:where(.st-ready) .st-shot { opacity: calc(1 - var(--st-d)); scale: calc(1.06 - var(--st-d) * .06); }
.sv-steps:not(.st-ready):not(.st-measuring) .st-media { overflow: visible; }
.sv-steps:not(.sv) .sv-stage, .sv-steps.st-static .sv-stage { position: static; height: auto; overflow: visible; }
.sv-steps.st-static { height: auto !important; }
.sv-steps.st-static .st-grid { min-height: 0; }
.sv-steps.st-static .st-media { aspect-ratio: auto; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .sv-on .sv-steps .st-shot { position: static; opacity: 1; scale: none; } .sv-steps .st-media { gap: 8px; aspect-ratio: auto; } }
/* the same under html[data-sv-motion="reduce"], the site's own switch */
.sv-on:where([data-sv-motion="reduce"]) .sv-steps .st-shot { position: static; opacity: 1; scale: none; }
:where([data-sv-motion="reduce"]) .sv-steps .st-media { gap: 8px; aspect-ratio: auto; }
.sv-steps .st-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 5vh, 44px); }
.sv-steps .st-steps > li { opacity: calc(.65 + .35 * (1 - var(--st-d))); translate: calc(var(--st-d) * -8px) 0; } /* the floor, with the labels at .8, keeps an inactive step's text at 4.5:1 (axe) */
html:not(.sv-on) .sv-steps .st-steps > li { opacity: 1; translate: none; }
.sv-steps .st-steps b { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }
.sv-steps .st-steps h3 { margin: 0 0 6px; font-size: clamp(20px, 2.6vw, 28px); }
.sv-steps .st-steps p { margin: 0; max-width: 36ch; opacity: .8; }
.sv-steps .st-dots { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: flex; gap: 8px; }
.sv-steps .st-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: calc(1 - var(--st-d) * .7); scale: calc(1.6 - var(--st-d) * .6); }
.sv-steps.st-static .st-steps > li { opacity: 1; translate: none; }
/* Placed after the rules above (same specificity, later wins): the stage is
   unpinned under reduced motion, so --sv-scene keeps writing but every
   non-active step would otherwise sit at 30% opacity forever and the copy
   would slide with the raw scroll. Reset both the steps and the dots. */
@media (prefers-reduced-motion: reduce) { .sv-steps .st-steps > li { opacity: 1; translate: none; } .sv-steps .st-dots i { opacity: 1; scale: none; } }
/* the same under html[data-sv-motion="reduce"], the site's own switch */
:where([data-sv-motion="reduce"]) .sv-steps .st-steps > li { opacity: 1; translate: none; }
:where([data-sv-motion="reduce"]) .sv-steps .st-dots i { opacity: 1; scale: none; }
@supports not (translate: 0) {
  .sv-on .sv-steps .st-shot { position: static; opacity: 1; scale: none; }
  .sv-steps .st-media { aspect-ratio: auto; gap: 8px; }
}
.sv-on [data-sv-off].sv-steps .st-shot { position: static; opacity: 1; scale: none; }
[data-sv-off].sv-steps .st-media { aspect-ratio: auto; gap: 8px; }
[data-sv-flow].sv-steps .st-grid { min-height: 0; }
.sv-on [data-sv-flow].sv-steps .st-shot { position: static; opacity: 1; scale: none; }
[data-sv-flow].sv-steps .st-media { aspect-ratio: auto; gap: 8px; }
[data-sv-flow].sv-steps .st-steps > li { opacity: 1; translate: none; }
[data-sv-flow].sv-steps .st-dots { display: none; }
.sv-steps.st-static .st-dots { display: none; }
@media (max-width: 640px) { .sv-steps .st-grid { grid-template-columns: 1fr; align-content: center; gap: 18px; } }
`

export interface StickyStep {
  title: React.ReactNode
  text?: React.ReactNode
  /** The shot for this step: an <img>, <video>, or any node. */
  media: React.ReactNode
  label?: string
}

// React 19 knows inert as a boolean attribute (a string would be dropped as falsy); React 18
// does not know it and drops booleans, so it gets the empty string instead. Both render inert="".
const INERT = (React.version.startsWith('18') ? { inert: '' } : { inert: true }) as unknown as Record<string, never>

// Without native inert (Firefox 78-111, Safari 14.1-15.4, inside the README floor)
// the attribute is inert in name only: an inactive shot's links stay tabbable while
// the shot itself is visually hidden. Crossfading never turns on there; every shot
// stays static and reachable instead.
const inertSupported = typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype

export function StickySteps({ steps, className, nonce }: { steps: StickyStep[]; className?: string; nonce?: string }) {
  // the active index (integer changes only) makes the inactive shots inert, so a
  // crossfaded shot cannot keep focusable links; applied after mount so the
  // server markup stays fully usable without JS
  const status = React.useRef<import('scrollvars').AttachmentStatus>('attaching')
  const flow = React.useRef(true)
  const sync = React.useRef<(() => void) | undefined>(undefined)
  const { ref, scene } = useScenes<HTMLDivElement>(steps.length, {
    // an empty list (a CMS editor removed every step) pins nothing: the stage
    // stays in flow at its natural height instead of a 0vh wrapper
    pin: steps.length ? steps.length * 100 + 'vh' : undefined,
    onStatus: value => { status.current = value; sync.current?.() },
    onFlow: value => { flow.current = value; sync.current?.() },
  })
  const currentScene = React.useRef(scene)
  currentScene.current = scene
  // after mount only (server markup stays fully usable), and never under reduced
  // motion, where the shots stack in flow and must all stay reachable. Live:
  // a switch mid-session drops or restores inert/aria-hidden immediately.
  const [interactive, setInteractive] = React.useState(false)
  useLayoutEffect(() => {
    const el = ref.current
    if (!el) return
    // Read the actual layout: failed boot, the watchdog and missing CSS all
    // leave static shots reachable. Only the crossfade hides inactive shots.
    const update = () => {
      const shot = el.querySelector('.st-shot')
      const stage = el.querySelector('.sv-stage')
      // Stack before the driver's first fit read, without hiding shots from AT.
      const empty = !shot
      const measuring = !empty && status.current === 'attaching' && !el.hasAttribute('data-sv-flow') && !prefersReducedMotion()
      let ready = !empty && status.current === 'active' && !flow.current && !prefersReducedMotion() && inertSupported
      if (ready || measuring) el.classList.remove('st-static')
      el.classList.toggle('st-measuring', measuring)
      el.classList.toggle('st-ready', ready)
      ready = ready && !!stage && getComputedStyle(stage).position === 'sticky' &&
        !!shot && getComputedStyle(shot).position === 'absolute'
      const fit = el.querySelector<HTMLElement>('[data-sv-fit]')
      // Keep the candidate's stage constrained until the driver reads overflow.
      // Expanding it here would swallow the fit latch on content replacement.
      const pendingFit = ready && !!fit && Math.max(fit.offsetHeight, fit.scrollHeight) > stage!.clientHeight + 1
      ready = ready && !!fit && Math.max(fit.offsetHeight, fit.scrollHeight) <= stage!.clientHeight + 1
      el.classList.toggle('st-measuring', measuring || pendingFit)
      el.classList.toggle('st-ready', ready)
      el.classList.toggle('st-static', !ready && !pendingFit && (empty || status.current !== 'attaching'))
      el.querySelectorAll('.st-shot').forEach((shot, i) => {
        // Set both directions even when React batches reduce then auto into
        // one render whose interactive state has not changed.
        if (ready && i !== currentScene.current) {
          shot.setAttribute('inert', '')
          shot.setAttribute('aria-hidden', 'true')
        } else {
          shot.removeAttribute('inert')
          shot.removeAttribute('aria-hidden')
        }
      })
      setInteractive(ready)
      // Candidate probing writes classes too. Do not observe our own writes
      // again, especially when missing CSS rejects that candidate.
      observer?.takeRecords()
      if (pendingFit) refreshFit()
    }
    let observer: MutationObserver | undefined
    let stopMotion: (() => void) | undefined
    let stopped = false
    const stop = () => {
      if (stopped) return
      stopped = true
      sync.current = undefined
      const attempt = (fn: () => void) => { try { fn() } catch { /* continue settling this controller */ } }
      attempt(() => observer?.disconnect())
      attempt(() => stopMotion?.())
      attempt(() => el.classList.remove('st-measuring'))
      attempt(() => el.classList.remove('st-ready'))
      attempt(() => el.classList.add('st-static'))
      el.querySelectorAll('.st-shot').forEach(shot => {
        attempt(() => shot.removeAttribute('inert'))
        attempt(() => shot.removeAttribute('aria-hidden'))
      })
      setInteractive(false)
    }
    const fail = (error: unknown) => {
      if (stopped) return
      stop()
      try { console.error('[scrollvars] StickySteps enhancement failed', error) } catch { /* reporting is best effort */ }
    }
    const refresh = () => {
      if (stopped) return
      try { update() } catch (error) { fail(error) }
    }
    sync.current = refresh
    try {
      observer = new MutationObserver(refresh)
      observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
      observer.observe(el, { attributes: true, attributeFilter: ['class', 'data-sv-flow'] })
      stopMotion = onMotionChange(refresh)
      if (stopped) { stopMotion(); return stop }
      refresh()
      // The first fit must run next frame, including for an offscreen section.
      if (!stopped && status.current === 'attaching') refreshFit()
    } catch (error) { fail(error) }
    return stop
  }, [ref])
  useLayoutEffect(() => { sync.current?.() }, [scene, steps])
  return (
    <div ref={ref} className={className ? 'sv-steps ' + className : 'sv-steps'}>
      <style nonce={nonce} dangerouslySetInnerHTML={{ __html: css }} />
      <div className="sv-stage"><div data-sv-fit="" className="st-grid">
        <div className="st-media">
          {steps.map((s, i) => (
            <figure
              key={i}
              className="st-shot"
              style={{ '--i': i } as React.CSSProperties}
              {...(interactive && i !== scene ? INERT : {})}
              aria-hidden={interactive && i !== scene ? true : undefined}
            >
              {s.media}
            </figure>
          ))}
        </div>
        <ol className="st-steps">
          {steps.map((s, i) => (
            <li key={i} style={{ '--i': i } as React.CSSProperties}>
              <b>{s.label ?? 'Step ' + (i + 1)}</b>
              <h3>{s.title}</h3>
              {s.text && <p>{s.text}</p>}
            </li>
          ))}
        </ol>
        <div className="st-dots" aria-hidden="true">
          {steps.map((_, i) => (
            <i key={i} style={{ '--i': i } as React.CSSProperties} />
          ))}
        </div>
      </div></div>
    </div>
  )
}

```

## Stats count-up (stats-countup)

Numbers count from zero when the block enters. CSS counters + a registered property. The transition IS the animation.
Category: Sections
Use for: Proof strips ("248 sites shipped"), pricing pages, investor-style KPI rows.
Knobs: --sv-max per number, --sv-acts-duration (count time), data-suffix ("%", "+", "k"), --sv-acts-count stays 1
Install: npx scrollvars add stats-countup
Styles: scrollvars/styles/core.css, scrollvars/styles/state.css


### React
```tsx
// ScrollVars fx · stats-countup
// Requires: npm i scrollvars · import 'scrollvars/styles/core.css' and 'scrollvars/styles/state.css'
// state.css owns sv-acts; core.css declares --sv-live, and the acts clock is
// calc(var(--sv-live) * var(--sv-acts-count)): without core.css every number
// renders 0 the moment the driver boots.
// Numbers count from zero when the block enters: a CSS counter driven by the
// registered --sv-act transition. No JS, no innerText. Without JS or under
// reduced motion the final numbers render immediately.
// The CSS below is one constant string, injected as raw HTML: a <style> child
// is escaped by React 18's server renderer (`>` becomes `&gt;`, dropping every
// child-combinator rule), and <style> is raw text, so the entity never decodes.
// CSP is unchanged from any inline <style>: allow it with a style-src nonce or
// hash, or lift this string into your own stylesheet.
'use client'
import * as React from 'react'
import { Track } from 'scrollvars/react'

const css = `
.sv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin: 0; }
.sv-stats > div { display: flex; flex-direction: column; padding: 22px 12px; border-radius: 14px; border: 1px solid rgba(128,128,128,.25); text-align: center; }
.sv-stats dt { order: 2; font-size: 13px; margin-top: 8px; opacity: .7; }
.sv-stats dd { margin: 0; font-size: clamp(34px, 6vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sv-stats .stat { counter-reset: n calc(var(--sv-act, 1) * var(--sv-max)); }
.sv-stats .stat .count::after { content: counter(n) attr(data-suffix); }
html:not(.sv-on) .sv-stats .stat { counter-reset: n var(--sv-max); }
@media (prefers-reduced-motion: reduce) { .sv-stats .stat { counter-reset: n var(--sv-max); } }
:where([data-sv-motion="reduce"]) .sv-stats .stat { counter-reset: n var(--sv-max); }
`

// aria-label is prohibited on generic roles (p/span/div). Axe
// `aria-prohibited-attr`: so the readable text is a visually-hidden child.
const SR_ONLY: React.CSSProperties = {
  position: 'absolute',
  width: 1,
  height: 1,
  overflow: 'hidden',
  clipPath: 'inset(50%)',
  whiteSpace: 'nowrap',
}

export interface Stat {
  label: React.ReactNode
  value: number
  suffix?: string
}

export function StatsCountup({
  stats,
  duration = 1.8,
  className,
  nonce,
}: {
  stats: Stat[]
  /** Seconds the count takes. */
  duration?: number
  className?: string
  nonce?: string
}) {
  return (
    <Track
      once
      className={className ? 'sv-acts ' + className : 'sv-acts'}
      style={{ '--sv-acts-count': 1, '--sv-acts-duration': duration + 's' } as React.CSSProperties}
    >
      <style nonce={nonce} dangerouslySetInnerHTML={{ __html: css }} />
      <dl className="sv-stats">
        {stats.map((s, i) => (
          <div key={i}>
            <dt>{s.label}</dt>
            {/* both halves sit INSIDE the dd: a dl group takes dt/dd only (a loose
                span there is not in the content model), and a term whose only dd
                is aria-hidden reaches assistive tech with no definition at all */}
            <dd className="stat" style={{ '--sv-max': s.value } as React.CSSProperties}>
              <span style={SR_ONLY}>{s.value}{s.suffix ?? ''}</span>
              <span className="count" data-suffix={s.suffix ?? ''} aria-hidden="true" />
            </dd>
          </div>
        ))}
      </dl>
    </Track>
  )
}

```

## Case-study rail (case-study-rail)

Oversized project cards traverse a pinned stage with --sv-pin; long content returns to a readable list.
Category: Sections
Use for: Studio portfolios and selected-work sections. Container units enable the animation; older engines get a native horizontal rail.
Knobs: title, projects, href, --work-accent; cards are non-interactive, the optional CTA stays after the rail
Install: npx scrollvars add case-study-rail
Styles: scrollvars/styles/pin.css


### React
```tsx
// ScrollVars fx · case-study-rail
// Requires: npm i scrollvars · import 'scrollvars/styles/pin.css'
'use client'
import * as React from 'react'
import { Track } from 'scrollvars/react'

const css = `
.sv-casework { --work-accent: #c5f36b; color: #f3f0e8; background: #171a16; }
.sv-casework .work-head { padding: 48px clamp(24px, 5vw, 72px) 24px; }
.sv-casework h2 { font-size: clamp(36px, 7vw, 88px); letter-spacing: -.055em; line-height: 1; margin: 12px 0; }
.sv-casework .work-stage { display: flex; align-items: center; }
.sv-casework .work-fit { width: 100%; }
.sv-casework .work-rail { display: flex; gap: 24px; width: max-content; padding: 24px; box-sizing: border-box; }
.sv-casework .work-card { flex: none; width: min(70vw, 800px); padding: clamp(20px, 4vw, 48px); box-sizing: border-box; border: 1px solid #ffffff30; border-radius: 12px; }
.sv-casework .work-art { height: clamp(100px, 30vh, 280px); border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 65% 40%, var(--work-accent) 0 18%, transparent 18.5%), repeating-linear-gradient(135deg, #303d28 0 40px, #263020 40px 80px); }
.sv-casework .work-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-casework .work-meta { display: flex; justify-content: space-between; margin: 22px 0 12px; color: var(--work-accent); font: 12px monospace; text-transform: uppercase; }
.sv-casework h3 { font-size: clamp(28px, 5vw, 54px); line-height: 1.05; margin: 0 0 12px; letter-spacing: -.04em; }
.sv-casework .work-card:nth-child(2n) { --work-accent: #9ee4ee; }
.sv-casework .work-card:nth-child(3n) { --work-accent: #ff9d73; }
.sv-casework .work-card p { max-width: 44ch; margin: 0; line-height: 1.5; }
.sv-casework .work-footer { padding: 28px; text-align: right; }
.sv-casework .work-footer a { color: inherit; }
/* This rail starts at its first card. cqw measures the real stage, not the page. */
@supports (width: 1cqw) {
  .sv-casework .work-stage { container-type: inline-size; }
  .sv-casework .work-card { width: min(80cqw, 800px); }
  .sv-on .sv-casework .work-rail { transform: translateX(calc(var(--sv-pin, 0) * min(100cqw - 100%, 0px))); will-change: transform; }
}
html:not(.sv-on) .sv-casework .work-rail,
.sv-casework [data-sv-flow] .work-rail,
.sv-casework [data-sv-off] .work-rail { width: auto; flex-wrap: wrap; transform: none; will-change: auto; }
html:not(.sv-on) .sv-casework .work-card,
.sv-casework [data-sv-flow] .work-card,
.sv-casework [data-sv-off] .work-card { width: 100%; }
/* below the cqw floor: wrap like no-JS instead of a keyboard-unreachable
   horizontal scroller (WCAG 2.1.1, no tabindex on the scroller). */
@supports not (width: 1cqw) {
  .sv-casework > .sv { height: auto !important; }
  .sv-casework .work-stage { height: auto; position: static; }
  .sv-casework .work-rail { width: auto; flex-wrap: wrap; transform: none; will-change: auto; }
  .sv-casework .work-card { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-on .sv-casework .work-rail { width: auto; flex-wrap: wrap; transform: none; will-change: auto; }
  .sv-casework .work-card { width: 100%; }
}
/* the same under html[data-sv-motion="reduce"], the site's own switch */
.sv-on:where([data-sv-motion="reduce"]) .sv-casework .work-rail { width: auto; flex-wrap: wrap; transform: none; will-change: auto; }
:where([data-sv-motion="reduce"]) .sv-casework .work-card { width: 100%; }
`

export interface CaseStudy {
  title: string
  summary: string
  category: string
  image?: { src: string; alt: string }
}

export function CaseStudyRail({ title = 'Selected work', projects, href, className, nonce }: {
  title?: string
  projects: CaseStudy[]
  /** One link after the rail; the moving cards are deliberately non-interactive. */
  href?: string
  className?: string
  nonce?: string
}) {
  return (
    <section className={className ? 'sv-casework ' + className : 'sv-casework'}>
      <style nonce={nonce} dangerouslySetInnerHTML={{ __html: css }} />
      <header className="work-head"><small>Independent thinking · tangible results</small><h2>{title}</h2></header>
      <Track pin={Math.max(projects.length, 1) * 100 + 'vh'}>
        <div className="sv-stage work-stage"><div className="work-fit" data-sv-fit="">
          <div className="work-rail">
            {projects.map((project, i) => <article className="work-card" key={i}>
              <div className="work-art">{project.image && <img src={project.image.src} alt={project.image.alt} />}</div>
              <div className="work-meta"><span>{String(i + 1).padStart(2, '0')}</span><span>{project.category}</span></div>
              <h3>{project.title}</h3><p>{project.summary}</p>
            </article>)}
          </div>
        </div></div>
      </Track>
      {href && <footer className="work-footer"><a href={href}>Explore all projects →</a></footer>}
    </section>
  )
}

```

## Editorial manifesto (editorial-manifesto)

Big statements gain contrast in sequence as --sv-t advances. Natural document flow, no pin and no split spans.
Category: Sections
Use for: Studio manifestos, brand positioning and editorial introductions.
Knobs: label, paragraphs, closing; --sv-t drives a clamped slice per paragraph
Install: npx scrollvars add editorial-manifesto
Styles: included


### React
```tsx
// ScrollVars fx · editorial-manifesto
// Requires: npm i scrollvars · no preset stylesheet required
'use client'
import * as React from 'react'
import { Track } from 'scrollvars/react'

const css = `
.sv-manifesto { background: #e9e4db; color: #232722; padding: clamp(40px, 9vw, 128px) clamp(24px, 6vw, 88px); }
.sv-manifesto .manifesto-label { display: flex; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid currentColor; font: 12px monospace; text-transform: uppercase; }
.sv-manifesto .manifesto-copy { padding-block: 32px; }
.sv-manifesto .manifesto-copy p { font-size: clamp(30px, 5.8vw, 82px); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; margin: 0 0 .55em; }
.sv-on .sv-manifesto .manifesto-copy p { --read: clamp(0, calc(var(--sv-t, 1) * (var(--count) + 1) - var(--i)), 1); opacity: calc(.55 + .45 * var(--read)); } /* the floor keeps unread copy at 3:1 on this paper (axe, large text) */
.sv-manifesto .manifesto-end { max-width: 36ch; margin-left: auto; font-size: 16px; line-height: 1.6; }
[data-sv-off].sv-manifesto .manifesto-copy p { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sv-on .sv-manifesto .manifesto-copy p { opacity: 1; } }
/* the same under html[data-sv-motion="reduce"], the site's own switch */
.sv-on:where([data-sv-motion="reduce"]) .sv-manifesto .manifesto-copy p { opacity: 1; }
`

export function EditorialManifesto({ label = 'What we believe', paragraphs, closing, className, nonce }: {
  label?: string
  paragraphs: string[]
  closing?: string
  className?: string
  nonce?: string
}) {
  return <Track as="section" travel className={className ? 'sv-manifesto ' + className : 'sv-manifesto'} style={{ '--count': paragraphs.length } as React.CSSProperties}>
    <style nonce={nonce} dangerouslySetInnerHTML={{ __html: css }} />
    <header className="manifesto-label"><span>{label}</span><span>Scroll to read ↓</span></header>
    <div className="manifesto-copy">{paragraphs.map((text, i) => <p key={i} style={{ '--i': i } as React.CSSProperties}>{text}</p>)}</div>
    {closing && <p className="manifesto-end">{closing}</p>}
  </Track>
}

```

## Cube windows (cube-windows)

A box turns in 3D as the section scrolls by and tilts to the pointer; its outline becomes the clip-path of the photo inside. The photo itself never moves.
Category: Pointer
Use for: Portfolio thumbnails, about-page portraits, product shots. Anywhere a plain crop feels flat.
Knobs: box (width, height, depth, a share of the element), turn (ry0 ry1 rx0 rx1 radians across the scroll travel); pointer tilt is built in
Install: npx scrollvars add cube-windows
Styles: included

### Tailwind
```html
<div class="cube-window relative aspect-[4/3] overflow-hidden rounded-xl">
  <img src="photo.jpg" alt="A photo of the studio" class="block h-full w-full object-cover">
</div>
<!-- same mount script as the CSS tab; Tailwind only styles the box and the image -->
```

### CSS
```html
<div class="cube-window">
  <img src="photo.jpg" alt="A photo of the studio">
</div>

<script type="module">
import { track, prefersReducedMotion, onMotionChange } from 'scrollvars'

// mask3d-core: the projection math. Kept commented in its own TypeScript
// source (scripts/fx-lib/mask3d-core.ts in the scrollvars repo, unit-tested
// there); this is the plain-JS build of it, so read the source for why the
// union of faces works if you are going to edit this.
function corners(box, pose, focal) {
  const { w, h, d } = box;
  const { ry, rx } = pose;
  const cosY = Math.cos(ry), sinY = Math.sin(ry);
  const cosX = Math.cos(rx), sinX = Math.sin(rx);
  const pts = [];
  for (let i = 0; i < 8; i++) {
    let x = (i & 1 ? 0.5 : -0.5) * w, y = (i & 2 ? 0.5 : -0.5) * h, z = (i & 4 ? 0.5 : -0.5) * d;
    [x, z] = [x * cosY + z * sinY, -x * sinY + z * cosY];
    [y, z] = [y * cosX - z * sinX, y * sinX + z * cosX];
    const s = focal / (focal + z);
    pts.push([x * s, y * s]);
  }
  return pts;
}
function hull(points) {
  const sorted = [...points].sort((a, b) => a[0] - b[0] || a[1] - b[1]);
  const cross = (o, a, b) => (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
  const half = (list) => {
    const out = [];
    for (const q of list) {
      while (out.length >= 2 && cross(out[out.length - 2], out[out.length - 1], q) <= 0) out.pop();
      out.push(q);
    }
    return out.slice(0, -1);
  };
  return [...half(sorted), ...half([...sorted].reverse())];
}
const r1 = (n) => Math.round(n * 10) / 10;
function toClipPath(points, ox, oy, scale) {
  return `polygon(${points.map(([x, y]) => `${r1(ox + x * scale)}px ${r1(oy + y * scale)}px`).join(",")})`;
}
function bounds(box, poses, focal) {
  let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
  for (const pose of poses) {
    for (const [x, y] of corners(box, pose, focal)) {
      x0 = Math.min(x0, x);
      x1 = Math.max(x1, x);
      y0 = Math.min(y0, y);
      y1 = Math.max(y1, y);
    }
  }
  return { x0, x1, y0, y1 };
}

function cubeWindowNumbers(value, count) {
  const list = String(value ?? '').trim().split(/\s+/).map(Number)
  return list.length === count && list.every(Number.isFinite) ? list : null
}

function mountCubeWindow(el, boxSize, turn) {
  // Below Safari 13.1 without compat(): fail visible, not fail loud. No
  // clip-path is ever set, so the whole photo stays visible, same contract
  // as the no-JS/old-engine case below.
  if (typeof ResizeObserver !== 'function') return () => {}
  const FOCAL = 2.4, HOVER = { y: .5, x: .35 }, MARGIN = 6, EASE = .12
  const box3 = { w: boxSize[0], h: boxSize[1], d: boxSize[2] }
  const [ry0, ry1, rx0, rx1] = turn
  const poseAt = (t, hx, hy) => ({
    ry: ry0 + (ry1 - ry0) * t + hx * HOVER.y,
    rx: rx0 + (rx1 - rx0) * t - hy * HOVER.x,
  })

  let t = .5, fit = null, last = '', raf = 0
  const hover = { x: 0, y: 0 }, target = { x: 0, y: 0 }

  // Every pose the scroll travel times the pointer tilt can reach, so the
  // element fits the shape without cutting a corner off at either extreme.
  const refit = () => {
    const w = el.clientWidth, h = el.clientHeight
    if (!w || !h || (fit && fit.w === w && fit.h === h)) return false
    const poses = []
    for (let s = 0; s <= 20; s++)
      for (const hx of [-1, 0, 1]) for (const hy of [-1, 0, 1]) poses.push(poseAt(s / 20, hx, hy))
    const b = bounds(box3, poses, FOCAL)
    const k = Math.min((w - MARGIN * 2) / (b.x1 - b.x0), (h - MARGIN * 2) / (b.y1 - b.y0))
    fit = { w, h, k, ox: w / 2 - ((b.x0 + b.x1) / 2) * k, oy: h / 2 - ((b.y0 + b.y1) / 2) * k }
    return true
  }

  const draw = () => {
    if (!fit) return
    const still = prefersReducedMotion()
    const pose = poseAt(still ? .5 : t, still ? 0 : hover.x, still ? 0 : hover.y)
    const clip = toClipPath(hull(corners(box3, pose, FOCAL)), fit.ox, fit.oy, fit.k)
    if (clip !== last) { el.style.clipPath = clip; last = clip }
  }

  // Pointer inertia is the only loop of our own, and only while it settles.
  const settle = () => {
    raf = 0
    hover.x += (target.x - hover.x) * EASE
    hover.y += (target.y - hover.y) * EASE
    draw()
    if (Math.abs(target.x - hover.x) + Math.abs(target.y - hover.y) > .002) raf = requestAnimationFrame(settle)
  }
  const onMove = (e) => {
    if (prefersReducedMotion()) return
    const r = el.getBoundingClientRect()
    target.x = ((e.clientX - r.left) / r.width) * 2 - 1
    target.y = ((e.clientY - r.top) / r.height) * 2 - 1
    if (!raf) raf = requestAnimationFrame(settle)
  }
  const onLeave = () => { target.x = target.y = 0; if (!raf) raf = requestAnimationFrame(settle) }

  const ro = new ResizeObserver(() => { if (refit()) { last = ''; draw() } })
  ro.observe(el)
  refit()
  draw()
  el.addEventListener('pointermove', onMove)
  el.addEventListener('pointerleave', onLeave)
  const stopMotion = onMotionChange(() => { hover.x = hover.y = target.x = target.y = 0; draw() })
  // scrollvars: travel t (0..1) through the viewport, from its shared frame loop
  const stopTrack = track(el, { view: false, onTravel: (v) => { t = v; draw() } })

  return () => {
    stopTrack(); stopMotion(); ro.disconnect()
    el.removeEventListener('pointermove', onMove)
    el.removeEventListener('pointerleave', onLeave)
    if (raf) cancelAnimationFrame(raf)
    el.style.clipPath = '' // no JS / stopped: the whole photo shows again
  }
}

mountCubeWindow(
  document.querySelector('.cube-window'),
  [.9, .5, .5],      // width, height, depth: a share of the element
  [-1.4, .35, .8, -.1]   // ry0 ry1 rx0 rx1 (radians), across the scroll travel
)
</script>

.cube-window { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; }
.cube-window img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* no JS / old engines: no clip-path is ever set, so the whole photo stays visible */
```

### React
```tsx
// From the frontend package root (for example, apps/frontend):
// npm i scrollvars
// npx scrollvars add cube-windows --dir src/components/fx
// Creates src/components/fx/CubeWindows.tsx. Then, in src/app/page.tsx:
import { CubeWindows } from '../components/fx/CubeWindows'

function Portrait() {
  return (
    <CubeWindows box={[.9, .5, .5]} turn={[-1.4, .35, .8, -.1]}>
      <img src="photo.jpg" alt="A photo of the studio" />
    </CubeWindows>
  )
}
// CSS is included in the copied component. Install once; reuse it anywhere.
```