Holi Overlay — Add Vibrant Holi Celebration Effects to Any Website

#webdev #npm #javascript #opensource

🎉 Holi Overlay — Bring Your Website Alive With Festive Colors! 🌈

A JavaScript overlay that brings colorful Holi effects — water balloons, pichkaari streams, ambient gradients — to your web project in one line of code!

I just shipped a fun, customizable Holi festival overlay that you can drop into any website in seconds!

👉 Live Demo
📦 npm Package
💻 Source Code

🚀 What Is Holi Overlay?

Holi Overlay is a lightweight, zero-dependency animation library that renders a full-screen Holi celebration on your site — complete with vibrant water balloons, pichkaari color streams, and realistic splash particles. It's perfect for:

🎊 Festive pages

🎁 Seasonal campaigns

🎯 Interactive celebrations

🎨 Colorful UI experiences

All of this runs without blocking interactions — users can still click and scroll while the effects play!

🧩 What's Inside the Overlay

Once active, Holi Overlay gives you:

💦 Water balloons flying & bursting with splash physics
🌈 Pichkaari color trails with particle streams
✨ Ambient gradients & powder clouds
🧘‍♂️ Non-interactive canvas overlay (pointer-events: none)

📦 Installation

🛠️ Via npm

npm install holi-overlay

// In your JavaScript
import HoliOverlay from 'holi-overlay';

// Start the overlay
HoliOverlay.start({
  maxBalloons: 15,
  opacity: 0.95
});

// Toggle on/off
HoliOverlay.toggle();

// Check status
if (HoliOverlay.isRunning()) {
  console.log('🎨 Holi mode active!');
}

📌 CDN (No Build Tools Needed)

Simply inject 2 lines before </body>:

<script src="https://cdn.jsdelivr.net/npm/holi-overlay@latest/dist/holi-overlay.umd.js"></script>
<script>HoliOverlay.start();</script>

#webdev #javascript #opensource #npm #overlay #animation #canvas #css #html

DEV Community