{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "brush-mask-reveal",
  "description": "A brush-stroke mask reveal — the image is painted in along a thick snaking brush stroke, using an inline SVG mask whose stroked path animates its stroke-dashoffset from hidden to fully drawn.",
  "dependencies": [
    "gsap"
  ],
  "files": [
    {
      "path": "registry/new-york/mask/brush-mask-reveal.tsx",
      "content": "\"use client\";\n\n/**\n * A brush-stroke mask reveal — the image is painted in along a thick snaking brush stroke, using an inline SVG mask whose stroked path animates its stroke-dashoffset from hidden to fully drawn.\n */\n\nimport { useEffect, useId, useRef } from \"react\";\nimport gsap from \"gsap\";\n\nconst SRC = \"/bend-image-reveal.gif\";\n\nconst STROKE = \"M -60 60 H 700 V 180 H -60 V 300 H 700\";\n\nconst BrushMaskReveal = () => {\n  const pathRef = useRef<SVGPathElement>(null);\n  const maskId = `brush-${useId().replace(/:/g, \"\")}`;\n\n  const reveal = () => {\n    if (!pathRef.current) return;\n    gsap.fromTo(\n      pathRef.current,\n      { strokeDashoffset: 1 },\n      { strokeDashoffset: 0, duration: 1.4, ease: \"power2.inOut\" },\n    );\n  };\n\n  useEffect(() => {\n    reveal();\n  }, []);\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      <svg\n        viewBox=\"0 0 640 360\"\n        preserveAspectRatio=\"xMidYMid slice\"\n        className=\"size-full\"\n        aria-hidden\n      >\n        <defs>\n          <mask id={maskId}>\n            <path\n              ref={pathRef}\n              d={STROKE}\n              fill=\"none\"\n              stroke=\"#fff\"\n              strokeWidth={130}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              pathLength={1}\n              strokeDasharray={1}\n              strokeDashoffset={1}\n            />\n          </mask>\n        </defs>\n        <image\n          href={SRC}\n          width=\"640\"\n          height=\"360\"\n          preserveAspectRatio=\"xMidYMid slice\"\n          mask={`url(#${maskId})`}\n        />\n      </svg>\n    </button>\n  );\n};\n\nexport default BrushMaskReveal;\n",
      "type": "registry:component",
      "target": "components/pixel-perfect/brush-mask-reveal.tsx"
    }
  ],
  "type": "registry:block"
}