# ScrollVars: Client Project Integration Kit
The checklist for wiring ScrollVars into a real (typically Next.js) project.
Full API reference: [AGENTS.md](../AGENTS.md) · live patterns with source:
https://scrollvars.dev
## 1 · Install
**npm** (once published):
```bash
npm i scrollvars
```
**Local / monorepo** (`file:` dependency):
```jsonc
// package.json
"scrollvars": "file:../../../scrollvars" // adjust depth
```
```ts
// next.config.ts
transpilePackages: ['scrollvars']
```
⚠️ **pnpm COPIES `file:` dependencies** (it does not symlink them). After any
change to the lib, re-run `pnpm install` in the consuming workspace or the app
silently keeps the stale version.
Load the presets once, in the root layout:
```ts
import 'scrollvars/styles.css'
```
## 2 · Boot: pick one pattern per project
**Default (recommended): zero-wrapper.** One client component in the layout,
everything else stays RSC:
```tsx
// app/layout.tsx
import { ScrollVarsBoot } from 'scrollvars/react'
{children}
// any page/section: plain server components
```
Attributes: `data-sv` (track) · `data-sv-once` · `data-sv-pin` ·
`data-sv-travel` · `data-sv-scenes="4"`. Route-change nodes are picked up
automatically (MutationObserver).
**React components**: when you need callbacks or the attribute API:
```tsx
…
- a
- b
useTrack({ scenes: 4, onScene: setIndex })
```
**Vanilla**: `track(el, opts)` / `scan()` for non-React surfaces.
## 3 · Section-type → tool map
| Section | Tool |
| --- | --- |
| Hero / entrance | `` or `data-sv data-sv-once` + `sv-rise` children |
| Editorial with per-child control | `- ` (compiles to the vars) |
| Continuous parallax | `` / `sv-drift` |
| Pinned storytelling | `` or `data-sv-scenes` + scene-slice CSS |
| Curtain / horizontal rail / card pile / reading / counter | presets: `sv-curtain-l/r`, `sv-rail`, `sv-deck`, `sv-reading`, `sv-counter` |
| Carousel / slider (any kind) | `` + ``: **never Swiper**; vanilla: `slider(el)` |
| Logo strip / infinite band | `