Pin a stage and change scene as the page scrolls

At a glanceCopy Anchor Link

• Who: Developers telling a story in a few steps (one product shown in several looks, a feature tour, before/after) on a marketing or docs page.
• What: One stage stays under the header while the page scrolls; each scene fades in, holds, then fades out before the next. Pure CSS scroll-driven animation: no script, no scroll hijacking, native scrolling only.
• Use when: Two to eight (SCROLL_SCENES_MAX) short scenes that read well one at a time and where scrolling is the natural way to move on.
• Avoid when: Long content, forms or anything focusable inside a scene — invisible scenes stay in the accessibility tree, so keep scene visuals non-interactive (aria-hidden and inert); steps the user must pick themselves — use Tabs or WizardSteps.
• See also: Switch between tabbed panels

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.6.3 (via changesets).

ExampleCopy Anchor Link

import { ScrollScenes } from "@zedtech/zedkit-ui";
<ScrollScenes className="[--zk-scenes-top:4.5rem]" scenes={[
{ id: "mist", caption: <h3>Mist</h3>, children: <Preview /> },
{ id: "press", caption: <h3>Press</h3>, children: <Preview /> },
]} />

Wraps: none (CSS scroll-driven animation)