Getting Started

Installation

npm install react-kino

pnpm add react-kino

yarn add react-kino

Requirements: React 18+

Quick Start

Wrap your app with <Kino>, add a <Scene>, and you have a pinned scroll section:

import { Kino, Scene, Reveal, Counter } from "react-kino";
 
function App() {
  return (
    <Kino>
      <Scene duration="300vh">
        {(progress) => (
          <div style={{ height: "100vh", display: "grid", placeItems: "center" }}>
            <Reveal animation="fade-up" at={0}>
              <h1>Welcome</h1>
            </Reveal>
 
            <Reveal animation="scale" at={0.3}>
              <p>Scroll-driven storytelling, made simple.</p>
            </Reveal>
 
            <Reveal animation="fade" at={0.6}>
              <Counter from={0} to={10000} format={(n) => `${n.toLocaleString()}+ users`} />
            </Reveal>
          </div>
        )}
      </Scene>
    </Kino>
  );
}

That is a complete scroll experience: the section pins in place, content fades in at different scroll points, and a number counts up -- all in ~20 lines.

Why react-kino

• Tiny -- the core scroll engine is under 1 KB gzipped. GSAP ScrollTrigger alone is 33 KB.
• Declarative -- compose <Scene>, <Reveal>, <Parallax>, and <Counter> like regular React components. No imperative timelines.
• Lightweight runtime -- react-kino uses a tiny internal engine package (@kino/core) plus React peers.
• SSR-safe -- every component renders children on the server and animates on the client.

SSR / Next.js

react-kino is SSR-safe and defers scroll logic to useEffect.

// app/page.tsx
"use client";
import { Kino, Scene, Reveal } from "react-kino";
 
export default function Page() {
  return (
    <Kino>
      <Scene duration="200vh">
        <Reveal animation="fade-up">
          <h1>Works with App Router</h1>
        </Reveal>
      </Scene>
    </Kino>
  );
}

What happens on the server: Components render their children immediately with no animation styles. Scroll tracking starts after hydration on the client.

Accessibility

react-kino respects the prefers-reduced-motion media query:

• <Reveal> -- content renders immediately in its visible state
• <Parallax> -- parallax offset is disabled
• <Counter> -- displays the final value immediately

No additional configuration is required.

Animation Engine

react-kino uses a lightweight JavaScript scroll engine with CSS transforms and opacity transitions:

1. Shared scroll tracker -- one provider can drive all scroll subscribers.
2. requestAnimationFrame batching -- updates are coalesced for smoother rendering.
3. GPU-friendly styles -- reveal/parallax use transform and opacity.

Browser Support