{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"dependencies": ["gsap"],
	"description": "Grid that reveals items with wave-like stagger on scroll. Configurable columns and timing.",
	"files": [
		{
			"content": "\"use client\";\n\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\nimport React, { useLayoutEffect, useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface StaggerRevealGridProps {\n  children: React.ReactNode;\n  className?: string;\n  itemClassName?: string;\n  columns?: number;\n  stagger?: number;\n  duration?: number;\n  fromY?: number;\n  fromScale?: number;\n  fromOpacity?: number;\n  start?: string;\n  ease?: string;\n}\n\nexport function StaggerRevealGrid({\n  children,\n  className,\n  itemClassName,\n  columns = 3,\n  stagger = 0.08,\n  duration = 0.5,\n  fromY = 40,\n  fromScale = 0.9,\n  fromOpacity = 0,\n  start = \"top 85%\",\n  ease = \"back.out(1.2)\",\n}: StaggerRevealGridProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const ctx = gsap.context(() => {\n      const els = containerRef.current?.querySelectorAll(\"[data-reveal]\");\n      if (!els?.length) {\n        return;\n      }\n      gsap.fromTo(\n        els,\n        { opacity: fromOpacity, scale: fromScale, y: fromY },\n        {\n          duration,\n          ease,\n          opacity: 1,\n          scale: 1,\n          scrollTrigger: {\n            start,\n            trigger: containerRef.current,\n          },\n          stagger,\n          y: 0,\n        },\n      );\n    }, containerRef);\n    return () => ctx.revert();\n  }, [duration, stagger, fromY, fromScale, fromOpacity, start, ease]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\"grid gap-3\", className)}\n      style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}\n    >\n      {React.Children.map(children, (child, i) =>\n        child ? (\n          <div\n            key={React.isValidElement(child) && child.key != null ? child.key : `reveal-${i}`}\n            data-reveal={true}\n            className={cn(itemClassName)}\n          >\n            {child}\n          </div>\n        ) : null,\n      )}\n    </div>\n  );\n}\n",
			"path": "registry/new-york/stagger-reveal-grid/stagger-reveal-grid.tsx",
			"type": "registry:component"
		}
	],
	"name": "stagger-reveal-grid",
	"title": "Stagger Reveal Grid",
	"type": "registry:component"
}