{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "motion-grid",
  "type": "registry:ui",
  "title": "Motion Grid",
  "description": "A set of diagonal lines that move continuously with gradientglow.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/motion-grid.tsx",
      "content": "'use client';\nimport React from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface MotionGridProps {\n  speed?: string;\n  opacity?: number;\n  direction?: 'left' | 'right';\n  lineColor?: string;\n  lineWidth?: string;\n  gridSpacing?: string;\n  backgroundColor?: string;\n  glowGradient?: string;\n  enableGlow?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function MotionGrid({\n  speed = '30s',\n  opacity = 0.1,\n  direction = 'right',\n  lineColor = '0, 255, 128',\n  lineWidth = '1px',\n  gridSpacing = '20px',\n  backgroundColor = '#0f0f0f',\n  enableGlow = true,\n  className,\n  children,\n}: MotionGridProps) {\n  const id = React.useId();\n  const directionValue = direction === 'right' ? '40px' : '-40px';\n\n  return (\n    <div\n      className={cn('relative overflow-hidden', className)}\n      style={{ backgroundColor }}\n    >\n      <style jsx>{`\n        @keyframes diagonalGridMove-${id} {\n          0% {\n            background-position: 0 0;\n          }\n          100% {\n            background-position: ${directionValue} ${directionValue};\n          }\n        }\n      `}</style>\n\n      {enableGlow && (\n        <div\n          className={cn(\n            'absolute inset-0 z-0',\n            'bg-[radial-gradient(125%_125%_at_50%_10%,#ffffff_40%,#14b8a6_100%)]',\n            'dark:bg-[radial-gradient(125%_125%_at_50%_10%,#000000_40%,#14b8a6_100%)]',\n          )}\n        />\n      )}\n\n      <motion.div\n        style={\n          {\n            '--speed': speed,\n            '--line-color': lineColor,\n            '--opacity': opacity,\n            '--line-width': lineWidth,\n            '--grid-spacing': gridSpacing,\n            backgroundImage: `\n              repeating-linear-gradient(45deg, rgba(var(--line-color), var(--opacity)) 0, rgba(var(--line-color), var(--opacity)) var(--line-width), transparent var(--line-width), transparent var(--grid-spacing)),\n              repeating-linear-gradient(-45deg, rgba(var(--line-color), var(--opacity)) 0, rgba(var(--line-color), var(--opacity)) var(--line-width), transparent var(--line-width), transparent var(--grid-spacing))\n            `,\n            backgroundSize: '40px 40px',\n            animation: `diagonalGridMove-${id} var(--speed) linear infinite`,\n          } as React.CSSProperties\n        }\n        className='absolute inset-0 z-10 pointer-events-none'\n      />\n\n      {children && <div className='relative z-20'>{children}</div>}\n    </div>\n  );\n}\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}