{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-diff-wipe",
  "title": "Code Diff Wipe",
  "description": "Before/after code reveal via clip-path wipe with a handle marker.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/code-diff-wipe/index.tsx",
      "content": "\"use client\";\n\nimport { Easing, interpolate, useCurrentFrame } from \"remotion\";\n\nexport interface CodeDiffWipeProps {\n  before?: string;\n  after?: string;\n  language?: string;\n  background?: string;\n  accent?: string;\n  transitionStart?: number;\n  transitionDuration?: number;\n  showHandle?: boolean;\n  speed?: number;\n  className?: string;\n}\n\nconst DEFAULT_BEFORE = `function getUser(id) {\n  return fetch('/api/user/' + id)\n    .then(function (res) {\n      return res.json();\n    })\n    .then(function (data) {\n      if (data.error) {\n        throw new Error(data.error);\n      }\n      return data.user;\n    });\n}`;\n\nconst DEFAULT_AFTER = `async function getUser(id: string) {\n  const res = await fetch(\\`/api/user/\\${id}\\`);\n  const { user, error } = await res.json();\n  if (error) throw new Error(error);\n  return user;\n}`;\n\nexport function CodeDiffWipe({\n  before = DEFAULT_BEFORE,\n  after = DEFAULT_AFTER,\n  language = \"tsx\",\n  background = \"#0a0a0a\",\n  accent = \"#0ea5e9\",\n  transitionStart = 20,\n  transitionDuration = 60,\n  showHandle = true,\n  speed = 1,\n  className,\n}: CodeDiffWipeProps) {\n  const frame = useCurrentFrame() * speed;\n\n  const progress = interpolate(\n    frame,\n    [transitionStart, transitionStart + transitionDuration],\n    [0, 1],\n    {\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n      easing: Easing.inOut(Easing.cubic),\n    },\n  );\n\n  const wipePercent = progress * 100;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        background: \"#050505\",\n        fontFamily:\n          \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n      }}\n    >\n      <div\n        style={{\n          position: \"relative\",\n          width: 980,\n          height: 560,\n          borderRadius: 14,\n          overflow: \"hidden\",\n          background,\n          boxShadow:\n            \"0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06)\",\n        }}\n      >\n        {/* AFTER (bottom layer) */}\n        <CodePane\n          code={after}\n          background={background}\n          label=\"AFTER\"\n          labelColor={accent}\n          language={language}\n        />\n\n        {/* BEFORE (top layer, clipped) */}\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            clipPath: `inset(0 ${wipePercent}% 0 0)`,\n          }}\n        >\n          <CodePane\n            code={before}\n            background={background}\n            label=\"BEFORE\"\n            labelColor=\"#ef4444\"\n            language={language}\n            dimmed\n          />\n        </div>\n\n        {/* Handle */}\n        {showHandle && wipePercent > 0 && wipePercent < 100 && (\n          <div\n            style={{\n              position: \"absolute\",\n              top: 0,\n              bottom: 0,\n              left: `${wipePercent}%`,\n              width: 2,\n              background: accent,\n              transform: \"translateX(-1px)\",\n              boxShadow: `0 0 24px ${accent}`,\n            }}\n          >\n            <div\n              style={{\n                position: \"absolute\",\n                top: \"50%\",\n                left: \"50%\",\n                transform: \"translate(-50%, -50%)\",\n                width: 40,\n                height: 40,\n                borderRadius: \"50%\",\n                background: accent,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                color: \"#0a0a0a\",\n                fontSize: 18,\n                fontWeight: 700,\n                boxShadow: `0 0 32px ${accent}aa`,\n              }}\n            >\n              {\"<>\"}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction CodePane({\n  code,\n  background,\n  label,\n  labelColor,\n  language,\n  dimmed,\n}: {\n  code: string;\n  background: string;\n  label: string;\n  labelColor: string;\n  language: string;\n  dimmed?: boolean;\n}) {\n  const lines = code.split(\"\\n\");\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background,\n        display: \"flex\",\n        flexDirection: \"column\",\n      }}\n    >\n      {/* Header */}\n      <div\n        style={{\n          height: 44,\n          padding: \"0 18px\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          borderBottom: \"1px solid rgba(255,255,255,0.06)\",\n          background: \"rgba(255,255,255,0.02)\",\n        }}\n      >\n        <div\n          style={{\n            color: \"#71717a\",\n            fontSize: 13,\n            fontFamily:\n              \"var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace\",\n          }}\n        >\n          {language}\n        </div>\n        <div\n          style={{\n            fontSize: 11,\n            fontWeight: 700,\n            letterSpacing: \"0.12em\",\n            color: labelColor,\n            padding: \"4px 10px\",\n            borderRadius: 999,\n            background: `${labelColor}1a`,\n            border: `1px solid ${labelColor}55`,\n          }}\n        >\n          {label}\n        </div>\n      </div>\n\n      {/* Code */}\n      <pre\n        style={{\n          flex: 1,\n          margin: 0,\n          padding: 24,\n          color: dimmed ? \"#71717a\" : \"#e4e4e7\",\n          fontSize: 16,\n          lineHeight: 1.6,\n          fontFamily:\n            \"var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace\",\n          overflow: \"hidden\",\n          whiteSpace: \"pre\",\n        }}\n      >\n        {lines.map((line, i) => (\n          <div key={i} style={{ display: \"flex\" }}>\n            <span\n              style={{\n                width: 32,\n                textAlign: \"right\",\n                marginRight: 16,\n                color: \"#3f3f46\",\n                userSelect: \"none\",\n              }}\n            >\n              {i + 1}\n            </span>\n            <span>{line || \" \"}</span>\n          </div>\n        ))}\n      </pre>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/code-diff-wipe.tsx"
    }
  ],
  "type": "registry:component"
}