{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "stack-card-deck",
  "type": "registry:ui",
  "title": "Swipeable Layered Card Deck",
  "description": "3D stacked card deck with rotational tilt offsets; clicking top card glides it into the back with spring physics.",
  "category": "cards",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/cards/stack-card-deck/stack-card-deck.tsx",
      "type": "registry:ui",
      "target": "components/ui/stack-card-deck.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { ArrowsClockwise } from '@phosphor-icons/react';\n\nconst DECK = [\n  { id: 1, title: 'WASM Compiler', desc: 'Hermetic binary build pipeline with zero network overhead.', badge: 'RUST 1.84', color: 'bg-indigo-600' },\n  { id: 2, title: 'Edge Routing', desc: 'Anycast DNS with sub-5ms round-trip to 310 global PoPs.', badge: 'GLOBAL CDN', color: 'bg-cyan-600' },\n  { id: 3, title: 'Zero Backend', desc: 'Pure statically hosted shadcn-compatible component registry.', badge: 'VERCEL EDGE', color: 'bg-emerald-600' },\n];\n\nexport const StackCardDeck: React.FC = () => {\n  const [cards, setCards] = useState(DECK);\n\n  const popCard = () => {\n    setCards((prev) => {\n      const copy = [...prev];\n      const top = copy.shift()!;\n      copy.push(top);\n      return copy;\n    });\n  };\n\n  return (\n    <div className=\"relative w-64 h-52 flex flex-col items-center justify-center select-none cursor-pointer\" onClick={popCard}>\n      {cards.map((c, i) => {\n        const isTop = i === 0;\n        return (\n          <motion.div\n            key={c.id}\n            layout\n            initial={{ scale: 0.9, y: 15 }}\n            animate={{\n              scale: 1 - i * 0.05,\n              y: i * 8,\n              zIndex: 10 - i,\n              rotate: i === 1 ? -3 : i === 2 ? 3 : 0,\n            }}\n            transition={{ type: 'spring', damping: 20, stiffness: 280 }}\n            className={`absolute inset-0 rounded-2xl p-5 text-white shadow-xl flex flex-col justify-between ${c.color} border border-white/20`}\n          >\n            <div className=\"flex justify-between items-center\">\n              <span className=\"text-[10px] font-mono px-2 py-0.5 rounded-full bg-white/20 uppercase tracking-widest\">{c.badge}</span>\n              {isTop && <span className=\"text-[10px] font-mono opacity-70\">Click to flip</span>}\n            </div>\n            <div>\n              <h4 className=\"font-bold text-base\">{c.title}</h4>\n              <p className=\"text-xs text-white/80 mt-1\">{c.desc}</p>\n            </div>\n          </motion.div>\n        );\n      })}\n    </div>\n  );\n};\n"
    }
  ]
}