{
  "name": "light-sweep-text",
  "type": "registry:ui",
  "description": "Light gradient sweeps across dim text",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "layout",
    "motion-tokens"
  ],
  "files": [
    {
      "path": "registry/bases/default/primitives/light-sweep-text.tsx",
      "type": "registry:ui",
      "content": "import { interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { scaleFont } from \"@/remotion/lib/layout\";\nimport { EASING } from \"@/remotion/lib/motion-tokens\";\n\nexport type LightSweepTextProps = {\n  text: string;\n  durationInFrames?: number;\n  delayInFrames?: number;\n  baseColor?: string;\n  shineColor?: string;\n  fontSize?: number;\n  fontWeight?: number;\n  fontFamily?: string;\n};\n\nexport const LightSweepText: React.FC<LightSweepTextProps> = ({\n  text,\n  durationInFrames = 48,\n  delayInFrames = 0,\n  baseColor = \"#71717a\",\n  shineColor = \"#fafafa\",\n  fontSize: fontSizeProp,\n  fontWeight = 700,\n  fontFamily,\n}) => {\n  const frame = useCurrentFrame();\n  const { width } = useVideoConfig();\n  const fontSize = fontSizeProp ?? scaleFont(84, width);\n  const sweep = interpolate(\n    frame,\n    [delayInFrames, delayInFrames + durationInFrames],\n    [120, -20],\n    {\n      easing: EASING.editorial,\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n    },\n  );\n\n  return (\n    <span\n      style={{\n        fontSize,\n        fontWeight,\n        lineHeight: 1.1,\n        backgroundImage: `linear-gradient(105deg, ${baseColor} 0%, ${baseColor} 42%, ${shineColor} 50%, ${baseColor} 58%, ${baseColor} 100%)`,\n        backgroundSize: \"220% 100%\",\n        backgroundPosition: `${sweep}% 0`,\n        WebkitBackgroundClip: \"text\",\n        backgroundClip: \"text\",\n        color: \"transparent\",\n        ...(fontFamily ? { fontFamily } : {}),\n      }}\n    >\n      {text}\n    </span>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "atoms",
    "drive": "time",
    "tier": "advanced",
    "tags": [
      "text"
    ]
  }
}