I am currently trying to create a module that will display snow falling on the screen. I’m sure I am missing something but, from what I can tell the module is loading in the logs, just not displaying the snow falling. Any help would be appreciated.

MMM-SnowFlakes.js

Module.register("MMM-Snowflakes", {
        // Default configuration options
        defaults: {
                totalSnowflakes: 50, // Number of snowflakes
        },

        // Start method
        start: function () {
                Log.info("Starting module: " + this.name);
        },

        // Override the getDom method to provide the HTML content
        getDom: function () {
                const wrapper = document.createElement("div");
                wrapper.className = "initial-snow"; // The main container for the snowflakes
                return wrapper;
        },

        // Load the CSS and external JS file
        getStyles: function () {
                return ["MMM-Snowflakes.css"];
        },

        getScripts: function () {
                return ["snowflakes.js"];
        },

        // Pass configuration to the client-side script
        getConfig: function () {
                return this.config;
        },
});

snowflakes.js

document.addEventListener("DOMContentLoaded", () => {
        const snowContainer = document.querySelector(".initial-snow");
        const totalSnowflakes = window.ModuleConfig.totalSnowflakes || 50; // Fallback if config is not loaded

        // Snowflake variants
        const snowflakeVariants = ["❄", "❅", "❆"];

        for (let i = 0; i < totalSnowflakes; i++) {
                const snowflake = document.createElement("span");
                snowflake.classList.add("snowflake");

                // Randomly pick a snowflake variant
                const variantIndex = Math.floor(Math.random() * snowflakeVariants.length);
                snowflake.innerHTML = snowflakeVariants[variantIndex];

                // Randomize size, position, and animation duration
                const size = Math.random() * 0.8 + 0.2; // Size between 0.2 and 1
                const left = Math.random() * 100; // Random horizontal position
                const duration = Math.random() * 5 + 5; // Duration between 5s and 10s
                const blur = Math.random() < 0.3 ? "blur(1px)" : "none";

                snowflake.style.fontSize = `${size}em`;
                snowflake.style.left = `${left}vw`;
                snowflake.style.animationDuration = `${duration}s`;
                snowflake.style.filter = blur;
                snowflake.style.setProperty("--start-x", `${Math.random() * 10 - 5}vw`);
                snowflake.style.setProperty("--end-x", `${Math.random() * 10 - 5}vw`);

                // Append to the container
                snowContainer.appendChild(snowflake);
        }
});

MMM-Snowflakes.css

.initial-snow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
}

.snowflake {
        position: absolute;
        top: -5vh;
        color: white;
        animation: snowfall linear infinite;
        transform: translate3d(var(--start-x), 0, 0);
}

/* Keyframes for snowfall animation */
@keyframes snowfall {
        0% {
                transform: translate3d(var(--start-x), 0, 0);
        }
        100% {
                transform: translate3d(var(--end-x), 110vh, 0);
        }
}

config.js

                  {
                    module: "MMM-Snowflakes",
                    position: "fullscreen_above", 
                    config: {
                        totalSnowflakes: 50
                    }
                  },

@Piranha1605 Yeah dude I took a gander at your github and then set everything to my needs. I appreciate it!