Cinematic Scroll Studio

Scroll-driven stories for React

Cinematic Scroll Studio — build scroll-driven stories with pinned scenes, parallax and five reveals, then export the JSX

How to use Cinematic Scroll Studio

  1. Start from a recipe or add your own scenes
  2. Edit text, reveal animation and duration
  3. Scrub the progress bar to preview
  4. Copy the JSX or the portable .kino.json
  5. Install react-kino and render the story

Features

  • All 6 real react-kino recipes
  • 13 real components with real props
  • Exact Reveal hidden and visible styles
  • Scrubbable scroll preview with counter
  • Portable .kino.json document export

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.