Reference

Architecture

Four packages sharing one design: @macrulez/inview-core does the actual work with zero framework dependency — createScrollEngine, createVisibilityEngine, createElementTracker. All three read from a single shared rafLoop (one requestAnimationFrame callback for the whole engine, instead of every scroll/tracker subscription running its own), and visibility observation goes through a shared, pooled ObserverPool (native IntersectionObserver instances pooled by (root, rootMargin, threshold)). createRevealController and createScrollSpy are two further core primitives built on the same pooled visibility engine — createRevealController via a MutationObserver-driven DOM scan rather than a per-element subscription, createScrollSpy via a single shared observer across every target it's given, reporting whichever one is earliest in the list when more than one intersects at once. scrollToElement is a standalone utility, not built on the visibility engine at all — it just resolves an element's getBoundingClientRect() once and calls the target's native scrollTo().

@macrulez/inview-vue and @macrulez/inview-react are both thin adapters over these same engines — reactive Refs for Vue, useSyncExternalStore for React — with useParallaxLayer, useScrollSpy, and the lifecycle wrappers (useRevealController on both sides, useReveal on React) as the composables/hooks that add their own logic on top, rather than just forwarding engine state; usePrefersReducedMotion, useStagger, and useScrollTo are thinner reactive/passthrough wrappers around the matching core utility. Both adapters also re-export the full @macrulez/inview-core surface, so createRevealController, createScrollSpy, and the other engines never need a separate core install. Vue additionally wraps the visibility engine in a v-reveal directive and an <InView> renderless component — both thin, sharing the same underlying engine instance as useElementVisibility. React has its own <InView> (a render-prop component, not a scoped slot) plus an <InviewProvider>/ useInviewDefaults() context pair — the React equivalent of Vue's viewportDefaults/setViewportDefaults(), read by both useElementVisibility and <InView> — and a useReveal hook, the React equivalent of v-reveal, built on top of useElementVisibility the same way. @macrulez/inview-nuxt adds nothing of its own beyond auto-imports, registering v-reveal and <InView> globally, and a client-side plugin that seeds the Vue package's shared defaults from nuxt.config.ts.

SSR compatibility

Every core engine and every composable/hook is SSR-safe on its own: without a window (or without IntersectionObserver), each one returns a static, zero-value snapshot instead of throwing, and starts a real subscription only once it's actually running on the client. No package requires <ClientOnly> anywhere — including the Nuxt module, whose client-only plugin only seeds defaults, not the composables' core SSR-safety.

Bundle size & peer dependencies

@macrulez/inview-core has no peer dependencies at all — it's usable standalone in any environment, including outside a framework entirely. @macrulez/inview-vue depends on @macrulez/inview-core and peers on vue: ^3.3.0. @macrulez/inview-react depends on @macrulez/inview-core and peers on react: ^18.0.0 || ^19.0.0. @macrulez/inview-nuxt depends on @macrulez/inview-vue and @nuxt/kit, and peers on nuxt: ^3.9.0 || ^4.0.0. All four ship sideEffects: false.

Development

A pnpm workspaces monorepo (packages/* + a Vite + Vue playground).

pnpm install

pnpm test        # tests for every package (vitest)
pnpm build       # build core/vue/react/nuxt (tsup)
pnpm dev         # playground on Vite
pnpm typecheck   # build + tsc/vue-tsc across every package

Packages are linked via workspace:* — pnpm build builds core before the packages that depend on it automatically (pnpm's topological order). The vue/react test suites resolve @macrulez/inview-core straight from its src/ via a Vitest alias, so pnpm test doesn't need a prior build — but typechecking the adapters resolves core through its built dist, so run pnpm build after editing core before pnpm typecheck.

License

MIT.