{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "AnimatedContent-JS-CSS",
	"title": "AnimatedContent",
	"description": "Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.",
	"type": "registry:component",
	"files": [
		{
			"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,\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": [],
	"dependencies": [
		"gsap@^3.13.0"
	]
}