PlaygroundDocsGitHub

react-kino

Cinematic scroll-driven storytelling for React.
Core engine under 1 KB gzipped.

npm install react-kino
DocumentationPlaygroundGitHub
↓ scroll to explore
<Scene /><Reveal /><Parallax /><Counter /><TextReveal /><CompareSlider /><HorizontalScroll /><Progress /><VideoScroll /><Marquee /><StickyHeader /><Kino /><Scene /><Reveal /><Parallax /><Counter /><TextReveal /><CompareSlider /><HorizontalScroll /><Progress /><VideoScroll /><Marquee /><StickyHeader /><Kino />
<Scene>
0%

scene progress

<TextReveal>
Scroll-driven storytelling components for React. Build cinematic experiences without the complexity.
<Reveal>

Five entrance animations.

Each triggered by scroll progress.

fade
animation
fade-up
animation
fade-down
animation
scale
animation
blur
animation
<Counter>

Numbers that move.

Animated counters driven by scroll progress.

0.0 KB
Core (Gzip)
0.0 KB
React-Kino (Gzip)
0
Components
<CompareSlider>

Before & After.

Scroll-driven comparison slider.

{ }
Without react-kino
Static content
{ }
With react-kino
Cinematic scroll experience
◀▶
<Scene /><Reveal /><Parallax /><Counter /><TextReveal /><CompareSlider /><HorizontalScroll /><Progress /><VideoScroll /><Marquee /><StickyHeader /><Kino /><Scene /><Reveal /><Parallax /><Counter /><TextReveal /><CompareSlider /><HorizontalScroll /><Progress /><VideoScroll /><Marquee /><StickyHeader /><Kino />
<Scene>

Features worth scrolling for.

Two directions. One scroll.

//

Tiny Core Engine

Core runtime is under 1 KB gzipped.

<>

Declarative API

Compose scenes and animations like JSX.

>>

GPU Accelerated

CSS transforms and will-change for 60fps.

a11y

Accessible

Respects prefers-reduced-motion out of the box.

See Every Component.

Each clip shows a component in action — loop, watch, build.

<Scene />
<Marquee />
<StickyHeader />
<VideoScroll />
<HorizontalScroll />
<Progress />

The Full Arsenal.

0/15 unlocked · core engine under 1 KB gzipped

<Kino>

Kino

Root scroll tracker provider

<Scene duration="200vh">

Scene

Pinned scroll-driven scenes with progress

<Reveal animation="fade-up">

Reveal

Scroll-triggered entrance animations

<Parallax speed={0.5}>

Parallax

Depth-based scroll parallax effects

<TextReveal mode="word">

TextReveal

Progressive word-by-word text reveal

<Counter from={0} to={100}>

Counter

Scroll-animated number counters

<CompareSlider>

CompareSlider

Before & after comparison slider

<HorizontalScroll>

HorizontalScroll

Vertical scroll to horizontal motion

<Progress type="bar">

Progress

Global scroll progress indicators

<VideoScroll src="…">

VideoScroll

Frame-by-frame video scrubbing on scroll

<Marquee speed={40}>

Marquee

Infinite looping ticker animation

<StickyHeader>

StickyHeader

Scroll-aware fixed header with blur

Hooks

useScrollProgress()Global page scroll 0→1
useSceneProgress()Per-element scroll tracking
useIsClient()SSR hydration guard