Sleeping Cat Screensaver

1"use client";
2 
3import { useEffect, useState } from "react";
4import {
5  motion,
6  useAnimationFrame,
7  useMotionValue,
8  useTransform,
9} from "motion/react";
10import { cn } from "@/lib/utils";
11 
12interface SleepingCatScreensaverProps {
13  bgColor?: string;
14  brandText?: string;
15  imageSrc?: string;
16  imageAlt?: string;
17}
18 
19export default function SleepingCatScreensaver({
20  bgColor,
21  brandText,
22  imageSrc,
23  imageAlt,
24}: SleepingCatScreensaverProps) {
25  const [timeString, setTimeString] = useState(() => formatTime(new Date()));
26  const [dateString, setDateString] = useState(() => new Date().toDateString());
27 
28  const progress = useMotionValue(0);
29  const progressWidth = useTransform(progress, (v) => `${v}%`);
30 
31  useAnimationFrame(() => {
32    const now = new Date();
33    progress.set(
34      ((now.getSeconds() + now.getMilliseconds() / 1000) / 60) * 100
35    );
36  });
37 
38  useEffect(() => {
39    const interval = setInterval(() => {
40      const now = new Date();
41      setTimeString(formatTime(now));
42      setDateString(now.toDateString());
43    }, 1000);
44    return () => clearInterval(interval);
45  }, []);
46 
47  return (
48    <motion.div
49      initial={{ opacity: 0 }}
50      animate={{ opacity: 1 }}
51      exit={{ opacity: 0 }}
52      transition={{ duration: 0.6, ease: "easeInOut" }}
53      className={cn(
54        "flex h-screen w-full flex-col items-center justify-center select-none",
55        bgColor ?? "bg-sky-100"
56      )}
57    >
58      <div className="flex items-center justify-center gap-20">
59        <motion.div
60          animate={{ scale: [1, 1.03, 1] }}
61          transition={{ duration: 3.5, repeat: Infinity, ease: "easeInOut" }}
62          className="size-60 rounded-xl"
63        >
64          <img
65            src={
66              imageSrc ||
67              "https://res.cloudinary.com/dbglon4f7/image/upload/v1778339774/sleepingcat_uv71ws.png"
68            }
69            alt={imageAlt || "Sleeping Cat"}
70            width={240}
71            height={240}
72            className="rounded-xl"
73            loading="lazy"
74          />
75        </motion.div>
76        <div className="flex size-60 flex-col justify-center gap-1 rounded-xl">
77          <h1 className="[font-family:var(--font-pixel-square)] text-xl text-gray-400 text-shadow-2xs">
78            {brandText || "Refinery"}
79          </h1>
80          <div className="flex flex-col items-start justify-center gap-2">
81            <div className="[font-family:var(--font-pixel-circle)] text-6xl text-gray-800">
82              {timeString}
83// … truncated