{
  "title": "Gradient Shadow",
  "description": "Smooth horizontal gradient flow, creating a subtle glowing hover shadow effect.",
  "name": "motion-gradient-shadow",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/gradient-shadow.tsx",
      "type": "registry:ui",
      "content": "import { type ReactNode } from \"react\";\n\nimport { motion } from \"motion/react\";\n\ntype GradientShadowProps = {\n    colors?: string[];\n    children: ReactNode;\n};\n\nexport const GradientShadow = ({\n    colors = [\"#3b82f6\", \"#8b5cf6\", \"#ec4899\", \"#f97316\"],\n    children,\n}: GradientShadowProps) => {\n    // Ensure the gradient is applied correctly\n    const gradient = `linear-gradient(90deg, ${colors.join(\", \")}, ${colors[0]})`;\n\n    return (\n        <div className=\"group relative inline-block\">\n            <motion.div\n                className=\"absolute -inset-1 z-0 rounded-md opacity-0 blur-lg transition duration-500 group-hover:opacity-100\"\n                initial={{ backgroundPosition: \"0% 0%\" }}\n                animate={{ backgroundPosition: \"200% 0%\" }}\n                transition={{\n                    backgroundPosition: {\n                        duration: 6,\n                        ease: \"linear\",\n                        repeat: Infinity,\n                    },\n                }}\n                style={{\n                    backgroundImage: gradient,\n                    backgroundSize: \"200% 100%\", // Adjusted for smooth looping\n                }}\n            />\n            <div className=\"relative z-10\">{children}</div>\n        </div>\n    );\n};\n"
    }
  ],
  "mcp": {
    "description": "Provides refined UI interactions and accessible controls. Smooth horizontal gradient flow, creating a subtle glowing hover shadow effect. Configurable props include: {; colors?: string[];; children: ReactNode;. Relies on motion. Optimal for building reusable interface elements and user input flows.",
    "tags": [
      "component",
      "motion",
      "animation"
    ]
  }
}