format

Author: DavidHDev

public/r/FadeContent-JS-CSS.json

@@ -8,7 +8,7 @@
 		{
 			"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 = 1,\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    gsap.set(el, {\n      opacity: initialOpacity,\n      filter: blur ? 'blur(10px)' : 'blur(0px)',\n      visibility: 'visible'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay: delay,\n      onComplete: () => {\n        if (onComplete) onComplete();\n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            opacity: initialOpacity,\n            filter: blur ? 'blur(10px)' : 'blur(0px)',\n            delay: disappearAfter,\n            duration: disappearDuration,\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      opacity: 1,\n      filter: 'blur(0px)',\n      duration: 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    container, blur, duration, ease, delay, threshold, \n    initialOpacity, disappearAfter, disappearDuration, \n    disappearEase, onComplete, onDisappearanceComplete\n  ]);\n\n  return (\n    <div\n      ref={ref}\n      className={className}\n      style={{ visibility: 'hidden', ...style }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default FadeContent;"
+			"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 = 1,\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    gsap.set(el, {\n      opacity: initialOpacity,\n      filter: blur ? 'blur(10px)' : 'blur(0px)',\n      visibility: 'visible'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay: delay,\n      onComplete: () => {\n        if (onComplete) onComplete();\n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            opacity: initialOpacity,\n            filter: blur ? 'blur(10px)' : 'blur(0px)',\n            delay: disappearAfter,\n            duration: disappearDuration,\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      opacity: 1,\n      filter: 'blur(0px)',\n      duration: 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    container,\n    blur,\n    duration,\n    ease,\n    delay,\n    threshold,\n    initialOpacity,\n    disappearAfter,\n    disappearDuration,\n    disappearEase,\n    onComplete,\n    onDisappearanceComplete\n  ]);\n\n  return (\n    <div ref={ref} className={className} style={{ visibility: 'hidden', ...style }} {...props}>\n      {children}\n    </div>\n  );\n};\n\nexport default FadeContent;\n"
 		}
 	],
 	"registryDependencies": [],

public/r/FadeContent-JS-TW.json

@@ -8,7 +8,7 @@
 		{
 			"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 = 1,\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\n    gsap.set(el, {\n      opacity: initialOpacity,\n      filter: blur ? 'blur(10px)' : 'blur(0px)',\n      visibility: 'visible'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay: delay,\n      onComplete: () => {\n        if (onComplete) onComplete();\n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            opacity: initialOpacity,\n            filter: blur ? 'blur(10px)' : 'blur(0px)',\n            delay: disappearAfter,\n            duration: disappearDuration,\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      opacity: 1,\n      filter: 'blur(0px)',\n      duration: 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    container, blur, duration, ease, delay, threshold, \n    initialOpacity, disappearAfter, disappearDuration, \n    disappearEase, onComplete, onDisappearanceComplete\n  ]);\n\n  return (\n    <div\n      ref={ref}\n      className={`invisible ${className}`}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default FadeContent;"
+			"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 = 1,\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\n    gsap.set(el, {\n      opacity: initialOpacity,\n      filter: blur ? 'blur(10px)' : 'blur(0px)',\n      visibility: 'visible'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay: delay,\n      onComplete: () => {\n        if (onComplete) onComplete();\n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            opacity: initialOpacity,\n            filter: blur ? 'blur(10px)' : 'blur(0px)',\n            delay: disappearAfter,\n            duration: disappearDuration,\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      opacity: 1,\n      filter: 'blur(0px)',\n      duration: 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    container,\n    blur,\n    duration,\n    ease,\n    delay,\n    threshold,\n    initialOpacity,\n    disappearAfter,\n    disappearDuration,\n    disappearEase,\n    onComplete,\n    onDisappearanceComplete\n  ]);\n\n  return (\n    <div ref={ref} className={`invisible ${className}`} {...props}>\n      {children}\n    </div>\n  );\n};\n\nexport default FadeContent;\n"
 		}
 	],
 	"registryDependencies": [],

public/r/FadeContent-TS-CSS.json

@@ -8,7 +8,7 @@
 		{
 			"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 = 1,\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<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    let scrollerTarget: Element | string | null = \n      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\n    gsap.set(el, {\n      opacity: initialOpacity,\n      filter: blur ? 'blur(10px)' : 'blur(0px)',\n      visibility: 'visible'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay: delay,\n      onComplete: () => {\n        if (onComplete) onComplete();\n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            opacity: initialOpacity,\n            filter: blur ? 'blur(10px)' : 'blur(0px)',\n            delay: disappearAfter,\n            duration: disappearDuration,\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      opacity: 1,\n      filter: 'blur(0px)',\n      duration: 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    container, blur, duration, ease, delay, threshold, \n    initialOpacity, disappearAfter, disappearDuration, \n    disappearEase, onComplete, onDisappearanceComplete\n  ]);\n\n  return (\n    <div\n      ref={ref}\n      className={className}\n      style={{ visibility: 'hidden', ...style }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default FadeContent;"
+			"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 = 1,\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<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\n    gsap.set(el, {\n      opacity: initialOpacity,\n      filter: blur ? 'blur(10px)' : 'blur(0px)',\n      visibility: 'visible'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay: delay,\n      onComplete: () => {\n        if (onComplete) onComplete();\n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            opacity: initialOpacity,\n            filter: blur ? 'blur(10px)' : 'blur(0px)',\n            delay: disappearAfter,\n            duration: disappearDuration,\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      opacity: 1,\n      filter: 'blur(0px)',\n      duration: 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    container,\n    blur,\n    duration,\n    ease,\n    delay,\n    threshold,\n    initialOpacity,\n    disappearAfter,\n    disappearDuration,\n    disappearEase,\n    onComplete,\n    onDisappearanceComplete\n  ]);\n\n  return (\n    <div ref={ref} className={className} style={{ visibility: 'hidden', ...style }} {...props}>\n      {children}\n    </div>\n  );\n};\n\nexport default FadeContent;\n"
 		}
 	],
 	"registryDependencies": [],