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.
Scroll inside
Point it at your database or warehouse. Tables appear in seconds, already typed.
Sources
Type a question the way you'd ask a colleague, and get a chart back.
Assistant
Every chart is a live link your team can open, comment on and trust.
Report
Sources
Customize
Usage
import { ScrollShowcase } from "@/components/motionkit/scroll-showcase";
<ScrollShowcase
steps={[
{ title: "Connect your data", description: "Tables appear in seconds.", visual: <img src="/connect.png" alt="" /> },
{ title: "Ask anything", description: "Get a chart back.", visual: <img src="/ask.png" alt="" /> },
{ title: "Share the answer", description: "Every chart is a live link.", visual: <img src="/share.png" alt="" /> },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Panel crossfade
A new step reaches the middle
Progress line
A new step reaches the middle
Product tours and how-it-works sections: three to five steps, each with a screenshot, told at the reader's own pace.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/scroll-showcase. It saves the file to components/motionkit and installs its dependencies.
Scroll Showcase is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the panel swaps with a short fade instead of scaling and blurring, and the line jumps rather than springs.
Bento Grid
A feature grid in tiles of different sizes: they rise in turn, one border light follows the pointer across them all, and each tile's visual comes alive.
Pricing Section
A complete pricing table: a sliding monthly/yearly switch, prices that roll to their new digits and a featured plan with an orbiting light.
Launch Hero
A complete landing-page hero: a pointer-lit grid, a headline that rises word by word and a product window that tilts flat as you scroll.
Scroll inside
Point it at your database or warehouse. Tables appear in seconds, already typed.
Sources
Type a question the way you'd ask a colleague, and get a chart back.
Assistant
Every chart is a live link your team can open, comment on and trust.
Report
Sources
Customize
Usage
import { ScrollShowcase } from "@/components/motionkit/scroll-showcase";
<ScrollShowcase
steps={[
{ title: "Connect your data", description: "Tables appear in seconds.", visual: <img src="/connect.png" alt="" /> },
{ title: "Ask anything", description: "Get a chart back.", visual: <img src="/ask.png" alt="" /> },
{ title: "Share the answer", description: "Every chart is a live link.", visual: <img src="/share.png" alt="" /> },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Panel crossfade
A new step reaches the middle
Progress line
A new step reaches the middle
The live preview is free to explore. Plus unlocks the source for Scroll Showcase and every other premium component.