{

"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 style,\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\n const getSeconds = (val) => (typeof 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 // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div ref={ref} className={className} style={style} {...props}>\n {children}\n </div>\n );\n};\n\nexport default FadeContent;\n"

"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 style,\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\n const getSeconds = val => (typeof 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 // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div ref={ref} className={className} style={style} {...props}>\n {children}\n </div>\n );\n};\n\nexport default FadeContent;\n"

}

],

"registryDependencies": [],

{

"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"

"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": [],