{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "backgrounds-gradient",
  "type": "registry:ui",
  "title": "Gradient Background",
  "description": "A background component featuring a subtle yet engaging animated gradient effect, smoothly transitioning colors to enhance visual depth.",
  "dependencies": [
    "@animate-ui/react",
    "cn",
    "motion"
  ],
  "files": [
    {
      "path": "registry/backgrounds/gradient/index.tsx",
      "type": "registry:ui",
      "target": "@components/animate-ui/backgrounds/gradient.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, useInView, type HTMLMotionProps } from 'motion/react';\n\nimport { usePageVisible } from '@animate-ui/react/utils/use-page-visible';\nimport {\n  ReducedMotionConfig,\n  useShouldReduceMotion,\n} from '@animate-ui/react/utils/motion';\nimport { cn } from 'cn';\n\ntype GradientBackgroundProps = HTMLMotionProps<'div'>;\n\nconst STATIC_POSITION = '0% 50%';\n\nfunction GradientBackgroundContent({\n  ref,\n  className,\n  transition = { duration: 15, ease: 'easeInOut', repeat: Infinity },\n  ...props\n}: GradientBackgroundProps) {\n  const localRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);\n\n  const inView = useInView(localRef);\n  const pageVisible = usePageVisible();\n  const reduce = useShouldReduceMotion();\n  const playing = inView && pageVisible && !reduce;\n\n  return (\n    <motion.div\n      ref={localRef}\n      data-slot=\"gradient-background\"\n      className={cn(\n        'size-full bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 bg-[length:400%_400%]',\n        className,\n      )}\n      animate={{\n        backgroundPosition: playing\n          ? [STATIC_POSITION, '100% 50%', STATIC_POSITION]\n          : STATIC_POSITION,\n      }}\n      transition={playing ? transition : { duration: 0 }}\n      {...props}\n    />\n  );\n}\n\nfunction GradientBackground(props: GradientBackgroundProps) {\n  return (\n    <ReducedMotionConfig>\n      <GradientBackgroundContent {...props} />\n    </ReducedMotionConfig>\n  );\n}\n\nexport { GradientBackground, type GradientBackgroundProps };\n"
    }
  ]
}