{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "directional-wipe",
  "title": "Directional Wipe",
  "description": "Slide one scene in while pushing the other out.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/bases/editframe/components/directional-wipe/index.tsx",
      "content": "\"use client\";\n\nimport { Timegroup } from \"@editframe/react\";\nimport type { ReactNode, CSSProperties } from \"react\";\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nconst DefaultPanel = ({ label, color }: { label: string; color: string }) => (\n  <div\n    style={{\n      alignItems: \"center\",\n      background: color,\n      color: \"white\",\n      display: \"flex\",\n      fontFamily: FONT_FAMILY,\n      fontSize: 96,\n      fontWeight: 700,\n      inset: 0,\n      justifyContent: \"center\",\n      letterSpacing: \"-0.05em\",\n      position: \"absolute\",\n    }}\n  >\n    {label}\n  </div>\n);\n\nexport interface DirectionalWipeProps {\n  from?: ReactNode;\n  to?: ReactNode;\n  direction?: \"left\" | \"right\" | \"up\" | \"down\";\n  transitionStart?: number;\n  transitionDuration?: number;\n  speed?: number;\n  fps?: number;\n  durationInFrames?: number;\n  width?: number;\n  height?: number;\n  background?: string;\n  className?: string;\n}\n\nexport const DirectionalWipe = ({\n  from,\n  to,\n  direction = \"left\",\n  transitionStart = 36,\n  transitionDuration = 20,\n  speed = 1,\n  fps = 30,\n  durationInFrames = 90,\n  width = 1280,\n  height = 720,\n  background = \"black\",\n  className,\n}: DirectionalWipeProps) => {\n  const safeSpeed = Math.max(0.01, speed);\n  const durationMs = (durationInFrames / fps) * 1000;\n  const frameMs = 1000 / fps;\n  const startMs = transitionStart * frameMs;\n  const durationMsCalc = (transitionDuration * frameMs) / safeSpeed;\n\n  const axis: \"x\" | \"y\" =\n    direction === \"left\" || direction === \"right\" ? \"x\" : \"y\";\n  const sign = direction === \"left\" || direction === \"up\" ? -1 : 1;\n\n  const fromContent = from ?? <DefaultPanel label=\"Scene A\" color=\"#0ea5e9\" />;\n  const toContent = to ?? <DefaultPanel label=\"Scene B\" color=\"#9333ea\" />;\n\n  const containerStyle: CSSProperties = {\n    background,\n    height,\n    overflow: \"hidden\",\n    position: \"relative\",\n    width,\n  };\n\n  return (\n    <Timegroup\n      className={className}\n      duration={`${durationMs}ms`}\n      mode=\"fixed\"\n      style={containerStyle}\n    >\n      <>\n        <style>{`\n          @keyframes framecn-dir-wipe-from {\n            from { transform: translateX(0%); }\n            to { transform: translateX(${sign * 100}%); }\n          }\n          @keyframes framecn-dir-wipe-to {\n            from { transform: translateX(${-sign * 100}%); }\n            to { transform: translateX(0%); }\n          }\n          @keyframes framecn-dir-wipe-from-y {\n            from { transform: translateY(0%); }\n            to { transform: translateY(${sign * 100}%); }\n          }\n          @keyframes framecn-dir-wipe-to-y {\n            from { transform: translateY(${-sign * 100}%); }\n            to { transform: translateY(0%); }\n          }\n        `}</style>\n        <div\n          style={{\n            animation:\n              axis === \"x\"\n                ? `framecn-dir-wipe-from ${durationMsCalc}ms cubic-bezier(0.65, 0, 0.35, 1) ${startMs}ms backwards`\n                : `framecn-dir-wipe-from-y ${durationMsCalc}ms cubic-bezier(0.65, 0, 0.35, 1) ${startMs}ms backwards`,\n            inset: 0,\n            position: \"absolute\",\n            willChange: \"transform\",\n          }}\n        >\n          {fromContent}\n        </div>\n        <div\n          style={{\n            animation:\n              axis === \"x\"\n                ? `framecn-dir-wipe-to ${durationMsCalc}ms cubic-bezier(0.65, 0, 0.35, 1) ${startMs}ms backwards`\n                : `framecn-dir-wipe-to-y ${durationMsCalc}ms cubic-bezier(0.65, 0, 0.35, 1) ${startMs}ms backwards`,\n            inset: 0,\n            position: \"absolute\",\n            willChange: \"transform\",\n          }}\n        >\n          {toContent}\n        </div>\n      </>\n    </Timegroup>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/framecn/directional-wipe.tsx"
    }
  ],
  "type": "registry:component"
}