HN Showcase
Back to browse
GitHub Repository

Cinematic scroll-driven storytelling for React

210 starsTypeScript

React-Kino – Cinematic scroll storytelling for React (1KB core)

by bilater·Mar 1, 2026·19 points·2 comments
Visit ProjectView on HN

AI Analysis

●●●BangerSlickWizardryShip It

1KB scroll engine that replaces 33KB GSAP—same technique, zero dependencies.

Strengths
  • •Declarative component API (Scene, Reveal, Parallax) versus imperative timelines.
  • •SSR-safe and respects prefers-reduced-motion for accessibility.
  • •Achieves cinematic effects with CSS sticky positioning, not animation libraries.
Weaknesses
  • •Limited to scroll-driven animations—doesn't handle click/interaction timelines like GSAP.
  • •Browser support unclear; sticky positioning has quirks on older Safari versions.
Target Audience

React developers building scroll-heavy landing pages and marketing sites

Similar To

GSAP ScrollTrigger · Lenis · AOS (Animate On Scroll)

Post Description

I built react-kino because I wanted Apple-style scroll experiences in React without pulling in GSAP (33KB for ScrollTrigger alone).

The core scroll engine is under 1KB gzipped. It uses CSS position: sticky with a spacer div for pinning — same technique as ScrollTrigger but with zero dependencies.

12 declarative components: Scene, Reveal, Parallax, Counter, TextReveal, CompareSlider, VideoScroll, HorizontalScroll, Progress, Marquee, StickyHeader.

SSR-safe, respects prefers-reduced-motion, works with Next.js App Router.

Demo: https://react-kino.dev GitHub: https://github.com/btahir/react-kino npm: npm install react-kino

Similar Projects

AI/ML●Mid

Seedance 2.0 - Create cinematic AI videos from text and images

The landing sells a single-click workflow with claims like native multi-shot consistency, precise sync, and 2K output — all features that would matter if they actually work across shots and characters. The site looks cinematic and confident, but this space is crowded; I want to see technical demos (side-by-side clips, failure cases, latency and pricing) before believing the headline.

SlickBold Bet
Sharon111
514mo ago