import { useState, useEffect, useRef } from 'react'; import { Upload, Eye } from 'lucide-react'; import { Button } from "/components/ui/button"; interface BouncingImage { id: number; x: number; y: number; vx: number; vy: number; width: number; height: number; aspectRatio: number; } export default function ImageBounce() { const [imageUrl, setImageUrl] = useState(null); const [images, setImages] = useState([]); const [isAnimating, setIsAnimating] = useState(false); const [bgColor, setBgColor] = useState('#ffffff'); const fileInputRef = useRef(null); const containerRef = useRef(null); const animationRef = useRef(); // Handle image upload and get dimensions const handleImageUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { const url = URL.createObjectURL(file); const img = new Image(); img.onload = () => { setImageUrl(url); setImages([]); setIsAnimating(false); }; img.src = url; } }; // Initialize bouncing images with correct aspect ratio const initBouncingImages = () => { if (!imageUrl || !containerRef.current) return; const img = new Image(); img.onload = () => { const container = containerRef.current; if (!container) return; const aspectRatio = img.width / img.height; const baseWidth = Math.floor(Math.random() * 150) + 50; // 50-200px const newImages: BouncingImage[] = []; const imageCount = Math.floor(Math.random() * 16) + 5; // 5-20 images for (let i = 0; i < imageCount; i++) { const width = Math.floor(Math.random() * 150) + 50; // 50-200px const height = width / aspectRatio; newImages.push({ id: i, x: Math.random() * (container.clientWidth - width), y: Math.random() * (container.clientHeight - height), vx: (Math.random() - 0.5) * 6, vy: (Math.random() - 0.5) * 6, width, height, aspectRatio, }); } setImages(newImages); setIsAnimating(true); if (fileInputRef.current) { fileInputRef.current.value = ''; } }; img.src = imageUrl; }; // Handle color picker const handleColorPick = async () => { try { // @ts-ignore - EyeDropper API is experimental const eyeDropper = new window.EyeDropper(); const { sRGBHex } = await eyeDropper.open(); setBgColor(sRGBHex); } catch (err) { console.error('EyeDropper failed:', err); // Fallback to standard color input const colorInput = document.createElement('input'); colorInput.type = 'color'; colorInput.value = bgColor; colorInput.onchange = (e) => { setBgColor((e.target as HTMLInputElement).value); }; colorInput.click(); } }; // Animation loop useEffect(() => { if (!isAnimating || !containerRef.current) return; const animate = () => { setImages(prevImages => { return prevImages.map(img => { let newX = img.x + img.vx; let newY = img.y + img.vy; let newVx = img.vx; let newVy = img.vy; // Bounce off walls if (newX <= 0 || newX + img.width >= containerRef.current!.clientWidth) { newVx = -newVx; newX = newX <= 0 ? 0 : containerRef.current!.clientWidth - img.width; } if (newY <= 0 || newY + img.height >= containerRef.current!.clientHeight) { newVy = -newVy; newY = newY <= 0 ? 0 : containerRef.current!.clientHeight - img.height; } return { ...img, x: newX, y: newY, vx: newVx, vy: newVy }; }); }); animationRef.current = requestAnimationFrame(animate); }; animationRef.current = requestAnimationFrame(animate); return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current); } }; }, [isAnimating]); // Handle window resize useEffect(() => { const handleResize = () => { if (containerRef.current && images.length > 0 && isAnimating) { const containerWidth = containerRef.current.clientWidth; const containerHeight = containerRef.current.clientHeight; setImages(prevImages => prevImages.map(img => { const newX = Math.min(Math.max(img.x, 0), containerWidth - img.width); const newY = Math.min(Math.max(img.y, 0), containerHeight - img.height); return { ...img, x: newX, y: newY, vx: newX !== img.x ? -img.vx : img.vx, vy: newY !== img.y ? -img.vy : img.vy }; })); } }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [images, isAnimating]); const resetAnimation = () => { setIsAnimating(false); setImages([]); }; return (

{/* Controls - only shown when not animating */} {!isAnimating && (

Click to upload

{imageUrl && ( )}

)} {/* Reset button - only shown when animating */} {isAnimating && (

)} {/* Bouncing area */}

{isAnimating && imageUrl && images.map((img) => ( Bouncing

))}

); }