'use client'; import { useEffect, useRef } from 'react'; export interface StarFieldProps { starCount?: number; speed?: number; starColor?: string; backgroundColor?: string; } export function StarField(props: StarFieldProps) { const { starCount = 200, speed = 0.5, starColor = '#ffffff', backgroundColor = '#000000' } = props; const propsRef = useRef(props); useEffect(() => { propsRef.current = { starCount, speed, starColor, backgroundColor }; }, [starCount, speed, starColor, backgroundColor]); const canvasRef = useRef(null); const mouseRef = useRef({ x: 0, y: 0 }); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; let animationId: number; let stars: { x: number, y: number, z: number }[] = []; const resize = () => { const parent = canvas.parentElement; if (parent) { const dpr = window.devicePixelRatio || 1; canvas.width = parent.clientWidth * dpr; canvas.height = parent.clientHeight * dpr; canvas.style.width = `${parent.clientWidth}px`; canvas.style.height = `${parent.clientHeight}px`; ctx.scale(dpr, dpr); initStars(); } }; const initStars = () => { const { starCount = 200 } = propsRef.current; const width = canvas.width / (window.devicePixelRatio || 1); const height = canvas.height / (window.devicePixelRatio || 1); stars = []; for (let i = 0; i < starCount; i++) { stars.push({ x: Math.random() * width - width / 2, y: Math.random() * height - height / 2, z: Math.random() * width }); } }; const onMouseMove = (e: MouseEvent) => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const width = canvas.width / (window.devicePixelRatio || 1); const height = canvas.height / (window.devicePixelRatio || 1); mouseRef.current = { x: (x - width / 2) * 1, // Parallax intensity y: (y - height / 2) * 1 }; }; const render = () => { const { speed = 0.5, starColor = '#ffffff', backgroundColor = '#000000', starCount = 200 } = propsRef.current; const width = canvas.width / (window.devicePixelRatio || 1); const height = canvas.height / (window.devicePixelRatio || 1); // Re-init check if (stars.length !== starCount && stars.length !== 0) { if (stars.length < starCount) { for (let i = 0; i < starCount - stars.length; i++) { stars.push({ x: Math.random() * width - width / 2, y: Math.random() * height - height / 2, z: Math.random() * width }); } } else { stars = stars.slice(0, starCount); } } else if (stars.length === 0 && starCount > 0) { initStars(); } // Fill background ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, width, height); ctx.fillStyle = starColor; const cx = width / 2; const cy = height / 2; // Mouse Influence (parallax) // Move center based on mouse (opposite direction) const targetX = -mouseRef.current.x * 0.5; const targetY = -mouseRef.current.y * 0.5; for (let i = 0; i < stars.length; i++) { const star = stars[i]; star.z -= speed; if (star.z <= 0) { star.z = width; star.x = Math.random() * width - width / 2; star.y = Math.random() * height - height / 2; } const sx = (star.x / star.z) * width + cx + targetX * (1 - star.z / width); const sy = (star.y / star.z) * width + cy + targetY * (1 - star.z / width); // Use width for aspect ratio const size = (1 - star.z / width) * 2; const alpha = (1 - star.z / width); if (sx >= 0 && sx < width && sy >= 0 && sy < height) { ctx.globalAlpha = alpha; ctx.beginPath(); ctx.arc(sx, sy, size < 0 ? 0 : size, 0, Math.PI * 2); ctx.fill(); } } ctx.globalAlpha = 1.0; animationId = requestAnimationFrame(render); }; window.addEventListener('resize', resize); canvas.addEventListener('mousemove', onMouseMove); resize(); render(); return () => { window.removeEventListener('resize', resize); canvas.removeEventListener('mousemove', onMouseMove); cancelAnimationFrame(animationId); }; }, []); return (

Star Field