Scroll stage
The conductor of a told page: chapters (Scene) that play their entrance once, in order, as they scroll into view — the visual, then the announcement, then the words — with one slow loop each, running only while on screen.
Web only — React, from @krizaka/ui/scroll-stage. Beta: its API may still change in a minor version.
When to use
- A page that tells a story in chapters: an about page, a product tour, a launch, a year in review.
- An onboarding or a long landing page whose sections should arrive one at a time, at reading speed.
- To give a whole page the arcade flavour of the storytelling kit at once (
variant="arcade").
When not to use
- Ordinary pages: blocks that simply fade in as they enter.Use instead: Page
- Working screens (a dashboard, a form, a table): nothing there should wait to appear.
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { ScrollStage, Scene } from "@krizaka/ui/scroll-stage";Examples
Chapters
Two chapters of an onboarding: each one's banner, then its words, then its gauge — once, as they scroll in.
Say who you are, in your words
Three questions, two photos. Nothing is public until you say so.
Arcade flavour
variant="arcade" once on the stage: a final round, the boss gauge draining.
Props
Scene
A chapter of a ScrollStage: played once when it enters the viewport, its loop running while it is visible.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "footer" | "header" | "li" | Polymorphic | section | The element the scene renders. |
brand | string | — | A brand scope for the scene (orochia → .brand-orochia): its accent and gradient become that brand's. |
ScrollStage
Plays the scenes (Scene, or any [data-kzs-scene]) it contains: each one gets data-in once, when it first enters
the viewport — its parts then arrive in order (the visual, the announcement, the words: data-kzs-reveal) — and
data-live while it is visible, which runs its one loop. Until the stage has switched motion on, and under
prefers-reduced-motion, everything is visible and still.
| Prop | Type | Default | Description |
|---|---|---|---|
as | Polymorphic | div | The element the stage renders. |
threshold | number | 0.2 | How much of a scene must be visible before it plays (0–1). |
variant | StoryVariant | default | The look of every storytelling component inside (each one can still set its own): default or arcade. |
Accessibility
- Under
prefers-reduced-motionthe stage never switches motion on: everything is visible and still. - Nothing is hidden from assistive technology or from a page without JavaScript: content is only held invisible once the stage is on, until its scene enters.
- Each scene has at most one loop, slow and faint, paused off screen and never behind a paragraph.
Best practices
- One
ScrollStageper page, around the chapters; oneSceneper chapter (asectionby default). - Mark the words of a chapter with
data-kzs-reveal: they arrive after its visual and its banner (--kzs-delayto change when). - Keep the first screen out of any scene's entrance: what the reader sees on arrival is painted at once.
- Import the kit's styles once:
import "@krizaka/ui/story.css".
Related components
Generated from the code of @krizaka/ui 2.9.0: its meta.ts, its examples and its types.Edit this documentation on GitHub