{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stack-reveal-story",
  "type": "registry:component",
  "title": "Stack reveal story",
  "description": "Three story cards that rise and overlap into a stack on wider screens as they scroll into view, falling back to a simple vertical list on mobile.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/stack-reveal-story.tsx",
      "type": "registry:ui",
      "target": "components/ui/stack-reveal-story.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nconst CARDS = [\n  { title: \"Free kit\", body: \"Product UI you ship tomorrow.\" },\n  { title: \"Launch moments\", body: \"Motion where it earns attention, calm everywhere else.\" },\n  { title: \"Client showcase\", body: \"/showcase — the walkthrough tab.\" },\n]\n\nfunction StackRevealStory({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <section\n      data-slot=\"stack-reveal-story\"\n      data-tier=\"premium\"\n      className={cn(\n        \"relative mx-auto flex max-w-md flex-col gap-3 md:block md:gap-0\",\n        className\n      )}\n    >\n      {CARDS.map((c, i) => (\n        <motion.article\n          key={c.title}\n          initial={reduce ? false : { y: 28, scale: 0.98 }}\n          whileInView={{ y: 0, scale: 1 }}\n          viewport={{ once: true, amount: 0.55 }}\n          transition={{ delay: i * 0.08, duration: 0.35, ease: [0.2, 0, 0, 1] }}\n          style={{ zIndex: i + 1 }}\n          className={cn(\n            \"relative rounded-2xl border border-border bg-surface p-5 shadow-highlight sm:p-6\",\n            // Overlap ONLY from md up — was -mt-10 on all viewports (mobile bug)\n            i > 0 && \"md:-mt-10\"\n          )}\n        >\n          <p className=\"text-[11px] font-medium uppercase tracking-[0.01em] text-accent\">0{i + 1}</p>\n          <h3 className=\"mt-2 text-lg font-medium tracking-[-0.014em] text-fg\">{c.title}</h3>\n          <p className=\"mt-1 text-sm leading-[1.55] text-fg-muted\">{c.body}</p>\n        </motion.article>\n      ))}\n    </section>\n  )\n}\nexport { StackRevealStory }\n"
    }
  ]
}