{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "distributed-cards-demo",
  "title": "Distributed Cards Demo",
  "description": "Demo showing distributed cards component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/distributed-cards"
  ],
  "files": [
    {
      "path": "registry/demo/scroll-animations/distributed-cards/index.tsx",
      "content": "import {\n  DistributedCardCell,\n  DistributedCards,\n  DistributedCardsContainer,\n} from '@/components/systaliko-ui/scroll-animations/distributed-cards';\nimport Image from 'next/image';\n\nconst CARDS = [\n  {\n    id: 'distributed-card-1',\n    imageUrl:\n      'https://images.unsplash.com/photo-1557409518-691ebcd96038?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    startX: '100%',\n    startY: '50%',\n  },\n  {\n    id: 'distributed-card-2',\n    imageUrl:\n      'https://images.unsplash.com/photo-1513407030348-c983a97b98d8?q=80&w=1472&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    startX: '0%',\n    startY: '50%',\n  },\n  {\n    id: 'distributed-card-3',\n    imageUrl:\n      'https://images.unsplash.com/photo-1551641506-ee5bf4cb45f1?q=80&w=1484&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    startX: '-100%',\n    startY: '50%',\n  },\n  {\n    id: 'distributed-card-4',\n    imageUrl:\n      'https://images.unsplash.com/photo-1542051841857-5f90071e7989?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    startX: '100%',\n    startY: '-50%',\n  },\n  {\n    id: 'distributed-card-5',\n    imageUrl:\n      'https://images.unsplash.com/photo-1677652704119-1497d836c396?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    startX: '0%',\n    startY: '-50%',\n  },\n  {\n    id: 'distributed-card-6',\n    imageUrl:\n      'https://images.unsplash.com/photo-1525230071276-4a87f42f469e?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    startX: '-100%',\n    startY: '-50%',\n  },\n];\nexport function DistributedCardsDemo() {\n  return (\n    <DistributedCards className=\"w-full\">\n      <DistributedCardsContainer className=\"h-screen flex items-center justify-center overflow-hidden\">\n        <div className=\"grid w-full h-full md:h-auto md:aspect-video max-w-5xl grid-cols-3 grid-rows-2 justify-center items-center gap-4 py-16 px-8\">\n          {CARDS.map((card, i) => (\n            <DistributedCardCell\n              className=\"relative size-full shadow-xl rounded border border-border/20 overflow-hidden\"\n              yRange={[card.startY, '0%']}\n              xRange={[card.startX, '0%']}\n              rotateRange={[Math.random() * (15 - -5) + -5, 0]}\n              key={card.id}\n            >\n              <Image\n                src={card.imageUrl}\n                fill\n                alt={'tokyo'}\n                className=\"object-cover size-full\"\n                sizes=\"(max-width: 768px) 80vw, 768px\"\n              />\n            </DistributedCardCell>\n          ))}\n        </div>\n      </DistributedCardsContainer>\n    </DistributedCards>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/distributed-cards.tsx"
    }
  ],
  "type": "registry:block"
}