{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "clock",
  "type": "registry:ui",
  "title": "Clock",
  "description": "clock component with rotating hands and glowing effects, perfect for CTA sections.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/clock.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\nconst Clock: React.FC<{ className?: string; children?: React.ReactNode }> = ({\n  className,\n  children,\n}) => {\n  const isMobile = typeof window !== 'undefined' && window.innerWidth < 640;\n\n  const hourDuration = isMobile ? 30 : 20;\n  const minuteDuration = isMobile ? 15 : 10;\n  const secondDuration = isMobile ? 6 : 3;\n\n  return (\n    <div className={cn('w-full', className)}>\n      <motion.div\n        className='absolute w-[min(24rem,80vw)] h-[min(24rem,80vw)] rounded-full blur-3xl'\n        animate={{\n          background: [\n            'radial-gradient(circle at 30% 50%, rgba(234, 88, 12, 0.2), transparent 40%)',\n            'radial-gradient(circle at 70% 50%, rgba(59, 130, 246, 0.2), transparent 40%)',\n          ],\n        }}\n        transition={{\n          duration: 6,\n          repeat: Infinity,\n          repeatType: 'reverse',\n          ease: 'easeInOut',\n        }}\n      />\n\n      <div className='relative w-full max-w-[24rem] aspect-square p-4 sm:p-8 z-10'>\n        <div className='relative w-full h-full rounded-full flex items-center justify-center'>\n          <svg\n            viewBox='0 0 100 100'\n            className='absolute inset-0 w-full h-full rounded-full'\n          >\n            <defs>\n              <linearGradient id='metalGrad' x1='0%' y1='0%' x2='0%' y2='100%'>\n                <stop offset='0%' stopColor='#e8e8e8' />\n                <stop offset='50%' stopColor='#b0b0b0' />\n                <stop offset='100%' stopColor='#949494' />\n              </linearGradient>\n            </defs>\n            <circle\n              cx='50'\n              cy='50'\n              r='48'\n              fill='url(#metalGrad)'\n              stroke='url(#metalGrad)'\n              strokeWidth='2'\n            />\n          </svg>\n          <div\n            className='absolute inset-[3%] rounded-full bg-linear-to-br from-gray-800 via-gray-900 to-black shadow-inner'\n            style={{\n              boxShadow:\n                'inset 0 6px 30px rgba(0,0,0,0.95), inset 0 -2px 15px rgba(255,255,255,0.05)',\n            }}\n          >\n            <motion.div\n              className='absolute inset-0 rounded-full'\n              animate={{ rotate: 360 }}\n              transition={{\n                duration: 40,\n                repeat: Infinity,\n                ease: 'linear',\n              }}\n              style={{\n                background: `conic-gradient(\n                  from 0deg,\n                  transparent 0deg,\n                  rgba(234, 88, 12, 0) 30deg,\n                  rgba(234, 88, 12, 0.8) 90deg,\n                  rgba(234, 88, 12, 0.9) 120deg,\n                  rgba(234, 88, 12, 0) 180deg,\n                  transparent 210deg,\n                  rgba(59, 130, 246, 0) 240deg,\n                  rgba(59, 130, 246, 0.8) 300deg,\n                  rgba(59, 130, 246, 0.9) 330deg,\n                  rgba(59, 130, 246, 0) 360deg\n                )`,\n              }}\n            />\n\n            <div\n              className='absolute inset-[16%] rounded-full bg-linear-to-br from-gray-900 via-black to-gray-900 flex items-center justify-center'\n              style={{\n                boxShadow:\n                  '0 0 40px rgba(0,0,0,0.8), inset 0 2px 10px rgba(255,255,255,0.03)',\n              }}\n            >\n              {children}\n            </div>\n\n            {[...Array(12)].map((_, i) => (\n              <div\n                key={i}\n                className='absolute left-1/2 top-1/2 origin-bottom'\n                style={{\n                  height: '45%',\n                  transform: `translate(-50%, -100%) rotate(${i * 30}deg)`,\n                }}\n              >\n                <div\n                  className='w-1 h-3 bg-linear-to-b from-gray-400 to-gray-600 mx-auto rounded-full shadow-xs'\n                  style={{\n                    boxShadow:\n                      '0 1px 2px rgba(0,0,0,0.5), 0 0 4px rgba(255,255,255,0.1)',\n                  }}\n                />\n              </div>\n            ))}\n\n            {[...Array(60)].map((_, i) => (\n              <div\n                key={i}\n                className='absolute left-1/2 top-1/2 origin-bottom'\n                style={{\n                  height: '45%',\n                  transform: `translate(-50%, -100%) rotate(${i * 6}deg)`,\n                }}\n              >\n                {i % 5 !== 0 && (\n                  <div className='w-px h-1 bg-gray-700 mx-auto opacity-50' />\n                )}\n              </div>\n            ))}\n\n            <div className='absolute inset-0 flex items-center justify-center'>\n              <div className='relative w-full h-full'>\n                <motion.div\n                  className='absolute left-1/2 bottom-1/2 origin-bottom'\n                  style={{\n                    width: 'clamp(6px, 1.5vw, 8px)',\n                    height: '28%',\n                    marginLeft: 'calc(clamp(6px, 1.5vw, 8px) / -2)',\n                    filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.6))',\n                  }}\n                  animate={{ rotate: 360 }}\n                  transition={{\n                    duration: hourDuration,\n                    repeat: Infinity,\n                    ease: 'linear',\n                  }}\n                >\n                  <div\n                    className='w-full h-full bg-linear-to-b from-gray-300 via-gray-400 to-gray-600 rounded-full'\n                    style={{\n                      clipPath: 'polygon(40% 0%, 60% 0%, 55% 100%, 45% 100%)',\n                      boxShadow:\n                        'inset 0 1px 2px rgba(255,255,255,0.3), inset 0 -1px 2px rgba(0,0,0,0.3)',\n                    }}\n                  />\n                </motion.div>\n                <motion.div\n                  className='absolute left-1/2 bottom-1/2 origin-bottom'\n                  style={{\n                    width: 'clamp(5px, 1.2vw, 6px)',\n                    height: '38%',\n                    marginLeft: 'calc(clamp(5px, 1.2vw, 6px) / -2)',\n                    filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.6))',\n                  }}\n                  animate={{ rotate: 360 }}\n                  transition={{\n                    duration: minuteDuration,\n                    repeat: Infinity,\n                    ease: 'linear',\n                  }}\n                >\n                  <div\n                    className='w-full h-full bg-linear-to-b from-gray-200 via-gray-300 to-gray-500 rounded-full'\n                    style={{\n                      clipPath: 'polygon(40% 0%, 60% 0%, 55% 100%, 45% 100%)',\n                      boxShadow:\n                        'inset 0 1px 2px rgba(255,255,255,0.4), inset 0 -1px 2px rgba(0,0,0,0.3)',\n                    }}\n                  />\n                </motion.div>\n\n                <motion.div\n                  className='absolute left-1/2 bottom-1/2 origin-bottom'\n                  style={{\n                    width: 'clamp(2px, 0.6vw, 3px)',\n                    height: '42%',\n                    marginLeft: 'calc(clamp(2px, 0.6vw, 3px) / -2)',\n                    filter: 'drop-shadow(0 1px 3px rgba(0,0,0,0.7))',\n                  }}\n                  animate={{ rotate: 360 }}\n                  transition={{\n                    duration: secondDuration,\n                    repeat: Infinity,\n                    ease: 'linear',\n                  }}\n                >\n                  <div\n                    className='w-full h-full bg-linear-to-b from-gray-300 via-gray-400 to-gray-500 rounded-full'\n                    style={{\n                      boxShadow: 'inset 0 0.5px 1px rgba(255,255,255,0.4)',\n                    }}\n                  />\n                </motion.div>\n                <div\n                  className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[clamp(1rem,4vw,1.25rem)] h-[clamp(1rem,4vw,1.25rem)] bg-linear-to-br from-gray-300 via-gray-400 to-gray-600 rounded-full shadow-lg'\n                  style={{\n                    boxShadow:\n                      '0 2px 8px rgba(0,0,0,0.8), inset 0 1px 2px rgba(255,255,255,0.3), inset 0 -1px 2px rgba(0,0,0,0.3)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Clock;\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}"
    }
  ]
}