Screensaver

1"use client"
2 
3import React, { useEffect, useRef } from "react"
4import {
5  motion,
6  useAnimationFrame,
7  useMotionValue,
8} from "motion/react"
9 
10import { cn } from "@/lib/utils"
11import { useDimensions } from "@/hooks/use-dimensions"
12 
13type ScreensaverProps = {
14  children: React.ReactNode
15  containerRef: React.RefObject<HTMLElement | null>
16  speed?: number
17  startPosition?: { x: number; y: number } // x,y as percentages (0-100)
18  startAngle?: number // in degrees
19  className?: string
20}
21 
22const Screensaver: React.FC<ScreensaverProps> = ({
23  children,
24  speed = 3,
25  startPosition = { x: 0, y: 0 },
26  startAngle = 45,
27  containerRef,
28  className,
29}) => {
30  const elementRef = useRef<HTMLDivElement>(null)
31  const x = useMotionValue(0)
32  const y = useMotionValue(0)
33  const angle = useRef((startAngle * Math.PI) / 180)
34 
35  const containerDimensions = useDimensions(containerRef)
36  const elementDimensions = useDimensions(elementRef)
37 
38  // Set initial position based on container dimensions and percentage
39  useEffect(() => {
40    if (containerDimensions.width && containerDimensions.height) {
41      const initialX =
42        (startPosition.x / 100) *
43        (containerDimensions.width - (elementDimensions.width || 0))
44      const initialY =
45        (startPosition.y / 100) *
46        (containerDimensions.height - (elementDimensions.height || 0))
47      x.set(initialX)
48      y.set(initialY)
49    }
50  }, [containerDimensions, elementDimensions, startPosition])
51 
52  useAnimationFrame(() => {
53    const velocity = speed
54    const dx = Math.cos(angle.current) * velocity
55    const dy = Math.sin(angle.current) * velocity
56 
57    let newX = x.get() + dx
58    let newY = y.get() + dy
59 
60    // Check for collisions with container boundaries
61    if (
62      newX <= 0 ||
63      newX + elementDimensions.width >= containerDimensions.width
64    ) {
65      angle.current = Math.PI - angle.current
66      newX = Math.max(
67        0,
68        Math.min(newX, containerDimensions.width - elementDimensions.width)
69      )
70    }
71    if (
72      newY <= 0 ||
73      newY + elementDimensions.height >= containerDimensions.height
74    ) {
75      angle.current = -angle.current
76      newY = Math.max(
77        0,
78        Math.min(newY, containerDimensions.height - elementDimensions.height)
79      )
80    }
81 
82    x.set(newX)
83    y.set(newY)
84  })
85 
86  return (
87    <motion.div
88      ref={elementRef}
89      style={{
90        position: "absolute",
91        top: 0,
92        left: 0,
93        x,
94        y,
95      }}
96// … truncated