{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "device-frame-stack",
  "type": "registry:component",
  "title": "Device frame stack",
  "description": "Three device frames labelled mobile, app and docs that spring into a fanned, rotated stack when scrolled into view. Works as a hero or feature visual.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/device-frame-stack.tsx",
      "type": "registry:ui",
      "target": "components/ui/device-frame-stack.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction DeviceFrameStack({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  const frames = [\n    { rotate: -5, x: -22, y: 14, z: 0, label: \"Mobile\" },\n    { rotate: 0, x: 0, y: 0, z: 1, label: \"App\" },\n    { rotate: 4, x: 26, y: 16, z: 0, label: \"Docs\" },\n  ]\n  return (\n    <div\n      data-slot=\"device-frame-stack\"\n      data-tier=\"premium\"\n      className={cn(\n        \"relative mx-auto flex h-64 w-full max-w-lg items-center justify-center overflow-hidden sm:h-72\",\n        className\n      )}\n    >\n      {frames.map((f, i) => (\n        <motion.div\n          key={f.label}\n          initial={reduce ? false : { y: 30, rotate: 0 }}\n          whileInView={{ y: f.y, rotate: f.rotate, x: f.x }}\n          viewport={{ once: true }}\n          transition={{ delay: 0.1 + i * 0.08, type: \"spring\", stiffness: 120, damping: 16 }}\n          style={{ zIndex: f.z + 1 }}\n          className=\"absolute w-36 overflow-hidden rounded-xl border border-border bg-surface shadow-highlight sm:w-44\"\n        >\n          <div className=\"flex h-7 items-center gap-1 border-b border-border bg-sunken px-2\">\n            <span className=\"size-1.5 rounded-full bg-fg-subtle/50\" />\n            <span className=\"size-1.5 rounded-full bg-fg-subtle/50\" />\n            <span className=\"size-1.5 rounded-full bg-fg-subtle/50\" />\n            <span className=\"ml-2 truncate text-[10px] text-fg-muted\">{f.label}</span>\n          </div>\n          <div className=\"space-y-2 p-3\">\n            <div className=\"h-2 w-3/4 rounded bg-fg/10\" />\n            <div className=\"h-2 w-1/2 rounded bg-fg/5\" />\n            <div className=\"mt-2 aspect-video rounded-md border border-border bg-[radial-gradient(circle_at_40%_30%,color-mix(in_oklch,var(--accent)_22%,transparent),transparent_65%)] bg-sunken\" />\n          </div>\n        </motion.div>\n      ))}\n    </div>\n  )\n}\nexport { DeviceFrameStack }\n"
    }
  ]
}