{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-chapter-story",
  "type": "registry:component",
  "title": "Scroll chapter story",
  "description": "A scroll story of three chapters that slide in as you scroll, with a sticky progress bar that fills with scroll position across the whole section.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/scroll-chapter-story.tsx",
      "type": "registry:ui",
      "target": "components/ui/scroll-chapter-story.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion, useScroll, useTransform } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nconst CHAPTERS = [\n  { kicker: \"01 · Plan\", title: \"Turn scattered requests into one clear roadmap.\", body: \"Collect feedback from every channel, then rank it by the revenue behind it.\" },\n  { kicker: \"02 · Build\", title: \"Ship in small, confident steps.\", body: \"Specs, designs and pull requests live side by side, so nothing gets lost between tools.\" },\n  { kicker: \"03 · Measure\", title: \"Know what worked, the day it ships.\", body: \"Adoption, retention and revenue per feature, without writing a single query.\" },\n]\n\nfunction ScrollChapterStory({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { scrollYProgress } = useScroll({ target: ref, offset: [\"start start\", \"end end\"] })\n  const progress = useTransform(scrollYProgress, [0, 1], [0, 100])\n  return (\n    <div ref={ref} data-slot=\"scroll-chapter-story\" data-tier=\"premium\" className={cn(\"relative\", className)}>\n      <div className=\"sticky top-16 z-10 mb-4 h-1 overflow-hidden rounded-full bg-border\">\n        <motion.div className=\"h-full bg-accent\" style={reduce ? { width: \"100%\" } : { width: progress }} />\n      </div>\n      <div className=\"space-y-[40vh]\">\n        {CHAPTERS.map((c, i) => (\n          <motion.section\n            key={c.kicker}\n            initial={reduce ? false : { y: 24 }}\n            whileInView={{ y: 0 }}\n            viewport={{ once: true, amount: 0.4 }}\n            transition={{ duration: 0.35, ease: [0.2, 0, 0, 1] }}\n            className=\"rounded-2xl border border-border bg-surface p-8 shadow-highlight sm:p-12\"\n          >\n            <p className=\"text-xs font-medium uppercase tracking-[0.01em] text-accent\">{c.kicker}</p>\n            <h3 className=\"mt-3 max-w-2xl text-3xl font-medium leading-[1.15] tracking-[-0.022em] text-fg sm:text-4xl sm:tracking-[-0.026em]\">\n              {c.title}\n            </h3>\n            <p className=\"mt-4 max-w-xl text-base leading-[1.55] text-fg-muted\">{c.body}</p>\n            <p className=\"mt-6 font-mono text-xs tabular-nums text-fg-subtle\">Chapter {i + 1} / {CHAPTERS.length}</p>\n          </motion.section>\n        ))}\n      </div>\n    </div>\n  )\n}\nexport { ScrollChapterStory }\n"
    }
  ]
}