{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-reverse-scale-animation-demo",
  "title": "Scroll Reverce Scale Animation Demo",
  "description": "Demo scroll animations component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/scroll-animations",
    "https://systaliko-ui.vercel.app/r/grid-bento"
  ],
  "files": [
    {
      "path": "registry/demo/scroll-animations/scroll-reverse-scale-animation/index.tsx",
      "content": "'use client';\n\nimport { GridBento } from '@/components/systaliko-ui/blocks/grid-bento';\nimport {\n  ScrollAnimation,\n  ScrollScale,\n  ScrollTranslateY,\n} from '@/components/systaliko-ui/scroll-animations/scroll-animation';\nimport { Button } from '@/components/systaliko-ui/shadcn/button';\n\nconst IMAGES = [\n  'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?q=80&w=2388&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1498036882173-b41c28a8ba34?q=80&w=2264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1551641506-ee5bf4cb45f1?q=80&w=2368&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1503899036084-c55cdd92da26?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dG9reW98ZW58MHx8MHx8fDA%3D',\n  'https://images.unsplash.com/photo-1536098561742-ca998e48cbcc?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHRva3lvfGVufDB8fDB8fHww',\n];\n\nexport function ScrollReverseScaleAnimationDemo() {\n  return (\n    <ScrollAnimation className=\"p-8\">\n      <ScrollTranslateY className=\"h-dvh grid grid-cols-12 grid-rows-1\">\n        <ScrollScale\n          className=\"col-start-2 col-end-12 row-start-1 row-end-2 flex flex-col justify-center items-center space-y-6 text-center\"\n          scaleRange={[0, 1]}\n          inputRange={[0.4, 0.9]}\n        >\n          <h1 className=\"text-5xl font-bold tracking-tighter\">\n            Your Animated Hero\n          </h1>\n          <p className=\"mx-auto text-sm md:text-base\">\n            Yet another hero section, this time with scroll trigger animations,{' '}\n            <br />\n            animating the hero content with motion.\n          </p>\n          <div className=\"flex items-center justify-center gap-4\">\n            <Button>Get Started</Button>\n            <Button variant=\"link\">Learn more</Button>\n          </div>\n        </ScrollScale>\n        <GridBento className=\"[&>*:first-child]:origin-[10%_0%] col-start-1 row-start-1 pointer-events-none row-end-2 col-end-13\">\n          {IMAGES.map((imageUrl, index) => (\n            <ScrollScale\n              key={index}\n              inputRange={[0, 0.5]}\n              scaleRange={[1, 0.5]}\n              className=\"overflow-hidden\"\n            >\n              <img\n                className=\"size-full object-cover rounded-xl shadow-xl\"\n                src={imageUrl}\n                alt=\"tokyo city\"\n              />\n            </ScrollScale>\n          ))}\n        </GridBento>\n      </ScrollTranslateY>\n    </ScrollAnimation>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/scroll-reverse-scale-animation.tsx"
    }
  ],
  "type": "registry:block"
}