snowfall.html

<div id="snowfall-overlay"></div>

<style>
#snowfall-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.snowflake {
    position: fixed;
    top: -10px;
    color: white;
    line-height: 1;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    pointer-events: none;
    animation: fall linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(-10vh) translateX(0);
    }
    25% {
        transform: translateY(25vh) translateX(calc(var(--drift) * 0.5));
    }
    50% {
        transform: translateY(50vh) translateX(calc(var(--drift) * -0.5));
    }
    75% {
        transform: translateY(75vh) translateX(calc(var(--drift) * 0.5));
    }
    100% {
        transform: translateY(100vh) translateX(calc(var(--drift) * -0.5));
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('snowfall-overlay');
    const snowflakeCount = window.innerWidth <= 768 ? 50 : 100;

    function createSnowflake() {
        const snowflake = document.createElement('div');
        snowflake.className = 'snowflake';
        snowflake.textContent = '❄';

        // Medium size range for a balanced effect
        const size = Math.random() * (window.innerWidth <= 768 ? 8 : 12) + 6; // Size: 6px to 14px
        const drift = Math.random() * 20 - 10; // Drift range: -10vw to 10vw

        // Apply styles
        snowflake.style.cssText = `
            left: ${Math.random() * 100}%;
            opacity: ${Math.random() * 0.6 + 0.4};
            font-size: ${size}px;
            animation-duration: ${Math.random() * 5 + 10}s;
            animation-delay: ${Math.random() * 5}s;
            --drift: ${drift}vw;
        `;

        container.appendChild(snowflake);

        // Remove snowflake after animation ends
        snowflake.addEventListener('animationend', () => snowflake.remove());
    }

    // Initial batch of snowflakes
    for (let i = 0; i < snowflakeCount; i++) {
        setTimeout(createSnowflake, Math.random() * 3000);
    }

    // Continuously generate snowflakes
    setInterval(() => {
        if (container.childElementCount < snowflakeCount) createSnowflake();
    }, 300);
});
</script>