{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "movinglines-background",
  "type": "registry:ui",
  "title": "MovingLines Background",
  "description": "A set of diagonal lines that move continuously. Great for hero backgrounds.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/movinglines-background.tsx",
      "content": "'use client';\nimport React from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface MovingLinesBackgroundProps {\n  speed?: string;\n  opacity?: number;\n  direction?: 'left' | 'right';\n  blur?: string;\n  className?: string;\n  lineClassName?: string;\n  children?: React.ReactNode;\n}\n\nexport function MovingLinesBackground({\n  speed = '20s',\n  opacity = 0.8,\n  direction = 'right',\n  blur = '0px',\n  className,\n  lineClassName,\n  children,\n}: MovingLinesBackgroundProps) {\n  const id = React.useId();\n  const directionValue = direction === 'right' ? '200%' : '-200%';\n\n  return (\n    <div className={cn('relative overflow-hidden', className)}>\n      <style jsx>{`\n        @keyframes lineBackgroundMove-${id} {\n          0% {\n            background-position: 0 0;\n          }\n          100% {\n            background-position: ${directionValue} ${directionValue};\n          }\n        }\n      `}</style>\n\n      <motion.div\n        style={\n          {\n            '--speed': speed,\n            '--blur': blur,\n            filter: `blur(var(--blur))`,\n            opacity,\n            backgroundSize: '0.6em 0.6em',\n            backgroundPosition: '0 0',\n            animation: `lineBackgroundMove-${id} var(--speed) linear infinite`,\n          } as React.CSSProperties\n        }\n        className={cn(\n          'absolute inset-0 z-0 transition-colors duration-500',\n          'bg-[linear-gradient(45deg,transparent_45%,rgba(0,0,0,0.08)_45%,rgba(0,0,0,0.08)_55%,transparent_0)]',\n          'dark:bg-[linear-gradient(45deg,transparent_45%,rgba(255,255,255,0.08)_45%,rgba(255,255,255,0.08)_55%,transparent_0)]',\n          lineClassName,\n        )}\n      />\n\n      {children && <div className='relative z-10'>{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}"
    }
  ]
}