Component Playground

Creates a pinned, scroll-driven scene. Provides a progress value (0→1) to children as you scroll through its duration. Uses CSS position: sticky under the hood.

<Scene duration="200vh">
  {(progress) => (
    <div style={{ opacity: progress }}>
      {Math.round(progress * 100)}%
    </div>
  )}
</Scene>

Progressively reveals text as scroll progresses. Supports word-by-word, character-by-character, or line-by-line reveal modes.

<TextReveal
  mode="word"
  progress={progress}
  at={0}
  span={0.8}
>
  Your text reveals progressively
  as the user scrolls.
</TextReveal>

Reveals elements with entrance animations triggered at a specific scroll progress. Five built-in animations: fade, fade-up, fade-down, scale, and blur.

<Reveal
  animation="fade-up"
  at={0.3}
  duration={600}
>
  <div>I appear on scroll!</div>
</Reveal>

Animates numbers from a start value to an end value based on scroll progress. Supports custom formatting, easing, and configurable start/span ranges.

<Counter
  from={0}
  to={1000}
  progress={progress}
  at={0}
  span={0.8}
  format={(n) => n.toFixed(0)}
/>

Side-by-side comparison slider. Supports drag interaction (default) or scroll-driven mode. Drag the handle below to see it in action.

<CompareSlider
  before={<img src="before.jpg" />}
  after={<img src="after.jpg" />}
/>

{/* Or scroll-driven: */}
<CompareSlider
  scrollDriven
  progress={progress}
  before={...}
  after={...}
/>

Infinite looping horizontal ticker. Configurable speed, direction, and gap. Pauses on hover by default. Respects prefers-reduced-motion.

<Marquee speed={40} direction="left" pauseOnHover>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</Marquee>

Global scroll progress indicator. Three visual types: bar (horizontal/vertical), dots (discrete steps), and ring (circular SVG). Renders at a fixed viewport position.

<Progress
  type="bar"
  position="top"
  color="#dc2626"
/>

{/* Or with explicit progress: */}
<Progress
  type="ring"
  progress={progress}
  color="#dc2626"
  ringSize={48}
/>

Creates parallax scroll effects by moving elements at different speeds relative to scroll. Speed < 1 moves slower (background feel), speed > 1 moves faster (foreground). GPU-accelerated with CSS transforms.

<Parallax speed={0.5} direction="vertical">
  <img src="background.jpg" />
</Parallax>

<Parallax speed={1.5}>
  <div>I move faster than scroll</div>
</Parallax>

Converts vertical scrolling into horizontal panel movement. Wrap Panel children inside — each Panel takes up 100vw. Vertical scroll distance equals the number of panels × 100vh.

<HorizontalScroll>
  <Panel>
    <div>Slide 1</div>
  </Panel>
  <Panel>
    <div>Slide 2</div>
  </Panel>
  <Panel>
    <div>Slide 3</div>
  </Panel>
</HorizontalScroll>

Scrubs a video frame-by-frame based on scroll position — the same technique Apple uses in keynote product pages. Pins the video while scrubbing. Supports overlay content via render function children.

<VideoScroll
  src="/hero.mp4"
  duration="300vh"
  pin
>
  {(progress) => (
    <div style={{ opacity: progress > 0.5 ? 1 : 0 }}>
      Overlay content appears midway
    </div>
  )}
</VideoScroll>

A fixed header that transitions from transparent to an opaque background with optional backdrop blur after scrolling past a configurable threshold. The header at the top of this page is a live StickyHeader.

<StickyHeader
  threshold={80}
  background="rgba(0, 0, 0, 0.9)"
  blur
>
  <nav>Your nav content</nav>
</StickyHeader>

Root provider that initializes the global scroll tracker. All scroll-driven components must be wrapped inside Kino. Also exposes a useKino() hook for accessing the scroll tracker directly.

import { Kino, Scene, Progress } from "react-kino";

export default function App() {
  return (
    <Kino>
      <Progress type="bar" position="top" />
      <Scene duration="200vh">
        {(progress) => <div>{progress}</div>}
      </Scene>
    </Kino>
  );
}

Low-level hooks for custom scroll-driven logic.

const progress = useScrollProgress();
// 0 at top of page → 1 at bottom

const ref = useRef<HTMLDivElement>(null);
const progress = useSceneProgress(ref, 1000);

const isClient = useIsClient();
if (!isClient) return <Fallback />;