A lightweight JavaScript library that adds ambient, meditative glowing elements to your web page.
Zen.js creates subtle, colorful glowing "embers" that appear and disappear gracefully across your page background. These visual elements are designed to create a calm, zen-like atmosphere without interfering with user interactions.
Add the script to your HTML:
<script src="zen.js"></script>Add a container with the class glow where you want the effect to appear:
<div class="glow"></div>The script initializes and runs automatically:
<body>
<div class="glow"></div>
<script src="zen.js"></script>
</body>The default library includes the following ember colors:
- purple
- blue
- green
- orange
- pink
- darkPink
- brightPurple
To add your own colors, extend the embers array in the Zen class:
const zen = new Zen();
zen.embers.push('myCustomColor');
// Then add the corresponding CSS class
const customCSS = `
.glow .ember.myCustomColor {
background: radial-gradient(circle, rgba(255,0,0,1) 0%, rgba(255,0,0,0) 50%);
}
`;The glowing elements can be further customized by modifying the CSS in your own stylesheet.
Zen.js works in all modern browsers that support CSS transitions and JavaScript ES6 features.
MIT License