DVD Screensaver

1"use client";
2 
3import { motion, useAnimationFrame } from "motion/react";
4import { useRef, useState } from "react";
5import { cn } from "@/lib/utils";
6 
7const COLORS = [
8  "#FF4444",
9  "#44AAFF",
10  "#44FF88",
11  "#FFCC44",
12  "#CC44FF",
13  "#FF8844",
14  "#44FFEE",
15];
16 
17interface DVDScreensaverProps {
18  text?: string;
19  subText?: string;
20  speed?: number;
21  className?: string;
22}
23 
24export default function DVDScreensaver({
25  text = "Refinery",
26  subText = "UI Vault",
27  speed = 2,
28  className = "",
29}: DVDScreensaverProps) {
30  const containerRef = useRef<HTMLDivElement>(null);
31  const logoRef = useRef<HTMLDivElement>(null);
32 
33  const pos = useRef({ x: 80, y: 80 });
34  const vel = useRef({ vx: speed, vy: speed });
35  const colorIdxRef = useRef(0);
36 
37  const [color, setColor] = useState(COLORS[0]);
38  const [bounces, setBounces] = useState(0);
39  const [corners, setCorners] = useState(0);
40  const [cornerFlashKey, setCornerFlashKey] = useState(0);
41 
42  useAnimationFrame(() => {
43    const container = containerRef.current;
44    const logo = logoRef.current;
45    if (!container || !logo) return;
46 
47    const cW = container.clientWidth;
48    const cH = container.clientHeight;
49    const lW = logo.offsetWidth;
50    const lH = logo.offsetHeight;
51 
52    pos.current.x += vel.current.vx;
53    pos.current.y += vel.current.vy;
54 
55    let hitX = false;
56    let hitY = false;
57 
58    if (pos.current.x <= 0) {
59      pos.current.x = 0;
60      vel.current.vx = Math.abs(vel.current.vx);
61      hitX = true;
62    } else if (pos.current.x + lW >= cW) {
63      pos.current.x = cW - lW;
64      vel.current.vx = -Math.abs(vel.current.vx);
65      hitX = true;
66    }
67 
68    if (pos.current.y <= 0) {
69      pos.current.y = 0;
70      vel.current.vy = Math.abs(vel.current.vy);
71      hitY = true;
72    } else if (pos.current.y + lH >= cH) {
73      pos.current.y = cH - lH;
74      vel.current.vy = -Math.abs(vel.current.vy);
75      hitY = true;
76    }
77 
78    if (hitX || hitY) {
79      if (hitX) vel.current.vx += (Math.random() - 0.5) * 0.4;
80      if (hitY) vel.current.vy += (Math.random() - 0.5) * 0.4;
81 
82      const mag = Math.sqrt(vel.current.vx ** 2 + vel.current.vy ** 2);
83      vel.current.vx = (vel.current.vx / mag) * speed;
84      vel.current.vy = (vel.current.vy / mag) * speed;
85 
86      colorIdxRef.current = (colorIdxRef.current + 1) % COLORS.length;
87      setColor(COLORS[colorIdxRef.current]);
88      setBounces((b) => b + 1);
89 
90      if (hitX && hitY) {
91        setCorners((c) => c + 1);
92        setCornerFlashKey((k) => k + 1);
93      }
94    }
95 
96// … truncated