{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sleeping-cat-screensaver",
  "title": "Sleeping Cat Screensaver",
  "author": "mrap10",
  "description": "Minimal screensaver with a sleeping cat and live clock progress bar.",
  "dependencies": ["motion", "geist"],
  "files": [
    {
      "path": "registry/default/screen-savers/sleeping-cat-screensaver.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport {\n  motion,\n  useAnimationFrame,\n  useMotionValue,\n  useTransform,\n} from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SleepingCatScreensaverProps {\n  bgColor?: string;\n  brandText?: string;\n  imageSrc?: string;\n  imageAlt?: string;\n}\n\nexport default function SleepingCatScreensaver({\n  bgColor,\n  brandText,\n  imageSrc,\n  imageAlt,\n}: SleepingCatScreensaverProps) {\n  const [timeString, setTimeString] = useState(() => formatTime(new Date()));\n  const [dateString, setDateString] = useState(() => new Date().toDateString());\n\n  const progress = useMotionValue(0);\n  const progressWidth = useTransform(progress, (v) => `${v}%`);\n\n  useAnimationFrame(() => {\n    const now = new Date();\n    progress.set(\n      ((now.getSeconds() + now.getMilliseconds() / 1000) / 60) * 100\n    );\n  });\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      const now = new Date();\n      setTimeString(formatTime(now));\n      setDateString(now.toDateString());\n    }, 1000);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n      transition={{ duration: 0.6, ease: \"easeInOut\" }}\n      className={cn(\n        \"flex h-screen w-full flex-col items-center justify-center select-none\",\n        bgColor ?? \"bg-sky-100\"\n      )}\n    >\n      <div className=\"flex items-center justify-center gap-20\">\n        <motion.div\n          animate={{ scale: [1, 1.03, 1] }}\n          transition={{ duration: 3.5, repeat: Infinity, ease: \"easeInOut\" }}\n          className=\"size-60 rounded-xl\"\n        >\n          <img\n            src={\n              imageSrc ||\n              \"https://res.cloudinary.com/dbglon4f7/image/upload/v1778339774/sleepingcat_uv71ws.png\"\n            }\n            alt={imageAlt || \"Sleeping Cat\"}\n            width={240}\n            height={240}\n            className=\"rounded-xl\"\n            loading=\"lazy\"\n          />\n        </motion.div>\n        <div className=\"flex size-60 flex-col justify-center gap-1 rounded-xl\">\n          <h1 className=\"[font-family:var(--font-pixel-square)] text-xl text-gray-400 text-shadow-2xs\">\n            {brandText || \"Refinery\"}\n          </h1>\n          <div className=\"flex flex-col items-start justify-center gap-2\">\n            <div className=\"[font-family:var(--font-pixel-circle)] text-6xl text-gray-800\">\n              {timeString}\n            </div>\n            <div className=\"h-1.5 w-36 overflow-hidden rounded-full bg-black/10\">\n              <motion.div\n                className=\"h-full rounded-full bg-gray-700\"\n                style={{ width: progressWidth }}\n              />\n            </div>\n            <div className=\"font-mono text-gray-600\">{dateString}</div>\n          </div>\n        </div>\n      </div>\n      <p className=\"mt-5 text-sm text-neutral-400 opacity-75\">\n        &#40; Move your cursor to wake up the screen &#41;\n      </p>\n    </motion.div>\n  );\n}\n\nfunction formatTime(date: Date) {\n  return `${String(date.getHours()).padStart(2, \"0\")}:${String(date.getMinutes()).padStart(2, \"0\")}`;\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": ["screensavers"],
  "type": "registry:component"
}