Created by Abhishek Jadhav — @0xAbhi13

📚 Table of Contents

🌐 Live Preview • 🇮🇳 About • ✨ Features • 🗺️ Page Sections • 🧠 How It Works • 🧰 Tech Stack • 📦 Install • ▶️ Usage • 🗂️ Structure • 🙏 Credits • 🛣️ Roadmap • 📄 License

🇮🇳 What is Azadi 80?

Azadi 80 is a cinematic, single-page tribute to 80 years of Indian Independence (1947–2026). A rotating chakra scene, a scroll-driven journey through the decades, tributes to the freedom fighters, a glimpse of modern India, and a giant animated "80" counter that bursts into confetti — all rendered in the browser with Three.js and GSAP ScrollTrigger.

🌐 View the live site → 0xabhi13.github.io/Azadi80

> Initializing Azadi 80...
> Tricolour raised            ✓
> Chakra spinning             ✓
> ScrollTrigger armed         ✓
> Freedom fighters loaded     ✓
> 80 years counted            ✓
> Jai Hind. Scroll to begin ☝️

✨ Features

🌀 Animated Chakra Scene A live, spinning Ashoka Chakra rendered on canvas — with a lightweight CSS fallback if WebGL isn't available.	🕰️ Scroll-Driven Journey 1947 → 2030, a GSAP ScrollTrigger timeline that reveals each chapter of India's story as you scroll.	🎖️ Freedom Fighter Tributes Six tilt-on-hover cards honouring Gandhi, Bose, Bhagat Singh, Patel, Rani Lakshmibai and Dr. Ambedkar.
🚀 India Today Grid Nine cards on modern India — from Chandrayaan-3 to UPI, unicorns to renewable energy.	8️⃣0️⃣ Animated "80" Centrepiece A giant number that counts up on scroll, framed by a spinning chakra and a burst of tricolour confetti.	🎺 Patriotic Music, On Demand "Vande Mataram" (1937, public domain) plays only when you press play — never autoplay.
🎇 Finale Celebration A closing "Jai Hind" section with flag footage, glowing lights and a second confetti burst.	♿ Accessible by Design Respects prefers-reduced-motion, ships a full <noscript> fallback, and includes a skip-to-content link.	📱 Responsive & Local Fluid across devices. No build step, no tracking, no upload — everything renders in your browser.

🔒 Everything Runs Locally

This is a static site. No data is collected, uploaded, or stored — it's just HTML, CSS and JS in your browser.

🗺️ Page Sections

Section	Anchor	What You'll See
Home	#home	Hero video, tricolour ribbons, and the opening headline
Our Journey	#journey	A scroll-timeline from 1947's midnight hour to 2030
Freedom Fighters	#fighters	Six tribute cards for the icons of the freedom struggle
India Today	#today	Nine highlights of modern India, 2026
80 Years	#years	The animated "80" counter, chakra and confetti
Celebration	#celebration	The closing "Jai Hind" finale

Every reveal is scroll-triggered and debounced — sections animate in once, smoothly, without re-triggering on every scroll jitter.

🧠 How It Works

flowchart TD
    A[📜 index.html] --> B[🎨 CSS3<br/>Tricolour design tokens]
    A --> C[🌀 scene.js<br/>Three.js chakra + WebGL scene]
    A --> D[🎬 main.js<br/>GSAP ScrollTrigger reveals & counters]
    A --> E[🎺 audio.js<br/>Web Audio patriotic music toggle]
    C --> F[🖥️ Live Canvas Render]
    D --> F
    E --> G[🔊 Optional Sound]
    F --> H[🇮🇳 Azadi 80 Experience]
    G --> H

    style A fill:#001F54,color:#fff
    style B fill:#FFFFFF,color:#001F54
    style C fill:#FF9933,color:#001F54
    style D fill:#138808,color:#fff
    style E fill:#FFC94D,color:#001F54
    style F fill:#0A2E66,color:#fff
    style G fill:#F27F1E,color:#fff
    style H fill:#138808,color:#fff

Loading

The chakra scene renders on a full-viewport <canvas> behind the content; GSAP's ScrollTrigger drives every reveal, the "80" count-up, and both confetti bursts — so the whole experience stays in sync with how fast (or slow) you scroll.

🧰 Tech Stack

📦 Installation

🖱️ Click to expand setup steps

1. Clone the repo

git clone https://github.com/0xAbhi13/Azadi80.git
cd Azadi80

2. Serve it locally

Azadi 80 is a static site — no build step, no npm install. Any local server works:

python -m http.server 8000

3. Open it

Visit http://localhost:8000 in your browser.

Opening index.html directly (file://) usually works too, but a local server avoids any browser restrictions on video/audio loading.

▶️ Usage

1. 🇮🇳  Open the site and let the preloader finish spinning up.
2. ☝️  Scroll down to begin the journey from 1947 to today.
3. 🎖️  Hover the freedom fighter cards to see the tilt effect.
4. 🚀  Keep scrolling through India Today and the "80" counter.
5. 🎺  Tap "Play Patriotic Music" any time you like — it's your call.
6. 🎇  Reach the finale, say Jai Hind, and jump back to the top.

🗂️ Project Structure

Azadi80/
│
├── index.html              # Markup for every section, hero to finale
├── README.md
├── LICENSE
│
├── css/
│   └── style.css           # Tricolour design tokens, layout, animations
│
└── js/
    ├── scene.js             # Three.js chakra / WebGL background scene
    ├── main.js               # GSAP ScrollTrigger reveals, counters, confetti
    └── audio.js               # Patriotic music toggle (Web Audio, no autoplay)

🙏 Credits

• Portraits & monuments — Wikimedia Commons (public domain / CC licensed)
• Chandrayaan-3 imagery — ISRO, via Wikimedia Commons
• UPI logo — NPCI, via Wikimedia Commons
• Technology photography — Unsplash (Unsplash License)
• Flag footage — Pexels (Pexels License)
• Music — Vande Mataram, recorded by Pandit Chandrashekhar Vaze (1937), public domain (CC0), via Wikimedia Commons

This is an unofficial fan tribute, built with pride for India. It is not affiliated with, endorsed by, or produced on behalf of the Government of India.

🛣️ Future Roadmap

• State-by-state map of India Today highlights
• More freedom fighters and regional stories
• Downloadable "80 Years" wallpaper generator
• Multi-language support (Hindi, regional languages)
• Shareable celebration card / screenshot mode
• Dark "night sky fireworks" theme toggle

👨‍💻 Author

Abhishek Jadhav

Creator of Azadi 80 — building creative, animated web experiences.

📄 License

Released under the MIT License.

Jai Hind. Made with 🧡🤍💚 for 80 years of freedom.