{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-highlight",
  "title": "Inline Highlight",
  "description": "Animates one word inside a sentence from a base color to a brand color.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/bases/editframe/components/inline-highlight/index.tsx",
      "content": "\"use client\";\n\nimport { Timegroup } from \"@editframe/react\";\nimport type { CSSProperties } from \"react\";\n\nexport interface InlineHighlightProps {\n  before: string;\n  highlight: string;\n  after?: string;\n  baseColor?: string;\n  highlightColor?: string;\n  fontSize?: number;\n  fontWeight?: number;\n  speed?: number;\n  fps?: number;\n  durationInFrames?: number;\n  background?: string;\n  className?: string;\n}\n\nexport const InlineHighlight = ({\n  before,\n  highlight,\n  after = \"\",\n  baseColor = \"#171717\",\n  highlightColor = \"#ff5e3a\",\n  fontSize = 48,\n  fontWeight = 600,\n  speed = 1,\n  fps = 30,\n  durationInFrames = 90,\n  background = \"white\",\n  className,\n}: InlineHighlightProps) => {\n  const safeSpeed = Math.max(0.01, speed);\n  const durationMs = (durationInFrames / fps) * 1000;\n  const highlightDurationMs =\n    (((durationInFrames * 0.5) / fps) * 1000) / safeSpeed;\n\n  const containerStyle: CSSProperties = {\n    alignItems: \"center\",\n    background,\n    display: \"flex\",\n    height: 500,\n    justifyContent: \"center\",\n    position: \"relative\",\n    width: 1000,\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-inline-highlight {\n            from {\n              color: ${baseColor};\n            }\n            to {\n              color: ${highlightColor};\n            }\n          }\n        `}</style>\n        <span\n          style={{\n            animation: `framecn-inline-highlight ${highlightDurationMs}ms ease-out ${durationMs - highlightDurationMs}ms forwards`,\n            fontFamily:\n              \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n            fontSize,\n            fontWeight,\n            letterSpacing: \"-0.03em\",\n          }}\n        >\n          {before}\n          <span style={{ color: highlightColor }}>{highlight}</span>\n          {after}\n        </span>\n      </>\n    </Timegroup>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/framecn/inline-highlight.tsx"
    }
  ],
  "type": "registry:component"
}