practice.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv="refresh" content="3">//it refresh the page automatically -->
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        overflow: hidden;
        cursor: none;
    }
    .firecontainer{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    .fire{
        background-color: aqua;
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        animation: fire 1s ease-out;
    }
    @keyframes fire {
        to{
            transform: scale(2);
            opacity: 0;
        }
        
    }
</style>
<body>
    <!-- <div class="img1"></div>
    <div class="img2"></div> -->
    <!-- heeyey
    <input type="file" capture="environment"> -->
    <!-- <video ></video>
    <script>
        const video=document.getElementById("vdo");
        navigator.mediaDevices.getUserMedia({video:true}).then(stream=>{
            video.srcObject=stream;
            video.play()
        })
    </script> -->
    <script>
        const firecontainer=document.createElement("div")
        firecontainer.className="firecontainer"
        document.body.appendChild(firecontainer);

        document.addEventListener("mousemove",function(e){
            mouseMovement(e.clientX,e.clientY);
        })

        const mouseMovement=(x,y)=>{
            const fire=document.createElement("div")
            fire.className="fire";
            fire.style.left=x + "px"
            fire.style.top=y + "px"
            // console.log(x,y);
            firecontainer.appendChild(fire)

            setTimeout(()=>{
                fire.remove();
            },3000)
        }

    </script>
</body>
</html>