btahir

btahir / react-kino

Public

Cinematic scroll-driven storytelling for React

react-kino.dev component-library parallax parallax-scrolling react reactjs
13
0
100% credibility
Found Mar 02, 2026 at 13 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

react-kino is a lightweight React library providing declarative components for creating cinematic, scroll-driven animations and interactive storytelling experiences on websites.

How It Works

1
🔍 Discover scroll magic

You find react-kino, a simple way to make websites feel like smooth movies as people scroll.

2
📦 Add to your site

You easily connect the animation tools to your website project with one quick step.

3
✨ Create your first scene

You wrap a section of your page in a special container that pins it in place while content animates beautifully as you scroll.

4
Pick your style
⚡
Quick code

Type a short example to see fades, counters, and moving layers right away.

đź“„
Ready pages

Pick a full page template like product launch or portfolio and tweak the words and colors.

5
🛠️ Customize animations

Mix and match effects like elements sliding in, numbers counting up, or images moving at different speeds.

6
đź‘€ Preview and test

Scroll through a playground to see everything working perfectly before using it live.

🚀 Launch cinematic site

Your website now tells a captivating story with every scroll, delighting visitors.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 13 to 13 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is react-kino?

react-kino brings cinematic scroll-driven storytelling to React apps with TypeScript components for pinning scenes, parallax layers, text reveals, counters, video scrubbing, and horizontal scrolls. It solves the pain of building immersive landing pages without heavy libraries—drop in declarative components like `` or `` for Apple-style effects, all SSR-safe for Next.js. A CLI scaffolds full pages (product launches, portfolios) from templates, and a playground lets you tweak demos live.

Why is it gaining traction?

Its core scroll engine clocks under 1KB gzipped—15x smaller than GSAP ScrollTrigger—while delivering GPU-accelerated reveals, progress bars, and compare sliders without timelines or plugins. Developers hook on the zero-config setup: no deps, passive listeners, `prefers-reduced-motion` respect, and hooks like `useScrollProgress` for custom bits. Cinematic rendering feels native to React, not bolted-on.

Who should use this?

Frontend devs crafting scroll-heavy sites: product launch pages, case studies, or portfolios needing parallax heroes, sticky headers, or video-scroll sections. React/Next.js teams ditching GSAP bloat for lightweight, declarative alternatives. Avoid if you need complex timelines—stick to Framer Motion.

Verdict

Early days with 12 stars and 1.0% credibility score, but polished docs, playground, and Remotion demo videos show real potential—try the CLI or templates first. Solid for prototypes; watch for production stability as it matures.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.