{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "screenshot-stack",
  "type": "registry:ui",
  "title": "Screenshot stack",
  "description": "Presents multiple product surfaces in depth while retaining the active focus.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "hero-story"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/components/screenshot-stack/",
  "meta": {
    "engines": [
      "motion"
    ],
    "runtimeCost": "medium",
    "signature": "Active screenshot moves forward while context stays visible",
    "sceneFamily": "spatial-dark",
    "motionRole": "gentle",
    "primaryState": "Product screenshot stack in dark space",
    "assetProvenance": "self-contained"
  },
  "files": [
    {
      "path": "src/registry/components/screenshot-stack.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/screenshot-stack.tsx",
      "content": "\"use client\";\nimport { useState, type ReactNode } from \"react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nexport type ScreenshotStackItem = { id: string; title: string; caption?: string; art: ReactNode };\nexport type ScreenshotStackProps = { items: readonly ScreenshotStackItem[]; label?: string; defaultIndex?: number; onChange?: (item: ScreenshotStackItem, index: number) => void; className?: string };\nexport function ScreenshotStack({ items, label = \"Product surfaces\", defaultIndex = 0, onChange, className = \"\" }: ScreenshotStackProps) { const [active, setActiveState] = useState(defaultIndex); const reduced = useReducedMotion() === true; const current = items[active] ?? items[0]; if (!current) return null; const setActive = (index: number) => { const normalized = (index + items.length) % items.length; setActiveState(normalized); onChange?.(items[normalized], normalized); }; return <section aria-label={label} className={`w-full overflow-hidden rounded-[20px] border border-[#c8d5e0]/15 bg-[#111820] p-3 text-[#eff7ff] shadow-[0_26px_58px_-38px_rgba(0,0,0,.92)] ${className}`}><div className=\"mb-3 flex items-end justify-between px-1\"><div><span className=\"font-mono text-[9px] tracking-[.15em] text-[#acc8dc]/60\">PRODUCT SURFACES</span><h3 className=\"mt-1 text-[15px] font-medium tracking-[-.03em]\">{label}</h3></div><span className=\"font-mono text-[9px] text-[#acc8dc]/60\">{String(active + 1).padStart(2, \"0\")} / {String(items.length).padStart(2, \"0\")}</span></div><div className=\"relative min-h-[270px] overflow-hidden rounded-[14px] bg-[radial-gradient(circle_at_78%_16%,rgba(107,170,220,.25),transparent_28%),#172631]\">{items.map((item, index) => { const distance = index - active; return <motion.button key={item.id} type=\"button\" aria-pressed={index === active} onClick={() => setActive(index)} initial={false} animate={{ x: distance * 42, y: Math.abs(distance) * 15, scale: 1 - Math.abs(distance) * 0.08, opacity: Math.abs(distance) > 2 ? 0 : 1 - Math.abs(distance) * 0.25, zIndex: 10 - Math.abs(distance) }} transition={reduced ? { duration: 0 } : { type: \"spring\", stiffness: 280, damping: 28 }} className=\"absolute inset-x-[13%] top-7 overflow-hidden rounded-[11px] border border-white/15 bg-[#213443] text-left outline-none focus-visible:ring-2 focus-visible:ring-[#9ec9f4]\"><span aria-hidden className=\"block aspect-[4/3]\">{item.art}</span><span className=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/65 to-transparent p-3\"><strong className=\"block text-[12px]\">{item.title}</strong></span></motion.button>; })}</div><div className=\"mt-3 flex gap-2 overflow-x-auto pb-0.5\">{items.map((item, index) => <button key={item.id} type=\"button\" aria-pressed={index === active} onClick={() => setActive(index)} className={`min-h-11 shrink-0 rounded-full px-3 text-[10px] font-medium outline-none focus-visible:ring-2 focus-visible:ring-[#9ec9f4] ${index === active ? \"bg-[#dceeff] text-[#1b3448]\" : \"border border-white/15 bg-white/[0.05] text-[#d0e5f4]/72\"}`}>{item.title}</button>)}</div>{current.caption ? <p className=\"mt-2 px-1 text-[10px] text-[#bcd4e4]/65\">{current.caption}</p> : null}</section>; }\n"
    }
  ]
}