Merge branch 'main' into stack

Author: freakdaniel

public/r/AnimatedContent-JS-CSS.json

@@ -8,7 +8,7 @@
 		{
 			"type": "registry:component",
 			"path": "AnimatedContent/AnimatedContent.jsx",
-			"content": "import { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst AnimatedContent = ({\n  children,\n  container,\n  distance = 100,\n  direction = 'vertical',\n  reverse = false,\n  duration = 0.8,\n  ease = 'power3.out',\n  initialOpacity = 0,\n  animateOpacity = true,\n  scale = 1,\n  threshold = 0.1,\n  delay = 0,\n  disappearAfter = 0,\n  disappearDuration = 0.5,\n  disappearEase = 'power3.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    \n    if (typeof scrollerTarget === 'string') {\n        scrollerTarget = document.querySelector(scrollerTarget);\n    }\n\n    const axis = direction === 'horizontal' ? 'x' : 'y';\n    const offset = reverse ? -distance : distance;\n    const startPct = (1 - threshold) * 100;\n\n    gsap.set(el, {\n      [axis]: offset,\n      scale,\n      opacity: animateOpacity ? initialOpacity : 1,\n      visibility: 'visible'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay,\n      onComplete: () => {\n        if (onComplete) onComplete();\n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            [axis]: reverse ? distance : -distance,\n            scale: 0.8,\n            opacity: animateOpacity ? initialOpacity : 0,\n            delay: disappearAfter,\n            duration: disappearDuration,\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      [axis]: 0,\n      scale: 1,\n      opacity: 1,\n      duration,\n      ease\n    });\n\n    const st = ScrollTrigger.create({\n      trigger: el,\n      scroller: scrollerTarget,\n      start: `top ${startPct}%`,\n      once: true,\n      onEnter: () => tl.play()\n    });\n\n    return () => {\n      st.kill();\n      tl.kill();\n    };\n  }, [\n    container,\n    distance, direction, reverse, duration, ease, \n    initialOpacity, animateOpacity, scale, threshold, \n    delay, disappearAfter, disappearDuration, \n    disappearEase, onComplete, onDisappearanceComplete\n  ]);\n\n  return (\n    <div \n        ref={ref} \n        className={className}\n        style={{ visibility: 'hidden' }} \n        {...props}\n    >\n        {children}\n    </div>\n  );\n};\n\nexport default AnimatedContent;"
+			"content": "import { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst AnimatedContent = ({\n  children,\n  container,\n  distance = 100,\n  direction = 'vertical',\n  reverse = false,\n  duration = 0.8,\n  ease = 'power3.out',\n  initialOpacity = 0,\n  animateOpacity = true,\n  scale = 1,\n  threshold = 0.1,\n  delay = 0,\n  disappearAfter = 0,\n  disappearDuration = 0.5,\n  disappearEase = 'power3.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\n    if (typeof scrollerTarget === 'string') {\n      scrollerTarget = document.querySelector(scrollerTarget);\n    }\n\n    const axis = direction === 'horizontal' ? 'x' : 'y';\n    const offset = reverse ? -distance : distance;\n    const startPct = (1 - threshold) * 100;\n\n    gsap.set(el, {\n      [axis]: offset,\n      scale,\n      opacity: animateOpacity ? initialOpacity : 1,\n      visibility: 'visible'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay,\n      onComplete: () => {\n        if (onComplete) onComplete();\n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            [axis]: reverse ? distance : -distance,\n            scale: 0.8,\n            opacity: animateOpacity ? initialOpacity : 0,\n            delay: disappearAfter,\n            duration: disappearDuration,\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      [axis]: 0,\n      scale: 1,\n      opacity: 1,\n      duration,\n      ease\n    });\n\n    const st = ScrollTrigger.create({\n      trigger: el,\n      scroller: scrollerTarget,\n      start: `top ${startPct}%`,\n      once: true,\n      onEnter: () => tl.play()\n    });\n\n    return () => {\n      st.kill();\n      tl.kill();\n    };\n  }, [\n    container,\n    distance,\n    direction,\n    reverse,\n    duration,\n    ease,\n    initialOpacity,\n    animateOpacity,\n    scale,\n    threshold,\n    delay,\n    disappearAfter,\n    disappearDuration,\n    disappearEase,\n    onComplete,\n    onDisappearanceComplete\n  ]);\n\n  return (\n    <div ref={ref} className={className} style={{ visibility: 'hidden' }} {...props}>\n      {children}\n    </div>\n  );\n};\n\nexport default AnimatedContent;\n"
 		}
 	],
 	"registryDependencies": [],

public/r/AnimatedContent-JS-TW.json

@@ -8,7 +8,7 @@
 		{
 			"type": "registry:component",
 			"path": "AnimatedContent/AnimatedContent.jsx",
-			"content": "import { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst AnimatedContent = ({\n  children,\n  container,\n  distance = 100,\n  direction = 'vertical',\n  reverse = false,\n  duration = 0.8,\n  ease = 'power3.out',\n  initialOpacity = 0,\n  animateOpacity = true,\n  scale = 1,\n  threshold = 0.1,\n  delay = 0,\n  disappearAfter = 0,\n  disappearDuration = 0.5,\n  disappearEase = 'power3.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\n    if (typeof scrollerTarget === 'string') {\n      scrollerTarget = document.querySelector(scrollerTarget);\n    }\n\n    const axis = direction === 'horizontal' ? 'x' : 'y';\n    const offset = reverse ? -distance : distance;\n    const startPct = (1 - threshold) * 100;\n\n    gsap.set(el, {\n      [axis]: offset,\n      scale,\n      opacity: animateOpacity ? initialOpacity : 1,\n      visibility: 'visible'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay,\n      onComplete: () => {\n        if (onComplete) onComplete();\n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            [axis]: reverse ? distance : -distance,\n            scale: 0.8,\n            opacity: animateOpacity ? initialOpacity : 0,\n            delay: disappearAfter,\n            duration: disappearDuration,\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      [axis]: 0,\n      scale: 1,\n      opacity: 1,\n      duration,\n      ease\n    });\n\n    const st = ScrollTrigger.create({\n      trigger: el,\n      scroller: scrollerTarget,\n      start: `top ${startPct}%`,\n      once: true,\n      onEnter: () => tl.play()\n    });\n\n    return () => {\n      st.kill();\n      tl.kill();\n    };\n  }, [\n    container,\n    distance, direction, reverse, duration, ease,\n    initialOpacity, animateOpacity, scale, threshold,\n    delay, 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 AnimatedContent;"
+			"content": "import { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst AnimatedContent = ({\n  children,\n  container,\n  distance = 100,\n  direction = 'vertical',\n  reverse = false,\n  duration = 0.8,\n  ease = 'power3.out',\n  initialOpacity = 0,\n  animateOpacity = true,\n  scale = 1,\n  threshold = 0.1,\n  delay = 0,\n  disappearAfter = 0,\n  disappearDuration = 0.5,\n  disappearEase = 'power3.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\n    if (typeof scrollerTarget === 'string') {\n      scrollerTarget = document.querySelector(scrollerTarget);\n    }\n\n    const axis = direction === 'horizontal' ? 'x' : 'y';\n    const offset = reverse ? -distance : distance;\n    const startPct = (1 - threshold) * 100;\n\n    gsap.set(el, {\n      [axis]: offset,\n      scale,\n      opacity: animateOpacity ? initialOpacity : 1,\n      visibility: 'visible'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay,\n      onComplete: () => {\n        if (onComplete) onComplete();\n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            [axis]: reverse ? distance : -distance,\n            scale: 0.8,\n            opacity: animateOpacity ? initialOpacity : 0,\n            delay: disappearAfter,\n            duration: disappearDuration,\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      [axis]: 0,\n      scale: 1,\n      opacity: 1,\n      duration,\n      ease\n    });\n\n    const st = ScrollTrigger.create({\n      trigger: el,\n      scroller: scrollerTarget,\n      start: `top ${startPct}%`,\n      once: true,\n      onEnter: () => tl.play()\n    });\n\n    return () => {\n      st.kill();\n      tl.kill();\n    };\n  }, [\n    container,\n    distance,\n    direction,\n    reverse,\n    duration,\n    ease,\n    initialOpacity,\n    animateOpacity,\n    scale,\n    threshold,\n    delay,\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 AnimatedContent;\n"
 		}
 	],
 	"registryDependencies": [],

public/r/AnimatedContent-TS-CSS.json

@@ -8,7 +8,7 @@
 		{
 			"type": "registry:component",
 			"path": "AnimatedContent/AnimatedContent.tsx",
-			"content": "import React, { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface AnimatedContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  container?: Element | string | null;\n  distance?: number;\n  direction?: 'vertical' | 'horizontal';\n  reverse?: boolean;\n  duration?: number;\n  ease?: string;\n  initialOpacity?: number;\n  animateOpacity?: boolean;\n  scale?: number;\n  threshold?: number;\n  delay?: number;\n  disappearAfter?: number;\n  disappearDuration?: number;\n  disappearEase?: string;\n  onComplete?: () => void;\n  onDisappearanceComplete?: () => void;\n}\n\nconst AnimatedContent: React.FC<AnimatedContentProps> = ({\n  children,\n  container,\n  distance = 100,\n  direction = 'vertical',\n  reverse = false,\n  duration = 0.8,\n  ease = 'power3.out',\n  initialOpacity = 0,\n  animateOpacity = true,\n  scale = 1,\n  threshold = 0.1,\n  delay = 0,\n  disappearAfter = 0,\n  disappearDuration = 0.5,\n  disappearEase = 'power3.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 axis = direction === 'horizontal' ? 'x' : 'y';\n    const offset = reverse ? -distance : distance;\n    const startPct = (1 - threshold) * 100;\n\n    gsap.set(el, {\n      [axis]: offset,\n      scale,\n      opacity: animateOpacity ? initialOpacity : 1,\n      visibility: 'visible'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay,\n      onComplete: () => {\n        if (onComplete) onComplete();\n        \n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            [axis]: reverse ? distance : -distance,\n            scale: 0.8,\n            opacity: animateOpacity ? initialOpacity : 0,\n            delay: disappearAfter,\n            duration: disappearDuration,\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      [axis]: 0,\n      scale: 1,\n      opacity: 1,\n      duration,\n      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    };\n  }, [\n    container,\n    distance,\n    direction,\n    reverse,\n    duration,\n    ease,\n    initialOpacity,\n    animateOpacity,\n    scale,\n    threshold,\n    delay,\n    disappearAfter,\n    disappearDuration,\n    disappearEase,\n    onComplete,\n    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 AnimatedContent;"
+			"content": "import React, { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface AnimatedContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  container?: Element | string | null;\n  distance?: number;\n  direction?: 'vertical' | 'horizontal';\n  reverse?: boolean;\n  duration?: number;\n  ease?: string;\n  initialOpacity?: number;\n  animateOpacity?: boolean;\n  scale?: number;\n  threshold?: number;\n  delay?: number;\n  disappearAfter?: number;\n  disappearDuration?: number;\n  disappearEase?: string;\n  onComplete?: () => void;\n  onDisappearanceComplete?: () => void;\n}\n\nconst AnimatedContent: React.FC<AnimatedContentProps> = ({\n  children,\n  container,\n  distance = 100,\n  direction = 'vertical',\n  reverse = false,\n  duration = 0.8,\n  ease = 'power3.out',\n  initialOpacity = 0,\n  animateOpacity = true,\n  scale = 1,\n  threshold = 0.1,\n  delay = 0,\n  disappearAfter = 0,\n  disappearDuration = 0.5,\n  disappearEase = 'power3.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 axis = direction === 'horizontal' ? 'x' : 'y';\n    const offset = reverse ? -distance : distance;\n    const startPct = (1 - threshold) * 100;\n\n    gsap.set(el, {\n      [axis]: offset,\n      scale,\n      opacity: animateOpacity ? initialOpacity : 1,\n      visibility: 'visible'\n    });\n\n    const tl = gsap.timeline({\n      paused: true,\n      delay,\n      onComplete: () => {\n        if (onComplete) onComplete();\n\n        if (disappearAfter > 0) {\n          gsap.to(el, {\n            [axis]: reverse ? distance : -distance,\n            scale: 0.8,\n            opacity: animateOpacity ? initialOpacity : 0,\n            delay: disappearAfter,\n            duration: disappearDuration,\n            ease: disappearEase,\n            onComplete: () => onDisappearanceComplete?.()\n          });\n        }\n      }\n    });\n\n    tl.to(el, {\n      [axis]: 0,\n      scale: 1,\n      opacity: 1,\n      duration,\n      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    };\n  }, [\n    container,\n    distance,\n    direction,\n    reverse,\n    duration,\n    ease,\n    initialOpacity,\n    animateOpacity,\n    scale,\n    threshold,\n    delay,\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 AnimatedContent;\n"
 		}
 	],
 	"registryDependencies": [],