{
  "name": "infinite-marquee",
  "type": "registry:ui",
  "description": "Endlessly scrolling horizontal text band",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "layout"
  ],
  "files": [
    {
      "path": "registry/bases/default/primitives/infinite-marquee.tsx",
      "type": "registry:ui",
      "content": "import { measureText } from \"@remotion/layout-utils\";\nimport { useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { scaleFont } from \"@/remotion/lib/layout\";\n\nexport type InfiniteMarqueeProps = {\n  text: string;\n  speed?: number;\n  fontSize?: number;\n  color?: string;\n  fontWeight?: number;\n  fontFamily?: string;\n  gap?: number;\n};\n\nfunction getItemWidth(\n  text: string,\n  fontSize: number,\n  fontWeight: number,\n  fontFamily?: string,\n) {\n  const family = fontFamily ?? \"system-ui\";\n\n  if (typeof document !== \"undefined\") {\n    return measureText({\n      text,\n      fontFamily: family,\n      fontSize,\n      fontWeight: String(fontWeight),\n    }).width;\n  }\n\n  return text.length * fontSize * 0.55;\n}\n\nexport const InfiniteMarquee: React.FC<InfiniteMarqueeProps> = ({\n  text,\n  speed = 2,\n  fontSize: fontSizeProp,\n  color = \"#f4f4f5\",\n  fontWeight = 600,\n  fontFamily,\n  gap = 48,\n}) => {\n  const frame = useCurrentFrame();\n  const { width } = useVideoConfig();\n  const fontSize = fontSizeProp ?? scaleFont(56, width);\n\n  const itemWidth = getItemWidth(text, fontSize, fontWeight, fontFamily);\n  const repetitions = Math.max(4, Math.ceil(width / itemWidth) + 2);\n  const halfWidth =\n    repetitions * itemWidth + Math.max(0, repetitions - 1) * gap;\n  const loopPeriodFrames = Math.max(1, Math.round(halfWidth / speed));\n  const progress = (frame % loopPeriodFrames) / loopPeriodFrames;\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        overflow: \"hidden\",\n        whiteSpace: \"nowrap\",\n      }}\n    >\n      <div\n        style={{\n          display: \"inline-flex\",\n          gap,\n          whiteSpace: \"nowrap\",\n          translate: `${-progress * 50}% 0`,\n          fontSize,\n          fontWeight,\n          color,\n          ...(fontFamily ? { fontFamily } : {}),\n        }}\n      >\n        {Array.from({ length: repetitions * 2 }, (_, i) => (\n          <span key={i}>{text}</span>\n        ))}\n      </div>\n    </div>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "atoms",
    "drive": "time",
    "tier": "advanced",
    "tags": [
      "text"
    ]
  }
}