{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-animation-rotate-x-demo",
  "title": "scroll rotate animation device Demo",
  "description": "Demo showing how to use scroll rotate animations.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/scroll-animation-rotate"
  ],
  "files": [
    {
      "path": "registry/demo/scroll-animations/scroll-animation-rotate-x/index.tsx",
      "content": "import {\n  ScrollAnimationRotate,\n  ScrollAnimationRotateContainer,\n} from '@/components/systaliko-ui/scroll-animations/scroll-animation-rotate';\n\nexport const ScrollAnimationRotateXDemo = () => {\n  return (\n    <ScrollAnimationRotate>\n      <ScrollAnimationRotateContainer\n        rotationDirection=\"y\"\n        rotateRange={[0, 180]}\n        className=\"h-96 w-2/6 mx-auto\"\n      >\n        <div className=\"absolute inset-0 z-20 size-full\">\n          <img\n            width={1015}\n            height={678}\n            src=\"https://images.unsplash.com/photo-1655853548169-646b6e0f15ca?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            alt=\"nike air jordan\"\n            className=\"size-full object-cover\"\n          />\n        </div>\n      </ScrollAnimationRotateContainer>\n    </ScrollAnimationRotate>\n  );\n};\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/scroll-animation-rotate-demo.tsx"
    }
  ],
  "type": "registry:block"
}