{
    "name": "reveal-on-scroll",
    "title": "Reveal On Scroll",
    "description": "Animate content into view on scroll with effects like fade, slide, zoom, and blur.",
    "type": "registry:ui",
    "dependencies": ["gsap", "@gsap/react"],
    "files": [
        {
            "path": "components/gsap/reveal-on-scroll.tsx",
            "type": "registry:ui",
            "target": "~/components/gsap/reveal-on-scroll.tsx",
            "content": "\"use client\";\n\nimport { ComponentProps, useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\ngsap.registerPlugin(ScrollTrigger);\n\ntype EffectType = \"fadeIn\" | \"slideInRight\" | \"zoomIn\" | \"blurIn\";\ntype RevealOnScrollProps = {\n    effect?: EffectType;\n    scrollTriggerVars?: ScrollTrigger.Vars;\n    fromVars?: gsap.TweenVars;\n    toVars?: gsap.TweenVars;\n} & ComponentProps<\"div\">;\n\nexport const RevealOnScroll = ({\n    effect = \"fadeIn\",\n    scrollTriggerVars,\n    fromVars,\n    toVars,\n    ...props\n}: RevealOnScrollProps) => {\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n    const animationRef = useRef<gsap.core.Tween | null>(null);\n\n    useGSAP(\n        () => {\n            const el = wrapperRef.current;\n            if (!el) return;\n\n            // Cleanup previous animation\n            animationRef.current?.scrollTrigger?.kill();\n            animationRef.current?.kill();\n            gsap.set(el, { clearProps: \"all\" });\n\n            const scrollTrigger: ScrollTrigger.Vars = {\n                trigger: el,\n                start: \"top 80%\",\n                toggleActions: \"play pause play reverse\",\n                ...scrollTriggerVars,\n            };\n\n            const presets: Record<EffectType, { from: gsap.TweenVars; to: gsap.TweenVars }> = {\n                fadeIn: {\n                    from: { opacity: 0, y: 50 },\n                    to: { opacity: 1, y: 0, duration: 1 },\n                },\n                slideInRight: {\n                    from: { x: 100, opacity: 0 },\n                    to: { x: 0, opacity: 1, duration: 1 },\n                },\n                zoomIn: {\n                    from: { scale: 0.8, opacity: 0 },\n                    to: { scale: 1, opacity: 1, duration: 1 },\n                },\n                blurIn: {\n                    from: { y: 30, opacity: 0, filter: \"blur(10px)\" },\n                    to: { y: 0, opacity: 1, filter: \"blur(0px)\", duration: 1 },\n                },\n            };\n\n            const preset = presets[effect] || presets.fadeIn;\n            const fromVarsFinal = { ...preset.from, ...fromVars };\n            const toVarsFinal = { ...preset.to, scrollTrigger, ...toVars };\n\n            animationRef.current = gsap.fromTo(el, fromVarsFinal, toVarsFinal);\n\n            return () => {\n                animationRef.current?.scrollTrigger?.kill();\n                animationRef.current?.kill();\n            };\n        },\n        { scope: wrapperRef, dependencies: [effect, scrollTriggerVars, fromVars, toVars] },\n    );\n\n    return <div {...props} ref={wrapperRef} />;\n};\n"
        }
    ]
}