MiniDev UI

Scroll Story

A scrollytelling section: steps scroll on one side while a pinned visual swaps as each reaches mid screen and a progress rail fills. Inline on mobile.

src/registry/blocks/scroll-story.tsx/r/scroll-story.json

Installation#

bash
npx shadcn@latest add https://ui.minidev.pro/r/scroll-story.json

Usage#

tsx
import { ScrollStory } from "@/components/ui/scroll-story"

export function Example() {
  return <ScrollStory />
}

API reference#

ScrollStory props
PropTypeDefault
eyebrowstring"How it works"
titleReact.ReactNode"Live in an afternoon."
stepsStep[]STEPS
classNamestring-

Dependencies#

npm

lucide-reactmotion

Built from

No other MiniDev files

Related landing pages components#

Bento LiveA React bento feature grid where each tile runs a live demo: a rolling MRR counter, a typed AI answer, ranked alerts and an orbiting integrations ring.Changelog PageA Tailwind changelog card listing releases with a monospace version, tag badge, date, title and summary, separated by hairline dividers.Cta BandA closing CTA section with a large lit headline and an inline email form whose button animates from idle to sending to a success check. Async onSubmit.Faq SectionAn FAQ section with a heading column and an accessible accordion: one answer open at a time, arrow key navigation, aria-expanded and smooth row animation.Hero SpotlightA launch hero with a pulsing eyebrow, blur-in headline with a cursor lit second line, two actions, a proof line and a product visual that tilts into place.Marketing LandingA complete Tailwind landing page assembled from a hero with two actions, a logo cloud, a stats strip, a three column feature grid and a closing CTA banner.
All Landing page sections for React and Tailwind