{
  "name": "glow-effect-card-background",
  "type": "registry:ui",
  "componentName": "glow-effect-card-background",
  "description": "Card with glow effect background that follows cursor movement.",
  "files": [
    {
      "path": "glow-effect-card-background.tsx",
      "content": "import { GlowEffect } from '@/components/core/glow-effect';\n\nexport function GlowEffectCardBackground() {\n  return (\n    <div className='relative h-44 w-64'>\n      <GlowEffect\n        colors={['#0894FF', '#C959DD', '#FF2E54', '#FF9004']}\n        mode='static'\n        blur='medium'\n      />\n      <div className='relative h-44 w-64 rounded-lg bg-black p-2 text-white dark:bg-white dark:text-black'>\n        <svg\n          role='img'\n          xmlns='http://www.w3.org/2000/svg'\n          viewBox='0 0 70 70'\n          aria-label='MP Logo'\n          width='70'\n          height='70'\n          className='absolute bottom-4 right-4 h-8 w-8'\n          fill='none'\n        >\n          <path\n            stroke='currentColor'\n            strokeLinecap='round'\n            strokeWidth='3'\n            d='M51.883 26.495c-7.277-4.124-18.08-7.004-26.519-7.425-2.357-.118-4.407-.244-6.364 1.06M59.642 51c-10.47-7.25-26.594-13.426-39.514-15.664-3.61-.625-6.744-1.202-9.991.263'\n          ></path>\n        </svg>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/glow-effect.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { motion, type TargetAndTransition, type Transition } from 'motion/react';\n\nexport type GlowEffectProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  colors?: string[];\n  mode?:\n    | 'rotate'\n    | 'pulse'\n    | 'breathe'\n    | 'colorShift'\n    | 'flowHorizontal'\n    | 'static';\n  blur?:\n    | number\n    | 'softest'\n    | 'soft'\n    | 'medium'\n    | 'strong'\n    | 'stronger'\n    | 'strongest'\n    | 'none';\n  transition?: Transition;\n  scale?: number;\n  duration?: number;\n};\n\nexport function GlowEffect({\n  className,\n  style,\n  colors = ['#FF5733', '#33FF57', '#3357FF', '#F1C40F'],\n  mode = 'rotate',\n  blur = 'medium',\n  transition,\n  scale = 1,\n  duration = 5,\n}: GlowEffectProps) {\n  const BASE_TRANSITION: Transition = {\n    repeat: Infinity,\n    duration: duration,\n    ease: 'linear',\n  };\n\n  const animations: Record<\n    NonNullable<GlowEffectProps['mode']>,\n    TargetAndTransition\n  > = {\n    rotate: {\n      background: [\n        `conic-gradient(from 0deg at 50% 50%, ${colors.join(', ')})`,\n        `conic-gradient(from 360deg at 50% 50%, ${colors.join(', ')})`,\n      ],\n      transition: {\n        ...(transition ?? BASE_TRANSITION),\n      },\n    },\n    pulse: {\n      background: colors.map(\n        (color) =>\n          `radial-gradient(circle at 50% 50%, ${color} 0%, transparent 100%)`\n      ),\n      scale: [1 * scale, 1.1 * scale, 1 * scale],\n      opacity: [0.5, 0.8, 0.5],\n      transition: {\n        ...(transition ?? {\n          ...BASE_TRANSITION,\n          repeatType: 'mirror',\n        }),\n      },\n    },\n    breathe: {\n      background: [\n        ...colors.map(\n          (color) =>\n            `radial-gradient(circle at 50% 50%, ${color} 0%, transparent 100%)`\n        ),\n      ],\n      scale: [1 * scale, 1.05 * scale, 1 * scale],\n      transition: {\n        ...(transition ?? {\n          ...BASE_TRANSITION,\n          repeatType: 'mirror',\n        }),\n      },\n    },\n    colorShift: {\n      background: colors.map((color, index) => {\n        const nextColor = colors[(index + 1) % colors.length];\n        return `conic-gradient(from 0deg at 50% 50%, ${color} 0%, ${nextColor} 50%, ${color} 100%)`;\n      }),\n      transition: {\n        ...(transition ?? {\n          ...BASE_TRANSITION,\n          repeatType: 'mirror',\n        }),\n      },\n    },\n    flowHorizontal: {\n      background: colors.map((color) => {\n        const nextColor = colors[(colors.indexOf(color) + 1) % colors.length];\n        return `linear-gradient(to right, ${color}, ${nextColor})`;\n      }),\n      transition: {\n        ...(transition ?? {\n          ...BASE_TRANSITION,\n          repeatType: 'mirror',\n        }),\n      },\n    },\n    static: {\n      background: `linear-gradient(to right, ${colors.join(', ')})`,\n    },\n  };\n\n  const getBlurClass = (blur: GlowEffectProps['blur']) => {\n    if (typeof blur === 'number') {\n      return `blur-[${blur}px]`;\n    }\n\n    const presets = {\n      softest: 'blur-xs',\n      soft: 'blur-sm',\n      medium: 'blur-md',\n      strong: 'blur-lg',\n      stronger: 'blur-xl',\n      strongest: 'blur-xl',\n      none: 'blur-none',\n    };\n\n    return presets[blur as keyof typeof presets];\n  };\n\n  return (\n    <motion.div\n      style={\n        {\n          ...style,\n          '--scale': scale,\n          willChange: 'transform',\n          backfaceVisibility: 'hidden',\n        } as React.CSSProperties\n      }\n      animate={animations[mode]}\n      className={cn(\n        'pointer-events-none absolute inset-0 h-full w-full',\n        'scale-[var(--scale)] transform-gpu',\n        getBlurClass(blur),\n        className\n      )}\n    />\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}