{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-pill-takeover",
  "title": "Inline Pill Takeover",
  "description": "A clipped pill expands inside a sentence, physically pushes the surrounding words apart, removes them through blur and takes over the frame with a fast camera punch-in.",
  "dependencies": ["remotion"],
  "files": [
    {
      "path": "registry/remocn/inline-pill-takeover/index.tsx",
      "content": "\"use client\";\n\nimport { Easing, interpolate, useCurrentFrame } from \"remotion\";\n\nexport interface InlinePillTakeoverProps {\n  before: string;\n  insert: string;\n  after: string;\n  fontSize?: number;\n  color?: string;\n  fontWeight?: number;\n  pillWidth?: number;\n  pillColor?: string;\n  pillTextColor?: string;\n  expandFrames?: number;\n  pillRevealHeightScale?: number;\n  pillGrowAt?: number;\n  pillGrowFrames?: number;\n  pillGrowWidthScale?: number;\n  pillGrowHeightScale?: number;\n  outerExitFrames?: number;\n  takeoverAt?: number;\n  takeoverScale?: number;\n  blur?: number;\n  speed?: number;\n  className?: string;\n}\n\nconst PRE_CUT_FRAMES = 12;\nconst TAKEOVER_SETTLE_FRAMES = 6;\nconst PRE_CUT_CAMERA_SCALE = 1.25;\nconst CAMERA_CUT_ENTRY_PROGRESS = 0.86;\nconst expandEasing = Easing.out(Easing.quad);\nconst pillGrowEasing = Easing.inOut(Easing.quad);\nconst fadeEasing = Easing.in(Easing.cubic);\nconst preCutEasing = Easing.out(Easing.quad);\nconst takeoverSettleEasing = Easing.out(Easing.cubic);\n\nexport function InlinePillTakeover({\n  before,\n  insert,\n  after,\n  fontSize = 52,\n  color = \"#fff3df\",\n  fontWeight = 400,\n  pillWidth = 260,\n  pillColor = \"#fffaf0\",\n  pillTextColor = \"#1c1210\",\n  expandFrames = 12,\n  pillRevealHeightScale = 0.35,\n  pillGrowAt = 12,\n  pillGrowFrames = 24,\n  pillGrowWidthScale = 1.08,\n  pillGrowHeightScale = 1.16,\n  outerExitFrames = 18,\n  takeoverAt = 12,\n  takeoverScale = 2.15,\n  blur = 12,\n  speed = 1,\n  className,\n}: InlinePillTakeoverProps) {\n  const frame = useCurrentFrame() * speed;\n  const safeExpandFrames = Math.max(expandFrames, 0.001);\n  const pillGrowEnd = pillGrowAt + Math.max(pillGrowFrames, 0.001);\n  const outerExitEnd = Math.max(outerExitFrames, 2.001);\n  const dashWidth = fontSize * 0.72;\n  const pillHeight = fontSize * 1.22;\n  const cutAt = takeoverAt + PRE_CUT_FRAMES;\n  const cutEntryScale = takeoverScale * CAMERA_CUT_ENTRY_PROGRESS;\n\n  const expand = interpolate(frame, [0, safeExpandFrames], [0, 1], {\n    easing: expandEasing,\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const pillGrowProgress = interpolate(\n    frame,\n    [pillGrowAt, pillGrowEnd],\n    [0, 1],\n    {\n      easing: pillGrowEasing,\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n    },\n  );\n  const outerExit = interpolate(frame, [2, outerExitEnd], [0, 1], {\n    easing: fadeEasing,\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const pillTextOpacity = frame >= 3 ? 1 : 0;\n  const preCutCameraScale = interpolate(\n    frame,\n    [takeoverAt, cutAt - 1],\n    [1, PRE_CUT_CAMERA_SCALE],\n    {\n      easing: preCutEasing,\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n    },\n  );\n  const postCutCameraScale = interpolate(\n    frame,\n    [cutAt, cutAt + TAKEOVER_SETTLE_FRAMES],\n    [cutEntryScale, takeoverScale],\n    {\n      easing: takeoverSettleEasing,\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n    },\n  );\n  const cameraScale = frame < cutAt ? preCutCameraScale : postCutCameraScale;\n  const revealedPillWidth = dashWidth + (pillWidth - dashWidth) * expand;\n  const revealedPillHeight =\n    pillHeight * (pillRevealHeightScale + (1 - pillRevealHeightScale) * expand);\n  const pillWidthGrow = 1 + (pillGrowWidthScale - 1) * pillGrowProgress;\n  const pillHeightGrow = 1 + (pillGrowHeightScale - 1) * pillGrowProgress;\n  const animatedPillWidth = revealedPillWidth * pillWidthGrow;\n  const animatedPillHeight = revealedPillHeight * pillHeightGrow;\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        overflow: \"hidden\",\n        background: \"transparent\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          transform: `scale(${cameraScale})`,\n          transformOrigin: \"center\",\n        }}\n      >\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            width: \"100%\",\n            gap: `${fontSize * 0.16}px`,\n            whiteSpace: \"nowrap\",\n            fontFamily:\n              \"var(--font-geist-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)\",\n            fontSize,\n            fontWeight,\n            letterSpacing: \"-0.02em\",\n            lineHeight: 1,\n          }}\n        >\n          <span\n            style={{\n              flex: 1,\n              textAlign: \"right\",\n              color,\n              opacity: 1 - outerExit,\n              filter: outerExit > 0 ? `blur(${blur * outerExit}px)` : undefined,\n            }}\n          >\n            {before}\n          </span>\n\n          <span\n            style={{\n              position: \"relative\",\n              display: \"inline-block\",\n              flexShrink: 0,\n              width: animatedPillWidth,\n              height: animatedPillHeight,\n              overflow: \"hidden\",\n              borderRadius: animatedPillHeight / 2,\n              background: pillColor,\n              color: pillTextColor,\n            }}\n          >\n            <span\n              style={{\n                position: \"absolute\",\n                top: \"50%\",\n                left: \"50%\",\n                translate: \"-50% -50%\",\n                fontSize: fontSize * 0.84,\n                opacity: pillTextOpacity,\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              {insert}\n            </span>\n          </span>\n\n          <span\n            style={{\n              flex: 1,\n              textAlign: \"left\",\n              color,\n              opacity: 1 - outerExit,\n              filter: outerExit > 0 ? `blur(${blur * outerExit}px)` : undefined,\n            }}\n          >\n            {after}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/inline-pill-takeover.tsx"
    }
  ],
  "type": "registry:component"
}