About This Project

This is an interactive, single-page Republic Day experience built with pure HTML, CSS, and vanilla JavaScript. No frameworks, no build tools, no dependencies—just clean, modern web technologies.

The experience takes you through a sequence of beautifully animated scenes: a welcome screen, countdown, typewriter quote, Republic Day date card, animated Indian flag with Ashoka Chakra, a quote card, and a festive confetti finale.

Key Features

Project Structure

The project consists of just three files:

.
├─ index.html    # Main HTML shell and scene markup
├─ styles.css    # Layout, typography, scenes, flag, and animation styles
└─ app.js        # Scene controller, typewriter, countdown, confetti, and wiring

index.html

Defines the main app container and all scenes. Includes the landing scene with a Start button, countdown, typewriter, date card, flag reveal with inline Chakra SVG, quote card, and the final confetti scene.

styles.css

Contains all styling including global design tokens (CSS custom properties), glassmorphism panels, scene transitions, flag animations, and accessibility considerations. The design uses a dark theme with tricolour accents.

app.js

The JavaScript engine includes:

• SceneController – Manages scene transitions and state
• TickTypewriter – Deterministic typewriter effect
• CountdownEffect – Animated countdown with pulse
• CanvasConfetti – Custom confetti particle system
• wire() – Bootstrap function that orchestrates everything

How to Run

Option 1: Open Directly

1. Download or clone the repository from GitHub
2. Open index.html in any modern browser (Chrome, Edge, Firefox, Safari)
3. Click Start to begin the experience

Option 2: Use a Local Server

For the best experience, serve it with a simple static server:

# Using npx serve
npx serve .

# or using http-server
npx http-server .

Then open the printed URL (usually http://localhost:3000 or http://127.0.0.1:8080) in your browser.

Customization Guide

Want to make it your own? Here’s how:

Update Text and Quotes

• Landing titles: Edit the text in index.html (lines 21-23)
• Typewriter message: Change the string in app.js (around line 300)
• Final messages: Modify the finale section in index.html

Change Timing and Flow

• Countdown speed: Adjust stepMs in new CountdownEffect(...)
• Scene transitions: Edit the AUTO_TIMELINE array in app.js

Adjust Visuals

• Colors: Modify CSS variables in styles.css (:root block)
• Animations: Tweak keyframes and durations for pulse, bandIn, chakraIn, etc.

Technical Highlights

Accessibility

• Respects prefers-reduced-motion – motion-heavy effects gracefully simplify
• Skip-to-content link for keyboard users
• Semantic HTML with ARIA labels
• Proper focus management

Performance

• Zero external dependencies
• Optimized animations using CSS transforms
• Efficient canvas rendering for confetti
• Works offline – no CDN dependencies

Code Quality

• Clean, commented code structure
• Modular classes for reusability
• Deterministic effects for testability
• Global exposure for debugging (no bundlers needed)

Development Notes

This project was designed as a lightweight, dependency-free interactive experience. No framework or bundler is required—all code is intentionally kept simple to remain easy to inspect and reuse.

The code structure supports learning, testing, and potential reuse in other small interactive projects. If you extend or refactor this, consider keeping:

• The clear scene separation
• Accessibility and reduced-motion support
• The dependency-free, static-host-friendly setup

Watch the Demo

Prefer watching instead of reading? Here is a short walkthrough of the 26 January • Republic Day Experience in action.

Share This Project

If you found this Republic Day project useful or inspiring, share it with others: