Icon Cloud

1"use client"
2 
3import React, { useEffect, useRef, useState } from "react"
4import { Pause, Play } from "lucide-react"
5import { renderToString } from "react-dom/server"
6 
7import { Button } from "@/components/ui/button"
8 
9interface Icon {
10  x: number
11  y: number
12  z: number
13  scale: number
14  opacity: number
15  id: number
16}
17 
18interface IconCloudProps {
19  icons?: React.ReactNode[]
20  images?: string[]
21  showControl?: boolean
22}
23 
24function easeOutCubic(t: number): number {
25  return 1 - Math.pow(1 - t, 3)
26}
27 
28export function IconCloud({
29  icons,
30  images,
31  showControl = true,
32}: IconCloudProps) {
33  const canvasRef = useRef<HTMLCanvasElement>(null)
34  const [iconPositions, setIconPositions] = useState<Icon[]>([])
35  const [isDragging, setIsDragging] = useState(false)
36  const [isPaused, setIsPaused] = useState(false)
37  const [lastMousePos, setLastMousePos] = useState({ x: 0, y: 0 })
38  const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
39  const [targetRotation, setTargetRotation] = useState<{
40    x: number
41    y: number
42    startX: number
43    startY: number
44    distance: number
45    startTime: number
46    duration: number
47  } | null>(null)
48  const animationFrameRef = useRef<number>(0)
49  const rotationRef = useRef({ x: 0, y: 0 })
50  const iconCanvasesRef = useRef<HTMLCanvasElement[]>([])
51  const imagesLoadedRef = useRef<boolean[]>([])
52 
53  // Pause animation if user prefers reduced motion
54  useEffect(() => {
55    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
56    if (mediaQuery.matches) {
57      setIsPaused(true)
58    }
59 
60    const handleChange = (e: MediaQueryListEvent) => {
61      setIsPaused(e.matches)
62    }
63 
64    mediaQuery.addEventListener("change", handleChange)
65    return () => mediaQuery.removeEventListener("change", handleChange)
66  }, [])
67 
68  // Create icon canvases once when icons/images change
69  useEffect(() => {
70    if (!icons && !images) return
71 
72    const items = icons ?? images ?? []
73    imagesLoadedRef.current = new Array(items.length).fill(false)
74 
75    const newIconCanvases = items.map((item, index) => {
76      const offscreen = document.createElement("canvas")
77      offscreen.width = 40
78      offscreen.height = 40
79      const offCtx = offscreen.getContext("2d")
80 
81      if (offCtx) {
82        if (images) {
83          // Handle image URLs directly
84          const img = new Image()
85          img.crossOrigin = "anonymous"
86          img.src = items[index] as string
87          img.onload = () => {
88// … truncated