{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "soft-stack",
  "type": "registry:component",
  "title": "Soft stack",
  "description": "A stack of three offset cards that spring up into a layered, slightly scaled pile when scrolled into view. A compact depth visual for feature sections.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/soft-stack.tsx",
      "type": "registry:ui",
      "target": "components/ui/soft-stack.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction SoftStack({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  const cards = [\"Inbox\", \"Board\", \"Billing\"]\n  return (\n    <div data-slot=\"soft-stack\" data-tier=\"premium\" className={cn(\"relative mx-auto h-64 w-full max-w-sm\", className)}>\n      {cards.map((c, i) => (\n        <motion.div\n          key={c}\n          initial={reduce ? false : { y: 40 + i * 8, scale: 0.94 }}\n          whileInView={{ y: i * 18, scale: 1 - i * 0.03 }}\n          viewport={{ once: true }}\n          transition={{ delay: i * 0.08, type: \"spring\", stiffness: 140, damping: 18 }}\n          style={{ zIndex: cards.length - i }}\n          className=\"absolute inset-x-0 top-0 rounded-2xl border border-border bg-surface p-5 shadow-highlight\"\n        >\n          <p className=\"text-sm font-medium text-fg\">{c}</p>\n          <div className=\"mt-4 space-y-2\">\n            <div className=\"h-2 w-2/3 rounded bg-fg/10\" />\n            <div className=\"h-2 w-1/2 rounded bg-fg/5\" />\n          </div>\n        </motion.div>\n      ))}\n    </div>\n  )\n}\nexport { SoftStack }\n"
    }
  ]
}