{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "analog-clock-screensaver",
  "title": "Analog Clock Screensaver",
  "author": "mrap10",
  "description": "SVG analog clock screensaver with smooth hands motion.",
  "dependencies": ["motion"],
  "files": [
    {
      "path": "registry/default/screen-savers/analog-clock-screensaver.tsx",
      "content": "\"use client\";\n\nimport { useRef } from \"react\";\nimport { useAnimationFrame } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface AnalogClockScreensaverProps {\n  title?: string;\n  className?: string;\n  accentColor?: string;\n  backgroundClassName?: string;\n}\n\nexport default function AnalogClockScreensaver({\n  title = \"Refinery\",\n  className = \"\",\n  accentColor = \"#d13b28\",\n  backgroundClassName = \"bg-neutral-900\",\n}: AnalogClockScreensaverProps) {\n  const secondHandRef = useRef<SVGLineElement | null>(null);\n  const minuteHandRef = useRef<SVGLineElement | null>(null);\n  const hourHandRef = useRef<SVGLineElement | null>(null);\n\n  useAnimationFrame(() => {\n    const now = new Date();\n    const seconds = now.getSeconds() + now.getMilliseconds() / 1000;\n    const minutes = now.getMinutes() + seconds / 60;\n    const hours = (now.getHours() % 12) + minutes / 60;\n\n    secondHandRef.current?.setAttribute(\n      \"transform\",\n      `rotate(${seconds * 6} 50 50)`\n    );\n    minuteHandRef.current?.setAttribute(\n      \"transform\",\n      `rotate(${minutes * 6} 50 50)`\n    );\n    hourHandRef.current?.setAttribute(\n      \"transform\",\n      `rotate(${hours * 30} 50 50)`\n    );\n  });\n\n  return (\n    <div\n      className={cn(\n        \"flex h-screen w-full flex-col items-center justify-center gap-2 text-neutral-100\",\n        backgroundClassName,\n        className\n      )}\n    >\n      <svg\n        viewBox=\"0 0 100 100\"\n        className=\"size-[min(80vw,20rem)] overflow-visible rounded-full\"\n        role=\"img\"\n        aria-label=\"Analog clock\"\n      >\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r=\"48\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeOpacity=\"0.14\"\n          strokeWidth=\"1.5\"\n        />\n        <line\n          ref={hourHandRef}\n          x1=\"50\"\n          y1=\"50\"\n          x2=\"50\"\n          y2=\"28\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeWidth=\"3\"\n        />\n        <line\n          ref={minuteHandRef}\n          x1=\"50\"\n          y1=\"50\"\n          x2=\"50\"\n          y2=\"20\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeWidth=\"2.2\"\n        />\n        <line\n          ref={secondHandRef}\n          x1=\"50\"\n          y1=\"56\"\n          x2=\"50\"\n          y2=\"12\"\n          stroke={accentColor}\n          strokeLinecap=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r=\"2.6\"\n          stroke=\"currentColor\"\n          fill={accentColor}\n        />\n      </svg>\n      <h1 className=\"text-3xl text-neutral-400\">{title}</h1>\n      <p className=\"absolute bottom-10 text-center text-sm text-neutral-500\">\n        Move your mouse or press any key to exit the screensaver.\n      </p>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": ["screensavers"],
  "type": "registry:component"
}