# Scroll Showcase

> Scrollytelling for a product tour: steps scroll past while a pinned panel crossfades to each one's visual, with a line that fills as you go.

Category: Sections · MotionKit Plus · Updated 2026-10-21 · Live demo: https://motionkitui.com/components/scroll-showcase

## When to use it

Product tours and how-it-works sections: three to five steps, each with a screenshot, told at the reader's own pace.

## How it works

An IntersectionObserver with a thin band across the middle of the view marks whichever step is crossing it as active, whichever way you scroll. On wide screens a sticky panel shows the active step's visual, and AnimatePresence crossfades between visuals with a slight scale and blur. A line behind the step numbers fills on a spring to the active step. On phones the panel is dropped and each visual sits under its own step.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/scroll-showcase` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` | `ShowcaseStep[]` |  | Each step's title, description and visual. |
| `accent` | `string` | `"#5FAEB4"` | Colour of the progress line and active number. |
| `root` | `HTMLElement \| null` |  | A scrolling element to follow instead of the page. |

## Accessibility

- **Keyboard: Pass.** Nothing traps focus; your own links inside steps and visuals stay in reading order.
- **Screen readers: Pass.** Steps are an ordered list and the active one carries aria-current="step". On phones each visual sits right under its step.
- **Reduced motion: Pass.** With reduced motion on, the panel swaps with a short fade instead of scaling and blurring, and the line jumps rather than springs.
- **Colour contrast: Pass.** Step titles measure 17.0:1 and descriptions 7.7:1. Inactive steps dim to 75%, which keeps descriptions at 4.8:1.