Pure animated CSS backgrounds for use with Magic Mirror 2 on a Raspberry Pi.
The MMM-CSSBackgrounds module allows you to display an animation in the background. All animations are CSS (Cascading Style Sheet) based with no dependencies on Javascript frameworks.
View the screenshots or Codepen collection to see the animations (also directly linked below).
| Name | Description | Preview |
|---|---|---|
| particles | Lots of small floating particles | View on Codepen |
| fireflies | Lots of small floating insects | View on Codepen |
| risingstars | Parallax stars rising from the bottom | View on Codepen |
| animatedgradient | Colourful ever changing gradient background color | View on Codepen |
| animatedbgcolor | Colourful ever changing background color (9 colors) | View on Codepen |
| slidingdiagonal | 3 layers sliding left/right on a diagnonal | View on Codepen |
| lavalamp | Floating and falling lava blobs | View on Codepen |
| bokeh | Colourful bokeh blobs | View on Codepen |
| bokehgrey | Grey bokeh blobs | View on Codepen |
| risingcubes | Slowly spinning cubes from the bottom | View on Codepen |
| tritravelers | Small triangles floating towards the center | View on Codepen |
| bubbles | Small bubbles rising from the bottom | View on Codepen |
| bubblescoloredbg | Smallbubbles rising from the bottom, blue color changing background | View on codepen |
| beer | Turn your screen into a beer vestibule | View on Codepen |
This module requires no special dependencies, however, it was tested using the Raspberry Pi 4 2GG. Performance cannot be guaranteed on older devices with less memory.
This module simply adds CSS classes to the Magic Mirror index.html template, and uses minimal markup to create the animated backgrounds.
To install, cd into the modules directory, clone, cd into the newly created MMM-CSSBackgrounds directory, then install.
cd MagicMirror/modules
git clone https://github.com/404ryannotfound/MMM-CSSBackgrounds.git
cd MMM-CSSBackgrounds
npm install
Alternatively:
Download the zip file https://github.com/404ryannotfound/MMM-CSSBackgrounds/archive/master.zip. Unzip the contents into the modules directory of your Magic Mirror install. Rename the 'MMM-CSSBackgrounds-master' folder to 'MMM-CSSBackgrounds'.
Once downloaded, add the module to the modules array in the config/config.js file:
modules: [
{
module: "MMM-CSSBackgrounds",
position: "fullscreen_below",
config: {
theme: "animatedgradient"
/* Choose from: particles, firefly, risingparticles animatedgradient, animatedbgcolor, slidingdiagonal, lavalamp, bokeh, bokehgrey, risingcubes, tritravelers, bubbles, bubblescoloredbg, beer, snowflakes, blobs */
}
},
];
To assist with accessibuility & readability, All fonts and screen items have been set to #ffffff (white) in the CSS.
If you wish to modify, simply edit the MMM-CSSBackgrounds.css file. You can also modify the html color also, if you wish to change the background from a blue circular gradient to black.
Lavalamp color can also be changed in the CSS, with sample colors given. (These may be configurable via config.js moving forward).
Log any issues to the Issues page.
Whilst care has been taken to avoid excessive animation that would degrade the Pi's performance, please test and monitor your usage of this module. Lavalamp in particular seems slightly intensive on the rendering, so please take care if you Pi is prone to overheating.
Tested in Landcape mode 1920 x 1080, so Portrait and other may have issues.
Contributors are more than welcome! 🤗 Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
- 404ryannotfound - Initial work - 404ryannotfound
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details
- Magic Mirror For the awesome MagicMirror²
- PurpleBooth for the wonderful Github templates
- Particles by Robin Selmer
- Fireflies by Mike Golus
- Rain by Yannick Brandt (slightly modified)
- Rising Stars by Saransh Sinha
- Animated Gradient by Manuel Pinto
- Animated Color Cycle by 404ryannotfound
- Shooting Stars by Yuseke Nakaya
- Sliding Diagonal by Chris Smith (Slightly modified)
- Lava Lamp by Rose Liu (Heavily modified)
- Bokeh by Keith Clark (Slightly modified, 2 versions available)
- Rising Cubes by Mohammed Abdul Mohaiman (Modified slightly)
- Tri Travelers by Nate Wiley (Modified slightly)
- Bubbles by Paulo Duzioni (Modified slightly)
- Beer by 404ryannotfound (bubbles by Paulo Duzioni)