{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "strikethrough-replace",
  "title": "Strikethrough Replace",
  "description": "Draws a strike line across old text then reveals new text in its place.",
  "dependencies": ["remotion"],
  "files": [
    {
      "path": "registry/remocn/strikethrough-replace/index.tsx",
      "content": "\"use client\";\n\nimport { interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface StrikethroughReplaceProps {\n  from: string;\n  to: string;\n  lineColor?: string;\n  fontSize?: number;\n  color?: string;\n  fontWeight?: number;\n  speed?: number;\n  className?: string;\n}\n\nexport function StrikethroughReplace({\n  from,\n  to,\n  lineColor = \"#ff5e3a\",\n  fontSize = 48,\n  color = \"#171717\",\n  fontWeight = 600,\n  speed = 1,\n  className,\n}: StrikethroughReplaceProps) {\n  const frame = useCurrentFrame() * speed;\n  const { durationInFrames } = useVideoConfig();\n\n  // Phases:\n  // 0 .. 40% -> draw strikethrough across `from`\n  // 40% .. 60% -> fade out `from`, fade in `to`\n  // 60% .. 100% -> hold\n  const strikeEnd = durationInFrames * 0.4;\n  const fadeStart = durationInFrames * 0.4;\n  const fadeEnd = durationInFrames * 0.6;\n\n  const linePct = interpolate(frame, [0, strikeEnd], [0, 100], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  const fromOpacity = interpolate(frame, [fadeStart, fadeEnd], [1, 0], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  const toOpacity = interpolate(frame, [fadeStart, fadeEnd], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const toY = interpolate(frame, [fadeStart, fadeEnd], [8, 0], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  const textStyle: React.CSSProperties = {\n    fontSize,\n    fontWeight,\n    color,\n    letterSpacing: \"-0.03em\",\n    fontFamily:\n      \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n    whiteSpace: \"nowrap\",\n  };\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        background: \"white\",\n      }}\n    >\n      <div\n        style={{\n          position: \"relative\",\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        {/* from text with strikethrough line */}\n        <span\n          className={className}\n          style={{\n            ...textStyle,\n            position: \"absolute\",\n            opacity: fromOpacity,\n          }}\n        >\n          {from}\n          <span\n            aria-hidden\n            style={{\n              position: \"absolute\",\n              left: 0,\n              top: \"50%\",\n              height: Math.max(2, Math.round(fontSize * 0.08)),\n              width: `${linePct}%`,\n              background: lineColor,\n              translate: \"0 -50%\",\n              borderRadius: 2,\n            }}\n          />\n        </span>\n\n        {/* to text */}\n        <span\n          className={className}\n          style={{\n            ...textStyle,\n            opacity: toOpacity,\n            translate: `0 ${toY}px`,\n          }}\n        >\n          {to}\n        </span>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/strikethrough-replace.tsx"
    }
  ],
  "type": "registry:component"
}