<div class="leaves"></div>
<div class="cursor"></div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.leaves {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;

    .sheet {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: aquamarine;
        transition: 0.5s;
    }
}

.cursor {
    position: fixed;
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
    transform: translate(-50%, -50%);

    &.__hide {
        opacity: 0;
    }
}

document.addEventListener('DOMContentLoaded', () => {
    setCursor();
    setLeaves();

    function setCursor() {
        const cursor = document.querySelector('.cursor');

        document.addEventListener('mousemove', (e) => {
            cursor.classList.remove('__hide');

            const { clientX, clientY } = e;

            cursor.style.left = clientX + 'px';
            cursor.style.top = clientY + 'px';
        });
        document.addEventListener('mouseleave', (e) => {
            cursor.classList.add('__hide');
        });
    }

    function setLeaves() {
        const box = document.querySelector('.leaves');

        generateLeaves(box);
        setEvents();
    }

    function setEvents() {
        const leaves = document.querySelectorAll('.sheet');
        const cursor = document.querySelector('.cursor');

        leaves.forEach(el => {
            cursor.addEventListener('mousemove', (e) => {
                const { clientX, clientY } = e;
                const {top, left} = el.getBoundingClientRect();

                if(clientY >= top && clientX >= left && !el.classList.contains('__falling')) {
                    el.classList.add('__falling');
                    el.style.top = window.innerHeight - el.getBoundingClientRect().height + 'px';
                }
            })
        });
    }

    function generateLeaves(box) {
        for(let i = 0; i < 100; i++) {
            let sheet = document.createElement('div');
            sheet.classList.add('sheet');
            sheet.style.left = Math.random() * window.innerWidth + 'px';
            sheet.style.top = Math.random() * window.innerHeight + 'px';
            box.append(sheet);
        }
    }
})