{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-fade-effect-block-04",
  "type": "registry:block",
  "registryDependencies": [
    "@ncdai/scroll-fade-effect",
    "scroll-area"
  ],
  "files": [
    {
      "path": "src/registry/examples/scroll-fade-effect-demo-04.tsx",
      "content": "import Image from \"next/image\";\n\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Artwork {\n  artist: string;\n  art: string;\n}\n\nconst works: Artwork[] = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n];\n\nexport default function ScrollAreaHorizontalDemo() {\n  return (\n    <ScrollArea\n      className={cn(\n        \"w-72 rounded-lg border whitespace-nowrap sm:w-96\",\n        \"**:data-[slot=scroll-area-viewport]:scroll-fade-effect-x\"\n        // \"**:data-[slot=scroll-area-viewport]:[--mask-offset-left:8px]\",\n        // \"**:data-[slot=scroll-area-viewport]:[--mask-offset-right:8px]\"\n      )}\n    >\n      <div className=\"flex w-max gap-4 p-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <Image\n              src={artwork.art}\n              alt={`Photo by ${artwork.artist}`}\n              className=\"aspect-3/4 h-fit w-fit rounded-sm object-cover\"\n              width={300}\n              height={400}\n            />\n\n            <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n              Photo by{\" \"}\n              <span className=\"font-semibold text-foreground\">\n                {artwork.artist}\n              </span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}