{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "center-split-reveal",
  "description": "A center-split mask reveal — the image is clipped to a closed vertical seam down the middle, then the clip-path opens left and right to split it apart and uncover the whole frame.",
  "dependencies": [
    "gsap"
  ],
  "files": [
    {
      "path": "registry/new-york/mask/center-split-reveal.tsx",
      "content": "\"use client\";\n\n/**\n * A center-split mask reveal — the image is clipped to a closed seam at the middle, then the clip-path opens outward (left/right for \"horizontal\", top/bottom for \"vertical\") to split it apart and uncover the whole frame.\n */\n\nimport { useEffect, useRef } from \"react\";\nimport gsap from \"gsap\";\n\nconst SRC = \"/bend-image-reveal.gif\";\n\nexport type SplitAxis = \"horizontal\" | \"vertical\";\n\nconst HIDDEN: Record<SplitAxis, string> = {\n  horizontal: \"inset(0% 50% 0% 50% round 12px)\",\n  vertical: \"inset(50% 0% 50% 0% round 12px)\",\n};\nconst SHOWN = \"inset(0% 0% 0% 0% round 12px)\";\n\nconst CenterSplitReveal = ({\n  axis = \"horizontal\",\n}: {\n  axis?: SplitAxis;\n}) => {\n  const imgRef = useRef<HTMLImageElement>(null);\n\n  const reveal = () => {\n    if (!imgRef.current) return;\n    gsap.fromTo(\n      imgRef.current,\n      {\n        clipPath: HIDDEN[axis],\n        scale: 1.4,\n        filter: \"blur(16px)\",\n      },\n      {\n        clipPath: SHOWN,\n        scale: 1,\n        filter: \"blur(0px)\",\n        duration: 1.2,\n        ease: \"power4.inOut\",\n      },\n    );\n  };\n\n  useEffect(() => {\n    reveal();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [axis]);\n\n  return (\n    <button\n      onClick={reveal}\n      className=\"relative aspect-video w-[40rem] max-w-[92%] cursor-pointer overflow-hidden rounded-xl\"\n      aria-label=\"Replay reveal\"\n    >\n      <img\n        ref={imgRef}\n        src={SRC}\n        alt=\"reveal\"\n        className=\"size-full object-cover\"\n        style={{\n          clipPath: HIDDEN[axis],\n          transform: \"scale(1.4)\",\n          filter: \"blur(16px)\",\n        }}\n      />\n    </button>\n  );\n};\n\nexport default CenterSplitReveal;\n",
      "type": "registry:component",
      "target": "components/pixel-perfect/center-split-reveal.tsx"
    }
  ],
  "type": "registry:block"
}