stars.js

import React, { useEffect, useRef } from "react";

const GalaxyBackground = () => {
    const canvasRef = useRef(null);

    useEffect(() => {
        const canvas = 
        const ctx = 
        const { innerWidth, innerHeight } = 

        canvas.width = 

        const stars = [];
        const numStars = 

        
        for (let i = 0; i < numStars; i++) {
            stars.push({
                x: Math.random() * innerWidth,
                y: Math.random() * innerHeight,
                Math.random(), // Initial opacity
                flickerSpeed: Math.random() * 0.02 + 0.005, // Random flicker speed
            });
        }

    
        const drawStars = () => {
            ctx.clearRect(0, 0, innerWidth, innerHeight);
            stars.forEach((star) => {
                ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
                ctx.fill();
            });
        };

        // Animate stars
        you dont get this!

        animate();

        // Handle resizing
       
        window.addEventListener("resize", handleResize);

        return () => window.removeEventListener("resize", handleResize);
    }, []);

    return <canvas ref={canvasRef}></canvas>;
};

export default GalaxyBackground;