@event-overlay/independence-day

v1.0.2

Published

a month ago

🇮🇳 Lightweight, high-performance Indian Independence Day celebration overlay. Zero dependencies.

🇮🇳 Overview

Celebrate Indian Independence Day (15th August) and Republic Day (26th January) in style! @event-overlay/independence-day is a turnkey, zero-dependency celebration canvas overlay for modern web applications.

It renders an authentic, breathtaking patriotic atmosphere featuring the Tricolor Silk Wave, fluttering Tiranga flags, high-altitude kites, IAF fighter jet airshows with tricolor smoke trails, grand fireworks, and drifting marigold petals at buttery-smooth 60 FPS.

✨ Festive Elements & Features

🌊 Tricolor Silk Banner Wave: Soft, billowing saffron-white-green satin ribbons flowing gracefully across the screen.
🚩 Waving Indian Flags (Tiranga): Realistic cloth simulation of the Indian National Flag with Ashoka Chakra details.
🪁 High-Altitude Flying Kites: Colorful kites soaring with swaying physics-based tails and ribbons.
✈️ Fighter Jet Airshow: High-speed aircraft formations streaking across the sky, painting persistent saffron, white, and green smoke vapor trails.
🎆 Grand Fireworks & Sparklers: Dazzling bursts of gold, saffron, and emerald sparkler clusters.
🌸 Drifting Petals: Natural marigold (Genda) and rose flower petals floating in gentle wind vectors.
🌅 Ambient National Glow: Top saffron and bottom green atmospheric glows.
⚡ Lightweight & High Performance: 60 FPS hardware-accelerated Canvas 2D engine with zero external dependencies (~12KB gzipped).
🛡️ Non-Intrusive & Accessible: Configured with pointer-events: none and aria-hidden="true" so your website remains 100% interactive.
🧩 Universal Framework Support: Ready for React, Next.js (App & Pages Router), Vue, Svelte, Angular, Vite, and HTML CDN script tags.

📦 Installation

# npm
npm install @event-overlay/independence-day

# yarn
yarn add @event-overlay/independence-day

# pnpm
pnpm add @event-overlay/independence-day

# bun
bun add @event-overlay/independence-day

🚀 Quick Start Guide

1. React & Next.js (App Router / Pages Router)

Import IndependenceDayOverlay and place it in your root layout or page:

import { IndependenceDayOverlay } from '@event-overlay/independence-day/react';

export default function App() {
  return (
    <main>
      {/* Patriotic celebration overlay */}
      <IndependenceDayOverlay 
        waveOpacity={0.65} 
        maxFlags={3} 
        maxKites={6} 
        maxJets={2} 
        maxFireworks={3} 
        maxPetals={35} 
      />

      <div style={{ position: 'relative', zIndex: 1, textAlign: 'center', padding: '4rem' }}>
        <h1>🇮🇳 Happy Independence Day! Jai Hind! 🇮🇳</h1>
        <p>Your interactive site content remains fully clickable.</p>
      </div>
    </main>
  );
}

Next.js App Router Note: IndependenceDayOverlay contains 'use client' internally, ensuring seamless compatibility with Next.js 13/14/15 Server & Client components.

2. Vanilla JavaScript / TypeScript (Vite, Webpack, ES Modules)

import { start, stop, toggle, isRunning } from '@event-overlay/independence-day';

// Launch overlay with custom particle densities
const overlay = start({
  waveOpacity: 0.65,
  maxFlags: 3,
  maxKites: 6,
  maxJets: 2,
  maxFireworks: 3,
  maxPetals: 35
});

// Programmatic controls:
// stop();        // Disables overlay and cleans up resources
// toggle();      // Toggles active state
// isRunning();   // Returns true if animation is currently active

3. HTML CDN Drop-in Script Tag (No Build Tools Required)

Add directly before your closing </body> tag. Add data-autostart to launch immediately:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Happy Independence Day</title>
</head>
<body>
  <h1>Celebration Sale is Live! 🇮🇳</h1>

  <!-- 1-line CDN Drop-in -->
  <script 
    src="https://cdn.jsdelivr.net/npm/@event-overlay/independence-day/dist/index.umd.js" 
    data-autostart>
  </script>
</body>
</html>

Or trigger manually via global window.IndependenceDayOverlay:

<script src="https://cdn.jsdelivr.net/npm/@event-overlay/independence-day/dist/index.umd.js"></script>
<script>
  window.IndependenceDayOverlay.start({
    maxKites: 8,
    maxJets: 3
  });
</script>

4. Vue 3 / Nuxt

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { start, stop } from '@event-overlay/independence-day';

onMounted(() => {
  start({ waveOpacity: 0.6, maxKites: 6, maxFlags: 3 });
});

onUnmounted(() => {
  stop();
});
</script>

<template>
  <main>
    <h1>Happy Independence Day! 🇮🇳</h1>
  </main>
</template>

⚙️ Configuration & Props Reference

🛠️ TypeScript Support

import type { 
  IndependenceDayOverlayProps, 
  IndependenceDayOptions 
} from '@event-overlay/independence-day';

const options: IndependenceDayOptions = {
  waveOpacity: 0.7,
  maxFlags: 4,
  maxKites: 8,
  maxJets: 3,
  maxFireworks: 5,
  maxPetals: 50
};

🔍 Keywords & Discovery

independence-day • indian-independence-day • 15-august • republic-day • 26-january • tiranga • indian-flag • tricolor • kites • patriotism • airshow • fighter-jets • fireworks • azadi-ka-amrit-mahotsav • react-independence-day • celebration-overlay • canvas-animation • react-festive • nextjs-overlay • web-animation • canvas-overlay • zero-dependency

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme