{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-wipe",
  "title": "Page Wipe",
  "description": "Controlled curtain, split, and iris transition overlay.",
  "registryDependencies": [
    "https://components.exe.xyz/r/use-reduced-motion.json"
  ],
  "files": [
    {
      "path": "src/components/effects/page-wipe.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\"\n\n/*\n * SPDX-License-Identifier: MIT\n * Inspired by Amicro's Page Transition experiments by Syed Subhan Uddin.\n * Upstream: https://github.com/Subhan-code/Amicro--Micro-transitions-\n * Source: registry/ui/transitions/page-transition.tsx\n * Audited revision: 07adc1640084940f045875e2bb1b682c90f30c3c\n * This implementation is an original accessible React/CSS adaptation.\n */\n\nexport type PageWipeProps = {\n  active: boolean\n  variant?: \"curtain\" | \"split\" | \"iris\"\n  color?: string\n  duration?: number\n  contained?: boolean\n  className?: string\n  onRest?: (active: boolean) => void\n}\n\nexport function PageWipe({\n  active,\n  variant = \"curtain\",\n  color = \"#111827\",\n  duration = 560,\n  contained = false,\n  className = \"\",\n  onRest,\n}: PageWipeProps) {\n  const reduced = useReducedMotion()\n  const onRestRef = React.useRef(onRest)\n\n  React.useEffect(() => {\n    onRestRef.current = onRest\n  }, [onRest])\n\n  React.useEffect(() => {\n    if (!onRestRef.current) return\n    const timer = window.setTimeout(\n      () => onRestRef.current?.(active),\n      reduced ? 120 : duration\n    )\n    return () => window.clearTimeout(timer)\n  }, [active, duration, reduced])\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-page-wipe=\"\"\n      data-active={active ? \"true\" : \"false\"}\n      data-variant={variant}\n      className={`${\n        contained ? \"absolute\" : \"fixed\"\n      } inset-0 z-50 overflow-hidden ${className}`}\n      style={\n        {\n          \"--page-wipe-color\": color,\n          \"--page-wipe-duration\": `${reduced ? 120 : duration}ms`,\n        } as React.CSSProperties\n      }\n    >\n      <style>{`\n        [data-page-wipe] { pointer-events: none; }\n        [data-page-wipe]::before,\n        [data-page-wipe]::after {\n          background: var(--page-wipe-color);\n          content: \"\";\n          position: absolute;\n          transition-duration: var(--page-wipe-duration);\n          transition-timing-function: cubic-bezier(.76,0,.24,1);\n        }\n        [data-page-wipe][data-variant=\"curtain\"]::before {\n          inset: 0;\n          transform: translate3d(0,-101%,0);\n          transition-property: transform;\n        }\n        [data-page-wipe][data-variant=\"curtain\"][data-active=\"true\"]::before { transform: translate3d(0,0,0); }\n        [data-page-wipe][data-variant=\"split\"]::before,\n        [data-page-wipe][data-variant=\"split\"]::after {\n          inset-block: 0;\n          width: 51%;\n          transition-property: transform;\n        }\n        [data-page-wipe][data-variant=\"split\"]::before { left: 0; transform: translate3d(-101%,0,0); }\n        [data-page-wipe][data-variant=\"split\"]::after { right: 0; transform: translate3d(101%,0,0); }\n        [data-page-wipe][data-variant=\"split\"][data-active=\"true\"]::before,\n        [data-page-wipe][data-variant=\"split\"][data-active=\"true\"]::after { transform: translate3d(0,0,0); }\n        [data-page-wipe][data-variant=\"iris\"]::before {\n          border-radius: 50%;\n          height: 150vmax;\n          left: 50%;\n          top: 50%;\n          transform: translate(-50%,-50%) scale(0);\n          transition-property: transform;\n          width: 150vmax;\n        }\n        [data-page-wipe][data-variant=\"iris\"][data-active=\"true\"]::before { transform: translate(-50%,-50%) scale(1); }\n        @media (prefers-reduced-motion: reduce) {\n          [data-page-wipe] { background: var(--page-wipe-color); opacity: 0; transition: opacity var(--page-wipe-duration) ease; }\n          [data-page-wipe][data-active=\"true\"] { opacity: 1; }\n          [data-page-wipe]::before, [data-page-wipe]::after { display: none; }\n        }\n      `}</style>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "src/components/effects/page-wipe.tsx"
    }
  ],
  "meta": {
    "collection": "motion-effects",
    "license": "MIT",
    "usage": "const [active, setActive] = React.useState(false)\n\nreturn (\n  <>\n    <button type=\"button\" onClick={() => setActive(true)}>\n      Navigate\n    </button>\n    <PageWipe\n      active={active}\n      variant=\"curtain\"\n      onRest={(covered) => covered && setActive(false)}\n    />\n  </>\n)",
    "source": "https://github.com/Subhan-code/Amicro--Micro-transitions-",
    "sourcePath": "registry/ui/transitions/page-transition.tsx",
    "sourceRevision": "07adc1640084940f045875e2bb1b682c90f30c3c"
  },
  "type": "registry:ui"
}