{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "ScrollReveal-JS-CSS",
	"title": "ScrollReveal",
	"description": "Text gently unblurs and reveals on scroll.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:file",
			"path": "ScrollReveal.css",
			"target": "@components/ScrollReveal.css",
			"content": ".scroll-reveal {\n  margin: 20px 0;\n}\n\n.scroll-reveal-text {\n  font-size: clamp(1.6rem, 4vw, 3rem);\n  line-height: 1.5;\n  font-weight: 600;\n}\n\n.word {\n  display: inline-block;\n}\n"
		},
		{
			"type": "registry:component",
			"path": "ScrollReveal.jsx",
			"content": "import { useEffect, useRef, useMemo } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\nimport './ScrollReveal.css';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst ScrollReveal = ({\n  children,\n  scrollContainerRef,\n  enableBlur = true,\n  baseOpacity = 0.1,\n  baseRotation = 3,\n  blurStrength = 4,\n  containerClassName = '',\n  textClassName = '',\n  rotationEnd = 'bottom bottom',\n  wordAnimationEnd = 'bottom bottom'\n}) => {\n  const containerRef = useRef(null);\n\n  const splitText = useMemo(() => {\n    const text = typeof children === 'string' ? children : '';\n    return text.split(/(\\s+)/).map((word, index) => {\n      if (word.match(/^\\s+$/)) return word;\n      return (\n        <span className=\"word\" key={index}>\n          {word}\n        </span>\n      );\n    });\n  }, [children]);\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n\n    const scroller = scrollContainerRef && scrollContainerRef.current ? scrollContainerRef.current : window;\n\n    gsap.fromTo(\n      el,\n      { transformOrigin: '0% 50%', rotate: baseRotation },\n      {\n        ease: 'none',\n        rotate: 0,\n        scrollTrigger: {\n          trigger: el,\n          scroller,\n          start: 'top bottom',\n          end: rotationEnd,\n          scrub: true\n        }\n      }\n    );\n\n    const wordElements = el.querySelectorAll('.word');\n\n    gsap.fromTo(\n      wordElements,\n      { opacity: baseOpacity, willChange: 'opacity' },\n      {\n        ease: 'none',\n        opacity: 1,\n        stagger: 0.05,\n        scrollTrigger: {\n          trigger: el,\n          scroller,\n          start: 'top bottom-=20%',\n          end: wordAnimationEnd,\n          scrub: true\n        }\n      }\n    );\n\n    if (enableBlur) {\n      gsap.fromTo(\n        wordElements,\n        { filter: `blur(${blurStrength}px)` },\n        {\n          ease: 'none',\n          filter: 'blur(0px)',\n          stagger: 0.05,\n          scrollTrigger: {\n            trigger: el,\n            scroller,\n            start: 'top bottom-=20%',\n            end: wordAnimationEnd,\n            scrub: true\n          }\n        }\n      );\n    }\n\n    return () => {\n      ScrollTrigger.getAll().forEach(trigger => trigger.kill());\n    };\n  }, [scrollContainerRef, enableBlur, baseRotation, baseOpacity, rotationEnd, wordAnimationEnd, blurStrength]);\n\n  return (\n    <h2 ref={containerRef} className={`scroll-reveal ${containerClassName}`}>\n      <p className={`scroll-reveal-text ${textClassName}`}>{splitText}</p>\n    </h2>\n  );\n};\n\nexport default ScrollReveal;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"gsap@^3.13.0"
	]
}