{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-generate-overlay",
  "title": "AI Generate Overlay",
  "description": "Source image blurs under a shimmering dot grid and a pulsing 'Generating…' pill before a new image fades in.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/ai-generate-overlay/index.tsx",
      "content": "\"use client\";\n\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface AIGenerateOverlayProps {\n  maxBlur?: number;\n  blurStartFrame?: number;\n  blurPeakFrame?: number;\n  revealStartFrame?: number;\n  pillText?: string;\n  accent?: string;\n  background?: string;\n  sourceImageBg?: string;\n  generatedImageBg?: string;\n  dotColor?: string;\n  dotSize?: number;\n  dotSpacing?: number;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nconst DEFAULT_SOURCE_BG =\n  \"linear-gradient(135deg, #6b3a1a 0%, #d4a574 50%, #8b4513 100%)\";\n\nconst DEFAULT_GENERATED_BG =\n  \"radial-gradient(ellipse at center, #d4a574 0%, #8b4513 22%, #2a1a10 42%), linear-gradient(180deg, #1a1410 0%, #0a0806 50%, #1a1410 100%)\";\n\nexport function AIGenerateOverlay({\n  maxBlur = 20,\n  blurStartFrame = 20,\n  blurPeakFrame = 40,\n  revealStartFrame = 110,\n  pillText = \"Generating…\",\n  accent = \"#a78bfa\",\n  background = \"#050505\",\n  sourceImageBg = DEFAULT_SOURCE_BG,\n  generatedImageBg = DEFAULT_GENERATED_BG,\n  dotColor = \"#ffffff\",\n  dotSize = 1.2,\n  dotSpacing = 20,\n  speed = 1,\n  className,\n}: AIGenerateOverlayProps) {\n  const rawFrame = useCurrentFrame();\n  const frame = rawFrame * speed;\n  const { fps, durationInFrames } = useVideoConfig();\n\n  // Phase 1 → 2: blur ramps up over [blurStartFrame, blurPeakFrame]\n  const blur = interpolate(\n    frame,\n    [blurStartFrame, blurPeakFrame],\n    [0, maxBlur],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n\n  // Dot grid opacity follows blur, plus a subtle sine shimmer.\n  const gridBaseOpacity = interpolate(\n    frame,\n    [blurStartFrame, blurPeakFrame],\n    [0, 0.4],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n  const gridShimmer = Math.sin(frame / 6) * 0.05;\n  const gridOpacity = Math.max(0, gridBaseOpacity + gridShimmer);\n\n  // Generated image fade-in from revealStartFrame.\n  const reveal = spring({\n    frame: frame - revealStartFrame,\n    fps,\n    config: { mass: 1, damping: 22, stiffness: 90 },\n  });\n  const generatedOpacity = interpolate(reveal, [0, 1], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  // Pill is visible during phases 2-3, fades out as the new image fades in.\n  const pillIn = interpolate(frame, [blurStartFrame, blurPeakFrame], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const pillOut = interpolate(generatedOpacity, [0, 0.6], [1, 0], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const pillOpacity = pillIn * pillOut;\n  const pillScale = 1 + Math.sin(frame / 8) * 0.02;\n  const pillGlow = 0.35 + Math.sin(frame / 8) * 0.15;\n\n  // Detached dot count animation for the pill text — three trailing dots.\n  const dotPhase = Math.floor(frame / 10) % 4;\n  const animatedPillText =\n    pillText.replace(/[…\\.]+$/, \"\") + \".\".repeat(dotPhase);\n\n  // Typed unused-suppression: keep durationInFrames referenced for IDEs.\n  void durationInFrames;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background,\n        fontFamily: FONT_FAMILY,\n        overflow: \"hidden\",\n      }}\n    >\n      {/* Source (\"painting\") layer — blurs out as AI thinks. */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background: sourceImageBg,\n          filter: `blur(${blur}px)`,\n          // Slight scale to hide the blur edge feathering at the viewport border.\n          transform: \"scale(1.06)\",\n        }}\n      />\n\n      {/* Generated image layer — fades in over the blurred source. */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background: generatedImageBg,\n          opacity: generatedOpacity,\n        }}\n      />\n\n      {/* Dot grid overlay — pure SVG pattern with animated opacity + shimmer. */}\n      <svg\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          width: \"100%\",\n          height: \"100%\",\n          opacity: gridOpacity * (1 - generatedOpacity),\n          pointerEvents: \"none\",\n          mixBlendMode: \"screen\",\n        }}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <defs>\n          <pattern\n            id=\"ai-generate-overlay-dots\"\n            width={dotSpacing}\n            height={dotSpacing}\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <circle\n              cx={dotSpacing / 2}\n              cy={dotSpacing / 2}\n              r={dotSize}\n              fill={dotColor}\n            />\n          </pattern>\n        </defs>\n        <rect\n          width=\"100%\"\n          height=\"100%\"\n          fill=\"url(#ai-generate-overlay-dots)\"\n        />\n      </svg>\n\n      {/* \"Generating…\" pill */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          pointerEvents: \"none\",\n          opacity: pillOpacity,\n        }}\n      >\n        <div\n          style={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            gap: 12,\n            padding: \"14px 24px\",\n            borderRadius: 999,\n            background: \"rgba(10, 10, 10, 0.55)\",\n            color: \"#fafafa\",\n            fontSize: 18,\n            fontWeight: 500,\n            letterSpacing: \"-0.01em\",\n            border: \"1px solid rgba(255,255,255,0.12)\",\n            backdropFilter: \"blur(10px)\",\n            WebkitBackdropFilter: \"blur(10px)\",\n            boxShadow: `0 0 0 1px rgba(255,255,255,0.04), 0 0 40px ${hexWithAlpha(\n              accent,\n              pillGlow,\n            )}, 0 12px 40px rgba(0,0,0,0.45)`,\n            transform: `scale(${pillScale})`,\n          }}\n        >\n          <span\n            style={{\n              width: 8,\n              height: 8,\n              borderRadius: 999,\n              background: accent,\n              boxShadow: `0 0 12px ${hexWithAlpha(accent, 0.9)}`,\n            }}\n          />\n          {animatedPillText}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// Convert a #rrggbb to rgba(r, g, b, a). Falls back to the original string if\n// not a 6-digit hex (so users can pass a CSS color name and still get *some*\n// glow, just without alpha).\nfunction hexWithAlpha(hex: string, alpha: number): string {\n  const m = /^#([0-9a-f]{6})$/i.exec(hex);\n  if (!m) return hex;\n  const int = parseInt(m[1], 16);\n  const r = (int >> 16) & 255;\n  const g = (int >> 8) & 255;\n  const b = int & 255;\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n",
      "type": "registry:component",
      "target": "components/remocn/ai-generate-overlay.tsx"
    }
  ],
  "type": "registry:component"
}