{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-animation-rotate-y-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-y/index.tsx",
      "content": "import {\n  ScrollAnimationRotate,\n  ScrollAnimationRotateContainer,\n} from '@/components/systaliko-ui/scroll-animations/scroll-animation-rotate';\n\nexport const ScrollAnimationRotateYDemo = () => {\n  return (\n    <ScrollAnimationRotate>\n      <ScrollAnimationRotateContainer\n        className={`\n        w-4/5 aspect-video mx-auto bg-border relative border-[20px] rounded-xl shadow-2xl\n        after:block after:absolute after:top-[3%] after:left-[36%] after:h-[0.5%] after:w-[28%] after:rounded-full after:shadow-[0_0_3px_0_white] after:z-20\n        `}\n        rotateRange={[65, 0]}\n      >\n        <div className=\"rounded-md size-full overflow-hidden\">\n          <video\n            className=\"relative z-10  size-full object-cover\"\n            src=\"https://videos.pexels.com/video-files/8084614/8084614-uhd_2560_1440_25fps.mp4\"\n            autoPlay\n            muted\n            loop\n            playsInline\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"
}