{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pulsing-indicator",
  "title": "Pulsing Indicator",
  "description": "Continuous pulsing dot with ping ring for loading or live states.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/pulsing-indicator/index.tsx",
      "content": "\"use client\";\n\nimport { useCurrentFrame } from \"remotion\";\n\nexport interface PulsingIndicatorProps {\n  color?: string;\n  size?: number;\n  /** Wavelength of the base pulse, in frames. Higher = longer one cycle. */\n  period?: number;\n  /** Playback speed multiplier (1 = normal, 2 = twice as fast). */\n  speed?: number;\n  background?: string;\n  className?: string;\n}\n\nexport function PulsingIndicator({\n  color = \"#22c55e\",\n  size = 16,\n  period = 8,\n  speed = 1,\n  background = \"white\",\n  className,\n}: PulsingIndicatorProps) {\n  const frame = useCurrentFrame() * speed;\n\n  // Inner dot pulse: 0..1 normalized\n  const wave = Math.sin(frame / period) * 0.5 + 0.5;\n  const dotScale = 0.9 + wave * 0.2;\n  const dotOpacity = 0.6 + wave * 0.4;\n\n  // Outer ring \"ping\": phase from 0..1 looping\n  const ringPeriod = period * Math.PI * 2;\n  const phase = (frame % ringPeriod) / ringPeriod;\n  const ringScale = 1 + phase * 1.6;\n  const ringOpacity = (1 - phase) * 0.7;\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        background,\n      }}\n    >\n      <div\n        style={{\n          position: \"relative\",\n          width: size,\n          height: size,\n        }}\n      >\n        {/* Ping ring */}\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            borderRadius: \"50%\",\n            background: color,\n            opacity: ringOpacity,\n            transform: `scale(${ringScale})`,\n            transformOrigin: \"center\",\n            willChange: \"transform, opacity\",\n          }}\n        />\n        {/* Solid dot */}\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            borderRadius: \"50%\",\n            background: color,\n            opacity: dotOpacity,\n            transform: `scale(${dotScale})`,\n            transformOrigin: \"center\",\n            willChange: \"transform, opacity\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/pulsing-indicator.tsx"
    }
  ],
  "type": "registry:component"
}