Scroll storyPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/scroll-story

• Markdown: https://ui.xzero.co.uk/components/blocks/scroll-story/markdown

• Access: Xzero Pro

• Registry id: scroll-story

• Source file: registry/blocks/scroll-story/scroll-story.tsx

• Built from: Motion

• Keywords: react scroll story, scrollytelling, sticky scroll section, scroll driven animation, product walkthrough on scroll, apple style scroll section

Use this on a marketing page to walk through a product in a few steps. Replace the step copy and the product states with your own.

When to use

• Marketing pages that walk through a product in a few steps as people scroll.
• Feature sections where a pinned product view should change with the copy.

When not to use

• Use scroll-highlight for a single paragraph that reveals with scroll.
• Use chaos-to-order for one before and after switch.
• Use feature-illustration for a static feature visual.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/scroll-story

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { ScrollStory } from "@/components/xzero/blocks/scroll-story/scroll-story";

export default function FeaturesSection() {
  return (
    <section>
      <ScrollStory />
    </section>
  );
}

API reference

ScrollStory

A feature section where scrolling the copy drives a pinned product view through four steps: messages arrive, sort by theme, fold into a trend and end in a share sheet. Takes no props; STEPS, MESSAGES, THEMES, TREND, TEAM and LINK are inline sample data in scroll-story.tsx, and sending to a channel is simulated.

No props.

Keyboard interactions

Keys	Action
Arrow left / Arrow right	On the step tabs, scrolls to the previous or next step.

Accessibility

• The scrolling viewport is a focusable, labelled region, so it scrolls with the keyboard.
• Step tabs use a tablist with roving tabindex, and the active step in the copy carries aria-current="step".
• The product status and copy link and send results are announced through polite live regions.

Motion

• Scroll position drives a progress value that fills the step tabs, sorts messages on springs and draws the trend line.
• Springs are restated as stiffness and damping, so retargeting mid-scroll keeps velocity.
• Reduced motion jumps to steps instead of smooth scrolling and replaces the springs with short fades.

Responsive behavior

• The story scrolls inside its own viewport of clamp(480px, 74vh, 600px), not the page.
• Below a 700px container the product view stacks above the copy and stays pinned while the steps scroll under it.

Performance

• Scroll is read in a passive listener and measured once per animation frame.
• Product states are memoized per step, so they do not re-render on every scroll frame.

Notes for AI

• Use on a marketing page to walk through a product in a few steps.
• Replace STEPS copy and the product states (MESSAGES, THEMES, TREND, TEAM, LINK) in scroll-story.tsx with your own.
• Below 700px the product view stacks above the copy and stays pinned; no extra layout work is needed.

Related

• Text reveal: Reveal a short piece of content with restrained motion.
• In-view title: Bring a section title in as it scrolls into view.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt