{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "FadeContent-JS-TW",
	"title": "FadeContent",
	"description": "Simple directional fade / slide entrance / exit wrapper with threshold-based activation.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "FadeContent/FadeContent.jsx",
			"content": "import { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst FadeContent = ({\n  children,\n  container,\n  blur = false,\n  duration = 1000,\n  ease = 'power2.out',\n  delay = 0,\n  threshold = 0.1,\n  initialOpacity = 0,\n  disappearAfter = 0,\n  disappearDuration = 0.5,\n  disappearEase = 'power2.in',\n  onComplete,\n  onDisappearanceComplete,\n  className = '',\n  ...props\n}) => {\n  const ref = useRef(null);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    let scrollerTarget = container || document.getElementById('snap-main-container') || null;\n    if (typeof scrollerTarget === 'string') {\n      scrollerTarget = document.querySelector(scrollerTarget);\n    }\n\n    const startPct = (1 - threshold) * 100;\n    const getSeconds = val => (val > 10 ? val / 1000 : val);\n\n    gsap.set(el, {\n      autoAlpha: initialOpacity,\n      filter: blur ? 'blur(10px)' : 'blur(0px)',\n      willChange: 'opacity, filter, transform'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay: getSeconds(delay),\n      onComplete: () => {\n        if (onComplete) onComplete();\n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            autoAlpha: initialOpacity,\n            filter: blur ? 'blur(10px)' : 'blur(0px)',\n            delay: getSeconds(disappearAfter),\n            duration: getSeconds(disappearDuration),\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      autoAlpha: 1,\n      filter: 'blur(0px)',\n      duration: getSeconds(duration),\n      ease: ease\n    });\n\n    const st = ScrollTrigger.create({\n      trigger: el,\n      scroller: scrollerTarget || window,\n      start: `top ${startPct}%`,\n      once: true,\n      onEnter: () => tl.play()\n    });\n\n    return () => {\n      st.kill();\n      tl.kill();\n      gsap.killTweensOf(el);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <div ref={ref} className={className} {...props}>\n      {children}\n    </div>\n  );\n};\n\nexport default FadeContent;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"gsap@^3.13.0"
	]
}