{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-animation-combo-demo",
  "title": "scroll-animation-combo Demo",
  "description": "Demo showing scroll-animation-combo component.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/scroll-animation"
  ],
  "files": [
    {
      "path": "registry/demo/scroll-animations/scroll-animation-combo/index.tsx",
      "content": "import {\n  ScrollAnimation,\n  ScrollInsetX,\n  ScrollScale,\n  ScrollTranslateY,\n} from '@/components/systaliko-ui/scroll-animations/scroll-animation';\n\nconst IMAGES_1 = [\n  'https://images.unsplash.com/photo-1529218402470-5dec8fea0761?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGFkfGVufDB8fDB8fHww',\n  'https://images.unsplash.com/photo-1717008303072-88c8ad26c3ff?q=80&w=2663&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1716855048433-50d4db79ba14?q=80&w=2669&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1608501078713-8e445a709b39?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n];\nconst IMAGES_2 = [\n  'https://images.unsplash.com/photo-1712183465613-555424cf0e69?q=80&w=2661&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1560360482-d5588f13d530?q=80&w=2687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1712183465613-555424cf0e69?q=80&w=2661&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1493515322954-4fa727e97985?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHRva3lvfGVufDB8MHwwfHx8Mg%3D%3D',\n];\nconst IMAGES_3 = [\n  'https://images.unsplash.com/photo-1687647849698-e54685db9ae3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1658195686058-3b790484ae7e?q=80&w=2452&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1629692905066-d202dad72ebf?q=80&w=2678&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1608875004752-2fdb6a39ba4c?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n];\n\nexport const ScrollAnimationComboDemo = () => {\n  return (\n    <ScrollAnimation className=\"overflow-hidden\">\n      <ScrollTranslateY className=\"h-dvh relative\">\n        <ScrollInsetX className=\"h-full relative\">\n          <ScrollScale className=\"flex bg-secondary gap-2 overflow-hidden px-6\">\n            <ScrollTranslateY\n              yRange={['0%', '-10%']}\n              className=\"flex flex-col gap-2\"\n            >\n              {IMAGES_1.map((imageUrl, index) => (\n                <img\n                  key={index}\n                  className=\"aspect-[4/2.5] inline-block align-middle h-auto max-h-full w-full  object-cover\"\n                  src={imageUrl}\n                  alt=\"gallery item\"\n                />\n              ))}\n            </ScrollTranslateY>\n\n            <ScrollTranslateY\n              yRange={['0%', '20%']}\n              className=\"flex mt-[-20%] relative flex-col gap-2\"\n            >\n              {IMAGES_2.map((imageUrl, index) => (\n                <img\n                  key={index}\n                  className=\"aspect-[4/2.5] inline-block align-middle h-auto max-h-full w-full  object-cover\"\n                  src={imageUrl}\n                  alt=\"gallery item\"\n                />\n              ))}\n            </ScrollTranslateY>\n\n            <ScrollTranslateY\n              yRange={['0%', '-10%']}\n              className=\"hidden md:flex flex-col gap-2\"\n            >\n              {IMAGES_3.map((imageUrl, index) => (\n                <img\n                  key={index}\n                  className=\"aspect-[4/2.5] inline-block align-middle h-auto max-h-full w-full  object-cover\"\n                  src={imageUrl}\n                  alt=\"gallery item\"\n                />\n              ))}\n            </ScrollTranslateY>\n          </ScrollScale>\n        </ScrollInsetX>\n      </ScrollTranslateY>\n    </ScrollAnimation>\n  );\n};\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/scroll-animation-combo.tsx"
    }
  ],
  "type": "registry:block"
}