• Automatic weather detection — triggers effects based on live weather notifications
• Dynamic rain effects — configurable intensity, droplet count, and wind direction
• Beautiful snow effects — supports both lightweight ASCII and rich Unicode snowflakes (❄)
• Smooth transitions — animated fade between weather states
• Performance-optimized — tunable for Raspberry Pi and high-powered displays alike
• Flexible configuration — fine-grained control over every visual parameter
• Custom keyword support — adapt to any weather provider's terminology

The module renders fullscreen weather overlays with configurable styles and intensities:

Rain with configurable droplet count, speed, and wind direction

ASCII characters (*, +) — recommended for Raspberry Pi and low-power devices

Unicode snowflakes (❄) — visually stunning on powerful displays

Add the following to your config/config.js to get started immediately:

{
    module: "MMM-WeatherEffects",
    position: "fullscreen_above"  // Required position
}

That's all! The module works out of the box with sensible defaults. See Configuration Options for full customization.

cd ~/MagicMirror/modules
git clone https://github.com/cgillinger/MMM-WeatherEffects.git

Add a full configuration block to config/config.js:

{
    module: "MMM-WeatherEffects",
    position: "fullscreen_above",
    config: {
        enabled: true,
        intensity: "auto",
        rainConfig: {
            dropletCount: 50,
            dropletSpeed: 2.0,
            windDirection: "none"  // "none" | "left-to-right" | "right-to-left"
        },
        snowConfig: {
            flakeCount: 25,
            characters: ['*', '+'],
            sparkleEnabled: false,
            minSize: 0.8,
            maxSize: 1.5,
            speed: 1.0
        }
    }
}

Reduce particle counts and disable visual enhancements:

config: {
    rainConfig: {
        dropletCount: 30
    },
    snowConfig: {
        flakeCount: 15,
        sparkleEnabled: false,
        maxSize: 1.2
    }
}

Enable rich snowflakes and sparkle for maximum visual impact:

config: {
    rainConfig: {
        dropletCount: 100
    },
    snowConfig: {
        flakeCount: 50,
        characters: ['❄', '❆', '*'],
        sparkleEnabled: true,
        maxSize: 2.0
    }
}

Override default styles by creating a custom.css file in your MagicMirror css/ directory.

.rain-particle {
    width: 4px;
    height: 16px;
    opacity: 0.8;
    background: linear-gradient(to bottom, #00aaff, transparent);
}

/* Base snowflake style */
.snow-particle {
    color: white;
    opacity: 0.8;
}

/* Color variants */
.snow-particle.blue-light  { color: #BDE3FF !important; }
.snow-particle.blue-medium { color: #99CCFF !important; }
.snow-particle.blue-dark   { color: #66A3FF !important; }
.snow-particle.crystal     { color: #F0F8FF !important; }

/* Sparkle glow */
.snow-particle.sparkle {
    text-shadow: 0 0 8px rgba(255,255,255,0.8);
}

/* Slow down rain (higher = slower) */
.rain-particle  { animation-duration: 2s !important; }

/* Slow down snow */
.snow-particle  { animation-duration: 5s !important; }

Tip: Start with small adjustments and test each change before applying more.

The file weather-keywords.json maps weather condition strings to effects. Edit this to match your weather provider's terminology:

{
    "effects": {
        "rain": ["rain", "showers", "drizzle", "precipitation"],
        "snow": ["snow", "sleet", "blizzard", "flurries"]
    }
}

• Verify your weather module is correctly configured and running
• Open the browser console and check for incoming weather notifications
• Explicitly set enabled: true in your config
• Confirm that weather-keywords.json includes your provider's condition strings

• Lower dropletCount and flakeCount
• Disable sparkleEnabled
• Switch to ASCII characters instead of Unicode snowflakes
• Reduce maxSize values

• Check the browser console for notification payloads from your weather module
• Verify the condition text matches entries in weather-keywords.json
• Add any missing terms to the keywords file

Contributions, bug reports, and feature requests are welcome!

• Open an issue: GitHub Issues
• Submit a pull request: GitHub PRs

• Created by Christian Gillinger
• Built on MagicMirror² by Michael Teeuw

Distributed under the MIT License. See LICENSE for full details.