GTM - Falling Snow

falling-snow.html

<!-- Add to tag "Custom HTML Tag" in GTM with "Firing Trigger" "All Pages" (Page View) for an instant falling snow overlay ontop of your website. -->
<!-- See: https://bsky.app/profile/jay.holtslander.ca/post/3ma7nio36tk2w -->
<script>
    (function() {
        var snowContainer = document.createElement('div');
        snowContainer.id = "gtm_snow_root";
        snowContainer.style.cssText = "position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;pointer-events:none!important;z-index:2147483647!important;overflow:hidden!important;display:block!important;background:transparent!important;";
        document.documentElement.appendChild(snowContainer);

        var SNOWFLAKE_COUNT = 150; 
        var MIN_SIZE = 2; 
        var MAX_SIZE = 5; 
        var MIN_SPEED = 1; 
        var MAX_SPEED = 3; 
        var flakes = [];

        function createSnowflake() {
            var size = Math.random() * (MAX_SIZE - MIN_SIZE) + MIN_SIZE;
            var flake = document.createElement("div");
            
            flake.style.cssText = "position:absolute!important;background-color:#fff!important;border-radius:50%!important;opacity:0.8!important;pointer-events:none!important;filter:blur(0.5px)!important;";
            flake.style.width = size + "px";
            flake.style.height = size + "px";

            var data = {
                el: flake,
                x: Math.random() * 100,
                y: Math.random() * window.innerHeight,
                speed: Math.random() * (MAX_SPEED - MIN_SPEED) + MIN_SPEED,
                driftOffset: Math.random() * Math.PI * 2,
                driftAmp: Math.random() * 2,
                size: size
            };

            snowContainer.appendChild(flake);
            return data;
        }

        function update() {
            var time = Date.now() / 1000;

            for (var i = 0; i < flakes.length; i++) {
                var f = flakes[i];
                
                f.y += f.speed;
                
                var drift = Math.sin(time + f.driftOffset) * f.driftAmp;
                var currentX = f.x + drift;

                f.el.style.transform = "translate3d(" + currentX + "vw, " + f.y + "px, 0)";

                if (f.y > window.innerHeight + 20) {
                    f.y = -20;
                    f.x = Math.random() * 100;
                }
            }
            requestAnimationFrame(update);
        }

        for (var i = 0; i < SNOWFLAKE_COUNT; i++) {
            flakes.push(createSnowflake());
        }

        update();
    })();
</script>