Give your story
a sense of motion.
Build cinematic pages in React. Tune the timing by eye.
Keep every scene, component, and line of code yours.
npm install react-kinoReact 18+ · MIT · No accountA story worth slowing down for.
A real scene. The same runtime your site uses.Scrub it. Change it. Make it yours.
A visual workflow.
A familiar codebase.
- 01
Compose your story
Start with a complete recipe, or bring your own components. Arrange scenes and give each layer its moment.
- 02
See what feels right
Scrub the real renderer. Drag timing handles. Preview a phone layout. Undo the experiment that went too far.
- 03
Take it with you
Export a small JSON document, commit it beside your code, and render it in your application. No hosted player required.
One story. Many possibilities.
Product launch
A confident introduction, a reason to care, and one clear next step.
Editorial essay
Three readable chapters for a visual narrative, with a natural mobile reading mode.
Case study
Move from problem to decisions to evidence without hiding the actual results.
Before & after
A balanced evidence story with two registered comparison panels.
Feature chapters
Three focused product chapters with a readable mobile flow.
Personal portfolio
A short introduction, selected work, and a human closing note.
Motion should never
get in the way.
Readable mobile layouts. A reduced-motion path. Automatic fallback when a pinned scene grows too tall. Your words should always have room.
Use Kino's components on their own or add Storyboard through a separate import. Your visitors don't download the editor.
Read the layout principles →