🎵 SAAZ 2026 — IIT Bhilai Cultural Festival Website
live website link :- https://saaz-iitbh.vercel.app/
A modern, immersive festival website built entirely using HTML, CSS, and JavaScript, featuring interactive musical experiences, custom animations, 3D visuals, and creative tools.
Originally developed under a static-hosting constraint where the deployment environment was expected to host on college domain which support only traditional HTML/CSS/JavaScript websites. The goal was to push the limits of what could be achieved without React, Next.js, or any frontend framework while maintaining high performance and compatibility.
✨ Features 🎹 Interactive Piano Real-time note playback Hover-based note detection Dynamic key animations Particle effects on interaction Custom cursor glow integration 🎵 Musical Cursor Trail Animated music notes follow the cursor Multiple note variations (♪ ♫ ♬ ♩) Smooth fade-out animations Theme-aware styling 🔦 Premium Cursor Effects Custom cursor dot and ring Interactive hover states Galaxy-style spotlight reveal Dynamic cursor scaling on interactive elements 🌌 Galaxy Reveal Background Cursor-controlled spotlight effect Hidden gradient wallpaper revealed on hover Theme-specific visual treatment Smooth motion and transitions ⚡ Three.js Hero Experience Animated 3D scene Floating rings Particle system Mouse-reactive camera movement Dynamic lighting effects 🎚️ Audio Visualizer Animated equalizer bars Music-inspired motion design Hero section integration 🛣️ Scroll-Driven SVG Journey Path Custom SVG path spanning the website Progressive reveal while scrolling Connects sections visually Theme-aware appearance 🎨 Advanced Scribble Pad
A fully featured drawing experience including:
Pen Tool Brush Tool Spray Tool Eraser Tool Color Presets Custom Color Picker Adjustable Brush Size Opacity Controls Undo Functionality Clear Canvas Save Artwork as PNG 🎭 Event Explorer Interactive event cards Category-based filtering Smooth transitions Responsive layouts 📊 Animated Statistics Scroll-triggered counters Smooth number animations Interactive presentation 🌗 Dark & Light Themes One-click theme switching Persistent user preferences Custom styling for both themes Local storage support ✨ Scroll Reveal Animations Section-by-section entrance animations Staggered reveals Smooth transitions Storytelling-focused motion 📱 Fully Responsive Design Mobile optimized Tablet support Desktop-first visual experience Adaptive layouts 🛠️ Tech Stack Frontend HTML5 CSS3 Vanilla JavaScript Graphics & Animation Three.js SVG Animations Canvas API CSS Animations Audio Web Audio API Storage Browser Local Storage 🎯 Why Vanilla HTML, CSS & JavaScript?
The project was intentionally developed without frontend frameworks.
The initial deployment environment was expected to support static hosting only, so the entire website was engineered using pure web technologies while still delivering modern interactions and premium visual effects.
Benefits of this approach:
Zero framework dependencies Lightweight architecture Fast loading times Easy deployment High compatibility Better understanding of core web technologies 🚀 Highlights 🎵 Interactive Musical Experiences 🌌 Galaxy Cursor Reveal Effect 🎹 Playable Piano 🎨 Creative Scribble Pad ⚡ Three.js Powered Hero Section 🛣️ Scroll-Animated SVG Journey Path 🎭 Event Discovery System 📊 Animated Statistics 🌗 Dark & Light Themes 📱 Fully Responsive Design ✨ Premium Motion Design 🚫 No Frontend Frameworks
🏆 Goal
SAAZ 2026 aims to provide a memorable digital festival experience by combining music, interaction, motion design, and creativity into a single immersive web platform.