🚀 ElevateX 4.0 — Interactive Web Trailer

An immersive, cinematic DOM-based web experience built for ElevateX 4.0, the ultimate mentoring summit presented by IEEE JUSB.

[Explore the Live Demo][(https://vercel.com/apurbasamanta322-4600s-projects/elevate-x-4-0)]

---

📖 Table of Contents

• About the Project
• Key Features
• Project Structure

---

📌 About the Project

This project replaces a traditional MP4 video trailer with a dynamic, browser-native presentation. It features a custom particle engine, interactive HUD elements, and a timeline-based slide progression system designed with a futuristic, cyberpunk aesthetic. It is engineered to command attention and drive registrations for the upcoming ElevateX 4.0 technical summit.

✨ Key Features

• Custom Particle Engine: A dynamic background built with the HTML5 <canvas> API, featuring floating nodes that calculate proximity to draw connecting vectors in real-time.
• Cinematic Slide Engine: A vanilla JavaScript timeline that handles sequential slide rendering with precise timing and automatic progression.
• Sci-Fi HUD Overlays: - Real-time session clock and "energy bar" progress indicators.
  • SVG-based circular countdown timers synchronized with slide durations.
  • CRT-style scanline overlays and corner-bracket targeting UI.
• Advanced CSS Animations: Utilizes @keyframes for glitch text effects, pulsing rings, fluid clip-path reveals, and smooth typography fades.
• Custom Interactive Cursor: Replaces the default OS cursor with a screen-blended targeting dot and trailing ring for an immersive user feel.
• AI Tooling: Google Gemini (used for code generation, logic refinement, and debugging).

🗂 Project Structure

Because this is a highly optimized, single-load experience, the core logic is contained within a unified structure:

elevatex-trailer/
├── index.html        # Core structure, CSS styles, and JS logic
├── README.md         # Project documentation