{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee-demo",
  "registryDependencies": [
    "marquee",
    "@delta/marquee"
  ],
  "files": [
    {
      "path": "examples/marquee-demo.tsx",
      "content": "\"use client\"\n\nimport { motion } from \"motion/react\"\n\nimport { Marquee } from \"@/components/ui/marquee\"\n\nconst albums = [\n  {\n    src: \"https://is1-ssl.mzstatic.com/image/thumb/Music221/v4/54/28/14/54281424-eece-0935-299d-fdd2ab403f92/24UM1IM28978.rgb.jpg/600x600bb.jpg\",\n    alt: \"GNX - Kendrick Lamar\",\n  },\n  {\n    src: \"https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/ed/d5/5e/edd55e84-e47f-b2c7-0a6a-18f5ca2c75a9/3432.jpg/600x600bb.jpg\",\n    alt: \"Flume - Flume\",\n  },\n  {\n    src: \"https://is1-ssl.mzstatic.com/image/thumb/Music211/v4/93/d5/3e/93d53e93-6873-58fb-4e86-7d9042a665b2/191404153574.png/600x600bb.jpg\",\n    alt: \"Romance (Deluxe Edition) - Fontaines D.C.\",\n  },\n  {\n    src: \"https://is1-ssl.mzstatic.com/image/thumb/Music211/v4/49/86/18/49861852-877b-0992-fa27-58b25fa032b5/196589805232.jpg/600x600bb.jpg\",\n    alt: \"The Dark Side of the Moon (50th Anniversary) - Pink Floyd\",\n  },\n  {\n    src: \"https://is1-ssl.mzstatic.com/image/thumb/Music221/v4/19/c5/96/19c59650-a48d-6cf8-c925-0a77a3cc66c6/720841204596_Cover.jpg/600x600bb.jpg\",\n    alt: \"Shuffering & Shmiling - Fela Kuti\",\n  },\n]\n\nexport function MarqueeDemo() {\n  return (\n    <div className=\"flex h-64 w-full items-center justify-center sm:h-80\">\n      <Marquee\n        className=\"flex h-full items-center justify-center\"\n        direction=\"left\"\n        slowdownOnHover\n        showFade\n        slowDownFactor={0.2}\n      >\n        {albums.map((album, index) => (\n          <motion.img\n            key={index}\n            src={album.src || \"/placeholder.svg\"}\n            alt={album.alt}\n            className=\"mx-2 aspect-square w-[100px] cursor-pointer rounded-md sm:mx-3 sm:w-[100px] md:w-[120px]\"\n            whileHover={{ scale: 1.2 }}\n            transition={{ type: \"spring\", stiffness: 300, damping: 15 }}\n          />\n        ))}\n      </Marquee>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}