v1.0.0 — Production Ready

Add Holi Festival
Magic to Any Website

A stunning, zero-dependency overlay with colorful water balloons, pichkaari streams, and ambient effects. One line of code. Any website.

📖 Integration Guide
HTML 
<!-- Add before </body> — That's it! -->
<script src="https://cdn.jsdelivr.net/npm/holi-overlay@latest/dist/holi-overlay.umd.js"></script>
<script>HoliOverlay.start();</script>
Features

Built for Production

Industry best practices baked in. Zero dependencies. Framework agnostic.

🎈

Water Balloons

Colorful balloons fly in from all directions and burst with realistic splash physics and particle effects.

💦

Pichkaari Streams

Water gun streams shoot across the screen with thick, dense particle trails — just like a real Holi celebration.

🌈

Ambient Gradients

Breathing, pulsing color gradients in every corner create an immersive festive atmosphere.

⚡

Zero Dependencies

Pure vanilla JavaScript. No frameworks, no build tools, no bloat. Just drop it in and go.

📱

Fully Responsive

Works perfectly on mobile, tablet, and desktop. Automatically adapts to any screen size.

🔧

Highly Configurable

Custom colors, density, opacity, duration, z-index, and more. Full control via options or data attributes.

Integration

Works Everywhere

Choose the integration method that fits your stack.

HTML — CDN (Recommended) 
<!-- Option 1: Auto-start with data attributes -->
<script
  src="https://cdn.jsdelivr.net/npm/holi-overlay@latest/dist/holi-overlay.umd.js"
  data-autostart
  data-max-balloons="10"
  data-duration="30000"
></script>

<!-- Option 2: Manual control -->
<script src="https://cdn.jsdelivr.net/npm/holi-overlay@latest/dist/holi-overlay.umd.js"></script>
<script>
  // Start with custom options
  HoliOverlay.start({
    maxBalloons: 12,
    maxPichkaaris: 3,
    opacity: 0.9,
    duration: 60000 // Stop after 60 seconds
  });

  // Later, stop it
  HoliOverlay.stop();
</script>
Terminal + JavaScript 
# Install
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!');
}
React Component 
import { useEffect } from 'react';
import HoliOverlay from 'holi-overlay';

function App() {
  useEffect(() => {
    const overlay = HoliOverlay.start({
      maxBalloons: 12,
      duration: 30000
    });

    return () => overlay.stop();
  }, []);

  return <div>Your App Content</div>;
}

// Or use as a controlled component:
function FestiveApp({ showHoli }) {
  useEffect(() => {
    if (showHoli) {
      HoliOverlay.start();
    } else {
      HoliOverlay.stop();
    }
    return () => HoliOverlay.stop();
  }, [showHoli]);

  return <div>...</div>;
}
Next.js (App Router) 
// components/HoliFestive.tsx
'use client';

import { useEffect } from 'react';
import HoliOverlay from 'holi-overlay';

export default function HoliFestive() {
  useEffect(() => {
    const overlay = HoliOverlay.start({
      zIndex: 99999,
      maxBalloons: 10,
      maxPichkaaris: 3
    });

    return () => overlay.stop();
  }, []);

  return null;
}

// In your layout.tsx or page.tsx:
import HoliFestive from './components/HoliFestive';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <HoliFestive />
    </>
  );
}
WordPress — functions.php 
// Add to your theme's functions.php
function add_holi_overlay() {
  wp_enqueue_script(
    'holi-overlay',
    'https://cdn.jsdelivr.net/npm/holi-overlay@latest/dist/holi-overlay.umd.js',
    array(),
    '1.0.0',
    true
  );

  wp_add_inline_script(
    'holi-overlay',
    'HoliOverlay.start({ maxBalloons: 10, duration: 60000 });'
  );
}
add_action('wp_enqueue_scripts', 'add_holi_overlay');

// Or just paste this in your theme's footer.php before </body>:
<script
  src="https://cdn.jsdelivr.net/npm/holi-overlay@latest/dist/holi-overlay.umd.js"
  data-autostart
  data-duration="60000"
></script>
API Reference

Configuration Options

Fine-tune every aspect of the overlay to match your site.

Option Type Default Description
zIndex number 99999 CSS z-index of the canvas overlay
opacity number 0.95 Overall opacity of the overlay (0 – 1)
maxBalloons number 15 Maximum simultaneous water balloons on screen
maxPichkaaris number 4 Maximum simultaneous water gun streams
colors Array<{r,g,b}> 9 Holi colors Custom color palette as RGB objects
duration number 0 Auto-stop after N ms (0 = infinite)
container string body CSS selector of the container element

Methods

HoliOverlay.start(options?)    // Start the overlay, returns controller
HoliOverlay.stop()             // Stop and remove the overlay
HoliOverlay.toggle(options?)   // Toggle on/off
HoliOverlay.isRunning()       // Returns true if active
HoliOverlay.create(options?)   // Create controller without starting
HoliOverlay.version           // Library version string
HoliOverlay.defaultColors     // Access default color palette
Interactive Demo

Try It Now

Click the buttons below to control the overlay in real-time.