{
  "title": "Overlay Effect",
  "description": "Overlay effect with GSAP animation.",
  "name": "gsap-overlay-effect",
  "dependencies": [
    "gsap",
    "@gsap/react"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/gsap/overlay-effect.tsx",
      "type": "registry:ui",
      "content": "import { type CSSProperties, type ComponentProps, useMemo, useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype EffectType = \"type-1\" | \"type-2\" | \"type-3\" | \"type-4\";\n\nconst effects: Record<EffectType, CSSProperties> = {\n    \"type-1\": {\n        filter: \"blur(0.3em) contrast(50)\",\n        backgroundImage: `\n    radial-gradient(circle at var(--clientX, 50%) var(--clientY, 50%), transparent, 6em, black 10em),\n    radial-gradient(circle, black 0.2em, transparent 1em),\n    radial-gradient(circle, black 0.2em, transparent 1em)\n  `,\n        backgroundSize: \"100% 100%, 2em 3em, 2em 3em\",\n        backgroundPosition: \"0 0, 0 0, 1em 1.5em\",\n    },\n    \"type-2\": {\n        filter: \"blur(1em) contrast(100)\",\n        backgroundImage: `\n    radial-gradient(circle at var(--clientX, 50%) var(--clientY, 50%), transparent, black 16em),\n    repeating-linear-gradient(45deg, black 0 0.4em, transparent 0 3em),\n    repeating-linear-gradient(-45deg, black 0 0.4em, transparent 0 3em)\n  `,\n    },\n    \"type-3\": {\n        filter: \"blur(0.1em) contrast(10)\",\n        backgroundImage: `\n    radial-gradient(circle at var(--clientX, 50%) var(--clientY, 50%), transparent, black 14em),\n    repeating-linear-gradient(0deg, black 0, transparent 0.1em 2.9em, black 3em),\n    repeating-linear-gradient(90deg, black 0, transparent 0.1em 2.9em, black 3em)\n  `,\n        backgroundPosition: `\n    0 0, \n    0 calc(var(--clientY, 50%) * -0.2), \n    calc(var(--clientX, 50%) * -0.2) 0\n  `,\n    },\n    \"type-4\": {\n        filter: \"blur(0.5em) contrast(10)\",\n        backgroundImage: `\n    radial-gradient(circle at var(--clientX, 50%) var(--clientY, 50%), transparent 6em, black 8em),\n    repeating-linear-gradient(60deg, black 0 0.6em, transparent 0 3em)\n  `,\n    },\n};\n\nexport type OverlayEffectProps = ComponentProps<\"div\"> & {\n    effect?: EffectType;\n};\n\nexport const OverlayEffect = ({ effect = \"type-2\", className, ...props }: OverlayEffectProps) => {\n    const elementRef = useRef<HTMLDivElement>(null);\n\n    const styles = useMemo(() => effects[effect], [effect]);\n    const proxy = { x: 0, y: 0 };\n\n    useGSAP(() => {\n        const element = elementRef.current;\n        const parentElement = element?.parentElement;\n        if (!element || !parentElement) return;\n        parentElement.style.position = \"relative\";\n\n        const move = (e: MouseEvent) => {\n            const rect = parentElement.getBoundingClientRect();\n            const targetX = e.clientX - rect.left;\n            const targetY = e.clientY - rect.top;\n\n            gsap.to(proxy, {\n                x: targetX,\n                y: targetY,\n                duration: 0.3,\n                ease: \"power1.out\",\n                onUpdate: () => {\n                    element.style.setProperty(\"--clientX\", `${proxy.x}px`);\n                    element.style.setProperty(\"--clientY\", `${proxy.y}px`);\n                },\n            });\n        };\n\n        const enter = () => {\n            element.classList.remove(\"remove\");\n        };\n\n        const leave = () => {\n            element.classList.add(\"remove\");\n        };\n\n        parentElement.addEventListener(\"mousemove\", move);\n        parentElement.addEventListener(\"mouseenter\", enter);\n        parentElement.addEventListener(\"mouseleave\", leave);\n\n        return () => {\n            parentElement.removeEventListener(\"mousemove\", move);\n            parentElement.removeEventListener(\"mouseenter\", enter);\n            parentElement.removeEventListener(\"mouseleave\", leave);\n        };\n    });\n\n    return (\n        <div\n            ref={elementRef}\n            style={styles}\n            className={cn(\n                \"pointer-events-none absolute inset-0 bg-white opacity-80 mix-blend-darken outline-8 outline-black transition-all duration-1000 [&.remove]:bg-black [&.remove]:opacity-0\",\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n"
    }
  ],
  "mcp": {
    "description": "Provides refined UI interactions and accessible controls. Overlay effect with GSAP animation. Configurable props include: ComponentProps<\"div\"> & {; effect?: EffectType;. Relies on gsap, @gsap/react. Optimal for building reusable interface elements and user input flows.",
    "tags": [
      "component",
      "gsap",
      "animation"
    ]
  }
}