TEDxCUSAT | Kaleidoscope

Welcome to the official landing page repository for TEDxCUSAT, featuring this year's theme: Kaleidoscope.

🌐 Live Demo

View Website

🌟 About the Project

This project is a modern, responsive single-page static website designed to capture the essence of shifting perspectives, brilliant ideas, and profound conversations. Built with beautiful aesthetics, smooth animations, and engaging micro-interactions, the landing page serves as the primary digital front door for the event.

🚀 Key Features

• Dynamic Kaleidoscope Hero Background: A custom CSS-driven, constantly morphing geometric background that mirrors the visual essence of a kaleidoscope.
• Ambient Glow & Glassmorphism: Utilizes an ambient multi-colored aura that floats seamlessly globally throughout the page, softly glowing beneath frosted "glass" panels (backdrop-filters).
• Live Event Countdown: A synchronized precision countdown timer leading up to the main event date (October 24, 2026), individually accented with our core theme colors (Magenta, Cyan, Yellow, Purple).
• Vintage Film Strip Gallery: An interactive auto-scrolling horizontal gallery mapped exactly like an old-school camera film strip, complete with transparent sprocket holes.
• Fully Responsive: Meticulously designed for a flawless viewing experience across all devices, from ultra-wide desktops to mobile phones.

🛠️ Technology Stack

This project was developed focusing on peak performance using pure, lightweight web technologies without heavy frameworks:

• HTML5: Pure semantic markup structure.
• Vanilla CSS3: Advanced modern CSS leveraging custom properties, Flexbox/Grid layouts, keyframe animations, CSS masking, and backdrop filters.
• Vanilla JavaScript: High-performance DOM manipulation, Intersection Observers for scroll animations, and precise interval logic for the countdown timer.

📂 Project Structure

TEDx CUSAT/
│
├── index.html        # The main HTML structure
├── style.css         # The design system and animations
├── script.js         # Interactivity, observers, and countdown
└── readme.md         # Documentation

🎨 Design System

The Kaleidoscope design language consists of an ultra-dark canvas pierced by four dominant vibrant gradients:

• 🟥 Magenta (#ff0055)
• 🟦 Cyan (#00f0ff)
• 🟨 Yellow (#ffcc00)
• 🟪 Purple (#7000ff)
• 🔴 TED Red (#e62b1e) - Accurately preserved for official branding and primary action elements.

---