{
  "name": "strikethrough-replace",
  "type": "registry:ui",
  "description": "Strike line draws then reveals replacement text",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "layout",
    "timing"
  ],
  "files": [
    {
      "path": "registry/bases/default/primitives/strikethrough-replace.tsx",
      "type": "registry:ui",
      "content": "import { interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { scaleFont } from \"@/remotion/lib/layout\";\nimport { EASING_ENTER } from \"@/remotion/lib/timing\";\n\nexport type StrikethroughReplaceProps = {\n  from: string;\n  to: string;\n  strikeDurationInFrames?: number;\n  replaceDelayInFrames?: number;\n  replaceDurationInFrames?: number;\n  fontSize?: number;\n  color?: string;\n  strikeColor?: string;\n  fontWeight?: number;\n  fontFamily?: string;\n};\n\nexport const StrikethroughReplace: React.FC<StrikethroughReplaceProps> = ({\n  from,\n  to,\n  strikeDurationInFrames = 18,\n  replaceDelayInFrames = 20,\n  replaceDurationInFrames = 16,\n  fontSize: fontSizeProp,\n  color = \"#f4f4f5\",\n  strikeColor = \"#f472b6\",\n  fontWeight = 600,\n  fontFamily,\n}) => {\n  const frame = useCurrentFrame();\n  const { width } = useVideoConfig();\n  const fontSize = fontSizeProp ?? scaleFont(72, width);\n  const strikeProgress = interpolate(frame, [0, strikeDurationInFrames], [0, 1], {\n    easing: EASING_ENTER,\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const replaceOpacity = interpolate(\n    frame,\n    [replaceDelayInFrames, replaceDelayInFrames + replaceDurationInFrames],\n    [0, 1],\n    {\n      easing: EASING_ENTER,\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n    },\n  );\n  const fromOpacity = 1 - replaceOpacity;\n  const showStrike = frame < replaceDelayInFrames + 4;\n\n  return (\n    <span\n      style={{\n        position: \"relative\",\n        display: \"inline-block\",\n        fontSize,\n        fontWeight,\n        lineHeight: 1.2,\n        ...(fontFamily ? { fontFamily } : {}),\n      }}\n    >\n      <span style={{ opacity: fromOpacity, color }}>{from}</span>\n      {showStrike ? (\n        <span\n          style={{\n            position: \"absolute\",\n            left: 0,\n            right: 0,\n            top: \"52%\",\n            height: 3,\n            scale: `${strikeProgress} 1`,\n            transformOrigin: \"left center\",\n            backgroundColor: strikeColor,\n            borderRadius: 2,\n          }}\n        />\n      ) : null}\n      <span\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          opacity: replaceOpacity,\n          color,\n        }}\n      >\n        {to}\n      </span>\n    </span>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "atoms",
    "drive": "time",
    "tier": "advanced",
    "tags": [
      "text"
    ]
  }
}