{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-based-velocity-images-demo",
  "type": "registry:example",
  "title": "Scroll Based Velocity Images",
  "description": "Example showing Unsplash images scrolling with speed reacting to scroll velocity.",
  "registryDependencies": [
    "@magicui/scroll-based-velocity"
  ],
  "files": [
    {
      "path": "registry/example/scroll-based-velocity-images-demo.tsx",
      "content": "import {\n  ScrollVelocityContainer,\n  ScrollVelocityRow,\n} from \"@/registry/magicui/scroll-based-velocity\"\n\nconst IMAGES_ROW_A = [\n  \"https://images.unsplash.com/photo-1749738456487-2af715ab65ea?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n  \"https://plus.unsplash.com/premium_photo-1720139288219-e20aa9c8895b?q=80&w=1810&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n]\n\nconst IMAGES_ROW_B = [\n  \"https://images.unsplash.com/photo-1749738456487-2af715ab65ea?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n  \"https://plus.unsplash.com/premium_photo-1720139288219-e20aa9c8895b?q=80&w=1810&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n]\n\nexport default function ScrollBasedVelocityImagesDemo() {\n  return (\n    <div className=\"relative flex w-full flex-col items-center justify-center overflow-hidden py-8\">\n      <ScrollVelocityContainer className=\"w-full\">\n        <ScrollVelocityRow baseVelocity={6} direction={1} className=\"py-4\">\n          {IMAGES_ROW_A.map((src, idx) => (\n            <img\n              key={idx}\n              src={`${src}&ixlib=rb-4.0.3`}\n              alt=\"Unsplash sample\"\n              width={240}\n              height={160}\n              loading=\"lazy\"\n              decoding=\"async\"\n              className=\"mx-4 inline-block h-40 w-60 rounded-lg object-cover shadow-sm\"\n            />\n          ))}\n        </ScrollVelocityRow>\n        <ScrollVelocityRow baseVelocity={6} direction={-1} className=\"py-4\">\n          {IMAGES_ROW_B.map((src, idx) => (\n            <img\n              key={idx}\n              src={`${src}&ixlib=rb-4.0.3`}\n              alt=\"Unsplash sample\"\n              width={240}\n              height={160}\n              loading=\"lazy\"\n              decoding=\"async\"\n              className=\"mx-4 inline-block h-40 w-60 rounded-lg object-cover shadow-sm\"\n            />\n          ))}\n        </ScrollVelocityRow>\n      </ScrollVelocityContainer>\n\n      <div className=\"from-background pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r\"></div>\n      <div className=\"from-background pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l\"></div>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}