{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mesh-gradient-bg",
  "title": "Mesh Gradient Background",
  "description": "Living gradient with amorphous color blobs slowly drifting across the frame.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/mesh-gradient-bg/index.tsx",
      "content": "\"use client\";\n\nimport { useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface MeshGradientBgProps {\n  colors?: string[];\n  speed?: number;\n  background?: string;\n  blur?: number;\n  className?: string;\n}\n\nexport function MeshGradientBg({\n  colors = [\"#ff0080\", \"#7928ca\", \"#00d4ff\", \"#ffb800\"],\n  speed = 1,\n  background = \"#0a0a0a\",\n  blur = 80,\n  className,\n}: MeshGradientBgProps) {\n  const frame = useCurrentFrame();\n  const { fps } = useVideoConfig();\n\n  const isDark = isColorDark(background);\n  const blendMode: \"screen\" | \"multiply\" = isDark ? \"screen\" : \"multiply\";\n\n  // One full cycle every (2 / speed) seconds — fps-independent.\n  const t = (frame / fps) * speed;\n\n  const blobs = colors.map((color, i) => {\n    const phase = i * 1.7;\n    const sx = Math.sin(t * Math.PI + phase);\n    const cy = Math.cos(t * Math.PI * 1.3 + phase);\n    const sx2 = Math.sin(t * Math.PI * 0.7 * (2 / 3) + phase * 0.5);\n\n    const left = 50 + sx * 25;\n    const top = 50 + cy * 25;\n    const scale = 1 + sx2 * 0.2;\n\n    return { color, left, top, scale, key: `blob-${i}` };\n  });\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background,\n        overflow: \"hidden\",\n      }}\n    >\n      {blobs.map((b) => (\n        <div\n          key={b.key}\n          style={{\n            position: \"absolute\",\n            left: `${b.left}%`,\n            top: `${b.top}%`,\n            width: \"55%\",\n            height: \"55%\",\n            borderRadius: \"50%\",\n            background: `radial-gradient(circle, ${b.color} 0%, ${b.color}00 70%)`,\n            filter: `blur(${blur}px)`,\n            mixBlendMode: blendMode,\n            transform: `translate(-50%, -50%) scale(${b.scale})`,\n            willChange: \"transform\",\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction isColorDark(hex: string): boolean {\n  const m = hex.replace(\"#\", \"\");\n  if (m.length !== 6 && m.length !== 3) return true;\n  const full =\n    m.length === 3\n      ? m\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : m;\n  const r = parseInt(full.slice(0, 2), 16);\n  const g = parseInt(full.slice(2, 4), 16);\n  const b = parseInt(full.slice(4, 6), 16);\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n  return luminance < 0.5;\n}\n",
      "type": "registry:component",
      "target": "components/remocn/mesh-gradient-bg.tsx"
    }
  ],
  "type": "registry:component"
}