{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "infinite-marquee",
  "title": "Infinite Marquee",
  "description": "Seamlessly looping horizontal text strip with optional stroke style.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/infinite-marquee/index.tsx",
      "content": "\"use client\";\n\nimport { useCurrentFrame } from \"remotion\";\n\nexport interface InfiniteMarqueeProps {\n  text?: string;\n  fontSize?: number;\n  color?: string;\n  fontWeight?: number;\n  pixelsPerFrame?: number;\n  stroke?: boolean;\n  strokeColor?: string;\n  background?: string;\n  speed?: number;\n  className?: string;\n}\n\nexport function InfiniteMarquee({\n  text = \"ship · build · animate · \",\n  fontSize = 120,\n  color = \"#171717\",\n  fontWeight = 900,\n  pixelsPerFrame = 4,\n  stroke = false,\n  strokeColor = \"#171717\",\n  background = \"#fafafa\",\n  speed = 1,\n  className,\n}: InfiniteMarqueeProps) {\n  const frame = useCurrentFrame() * speed;\n\n  const approxWidth = text.length * fontSize * 0.55;\n  const offset = -((frame * pixelsPerFrame) % approxWidth);\n\n  const spanStyle: React.CSSProperties = {\n    fontSize,\n    fontWeight,\n    fontFamily:\n      \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n    color: stroke ? \"transparent\" : color,\n    WebkitTextStroke: stroke ? `2px ${strokeColor}` : undefined,\n    paddingRight: \"0.4em\",\n    letterSpacing: \"-0.03em\",\n  };\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        background,\n      }}\n    >\n      <div\n        className={className}\n        style={{\n          display: \"flex\",\n          whiteSpace: \"nowrap\",\n          transform: `translateX(${offset}px)`,\n        }}\n      >\n        <span style={spanStyle}>{text}</span>\n        <span style={spanStyle}>{text}</span>\n        <span style={spanStyle}>{text}</span>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/infinite-marquee.tsx"
    }
  ],
  "type": "registry:component"
}