{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-scroll-gallery",
  "title": "Scroll Gallery Demo",
  "description": "Sticky scroll slider with 4 slides, strip-mask transitions, and animated title swaps.",
  "registryDependencies": ["@soralabs/scroll-gallery"],
  "files": [
    {
      "path": "registry/demo/primitives/effects/scroll-gallery/index.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { CatalogScrollHint } from \"@/components/catalog/catalog-scroll-hint\";\nimport { resolveScrollRoot } from \"@/lib/catalog/resolve-scroll-root\";\nimport { scrollGalleryDemoSlides } from \"@/lib/demo/scroll-gallery-demo-slides\";\nimport { waitForScrollerReady } from \"@/lib/scroll/scroller-ready\";\nimport { ScrollGallery } from \"@/components/sora-ui/effects/scroll-gallery\";\n\nexport default function ScrollGalleryDemo() {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [scroller, setScroller] = useState<Element | Window | undefined>();\n\n  useEffect(() => {\n    const node = rootRef.current;\n    if (!node) {\n      return;\n    }\n\n    const resolved = resolveScrollRoot(node);\n\n    waitForScrollerReady(resolved)\n      .then(() => {\n        setScroller(resolved);\n      })\n      .catch(() => {\n        /* preview unmounted */\n      });\n  }, []);\n\n  return (\n    <div className=\"w-full\" ref={rootRef}>\n      <CatalogScrollHint label=\"Scroll to reveal slides\" />\n\n      {scroller ? (\n        <ScrollGallery\n          containerQuery\n          embedded\n          linkLabel=\"Explore\"\n          prefixLabel=\"Featured\"\n          scroller={scroller}\n          slides={scrollGalleryDemoSlides}\n          variant=\"studio\"\n        />\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/sora-ui/demo/effects/scroll-gallery.tsx"
    }
  ],
  "type": "registry:ui"
}