{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "ScrollFloat-TS-TW",
	"title": "ScrollFloat",
	"description": "Text gently floats / parallax shifts on scroll.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "ScrollFloat/ScrollFloat.tsx",
			"content": "import React, { useEffect, useMemo, useRef, type ReactNode, type RefObject } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface ScrollFloatProps {\n  children: ReactNode;\n  scrollContainerRef?: RefObject<HTMLElement>;\n  containerClassName?: string;\n  textClassName?: string;\n  animationDuration?: number;\n  ease?: string;\n  scrollStart?: string;\n  scrollEnd?: string;\n  stagger?: number;\n}\n\nconst ScrollFloat: React.FC<ScrollFloatProps> = ({\n  children,\n  scrollContainerRef,\n  containerClassName = '',\n  textClassName = '',\n  animationDuration = 1,\n  ease = 'back.inOut(2)',\n  scrollStart = 'center bottom+=50%',\n  scrollEnd = 'bottom bottom-=40%',\n  stagger = 0.03\n}) => {\n  const containerRef = useRef<HTMLHeadingElement>(null);\n\n  const splitText = useMemo(() => {\n    const text = typeof children === 'string' ? children : '';\n    return text.split('').map((char, index) => (\n      <span className=\"inline-block word\" key={index}>\n        {char === ' ' ? '\\u00A0' : char}\n      </span>\n    ));\n  }, [children]);\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n\n    const scroller = scrollContainerRef && scrollContainerRef.current ? scrollContainerRef.current : window;\n\n    const charElements = el.querySelectorAll('.inline-block');\n\n    gsap.fromTo(\n      charElements,\n      {\n        willChange: 'opacity, transform',\n        opacity: 0,\n        yPercent: 120,\n        scaleY: 2.3,\n        scaleX: 0.7,\n        transformOrigin: '50% 0%'\n      },\n      {\n        duration: animationDuration,\n        ease: ease,\n        opacity: 1,\n        yPercent: 0,\n        scaleY: 1,\n        scaleX: 1,\n        stagger: stagger,\n        scrollTrigger: {\n          trigger: el,\n          scroller,\n          start: scrollStart,\n          end: scrollEnd,\n          scrub: true\n        }\n      }\n    );\n  }, [scrollContainerRef, animationDuration, ease, scrollStart, scrollEnd, stagger]);\n\n  return (\n    <h2 ref={containerRef} className={`my-5 overflow-hidden ${containerClassName}`}>\n      <span className={`inline-block text-[clamp(1.6rem,4vw,3rem)] leading-[1.5] ${textClassName}`}>{splitText}</span>\n    </h2>\n  );\n};\n\nexport default ScrollFloat;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"gsap@^3.13.0"
	]
}