{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "FadeContent-TS-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.tsx",
			"content": "import * as React from 'react';\nimport { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface FadeContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  container?: Element | string | null;\n  blur?: boolean;\n  duration?: number;\n  ease?: string;\n  delay?: number;\n  threshold?: number;\n  initialOpacity?: number;\n  disappearAfter?: number;\n  disappearDuration?: number;\n  disappearEase?: string;\n  onComplete?: () => void;\n  onDisappearanceComplete?: () => void;\n}\n\nconst FadeContent: React.FC<FadeContentProps> = ({\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<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    let scrollerTarget: Element | string | null = container || document.getElementById('snap-main-container') || null;\n\n    if (typeof scrollerTarget === 'string') {\n      scrollerTarget = document.querySelector(scrollerTarget);\n    }\n\n    const startPct = (1 - threshold) * 100;\n    const getSeconds = (val: number) => (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  }, []);\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"
	]
}