I am working on a small project. The page is supposed to come in from being blurred, into a clear image. The problem is that the image never gets clear. It remains at the same level of blur (30Px). Everything else is now functioning properly.

Im not sure what else to add to the question.

CSS:

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

* {
    box-sizing: border-box;
}

body {
    font-family: "Ubuntu", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;  
}

.bg {
    background: url("4.jpg") no-repeat center center/cover;
    position: absolute;
    top: -300px;
    left: -30px;
    width: calc(100vw + 50px);
    height: calc(100vw + 30px);
    z-index: -1; 
    filter: blur(30px);
}


#text {
    font-size: 50px;
    color: #fff;
}

JS:


loadText = document.getElementById('text');
const bg = document.querySelector('.bg');

let load = 0;

const int = setInterval(blurring, 100);

function blurring() {
    load++
    console.log(load)
    if (load > 99) {
        clearInterval(int)
    }

    loadText.innerText = `${load}%`
    loadText.style.opacity = scale(load, 0, 100, 1, 0)

}

function scale (number, inMin, inMax, outMin, outMax) {
    return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}

blurring()


The image starts blurred, but never becomes clear. This count from 0% to 100% functions properly. The opacity fade is working properly as well. The only thing not functioning is the image becoming clear.