Bouncing DVD Logo - React + TypeScript + Vite

A fun recreation of the classic DVD logo bouncing screensaver using modern frontend tools:

• React + TypeScript
• Vite for fast development
• GSAP for smooth animation
• Canvas Confetti for celebratory effects

🎬 Features

• DVD logo that bounces around the screen

• Logo changes color on every bounce

• Corner hits trigger a confetti celebration 🎉

• Track:

  • Total bounces
  • Number of perfect corner hits

• Adjustable speed control (3 levels)

• Minimal UI mode toggle with an eye icon

• Fully responsive and performant

📹 Demo

🛠️ Tech Stack

• React + TypeScript
• Vite
• GSAP (gsap) for movement
• Canvas Confetti (canvas-confetti) for particle effects
• React Icons (react-icons) for UI buttons

🚀 Getting Started

# Clone the repo
npm install
npm run dev

🎮 Controls

• Slider at bottom center: Adjust speed of DVD logo (Slow / Medium / Fast)
• Eye icon (top right): Toggle visibility of counters and controls

📁 Project Structure

• DvdLogo.tsx: Main animation component
• App.tsx: Entry point
• index.css: Basic layout/styling

💡 Future Ideas (Optional)

• Add AI mode to target random corners
• Add sound or music for hits
• Pause/play toggle
• Theme switching (day/night)

📜 License

MIT - Have fun and remix!

---

Built by @NipunRathore | Inspired by the iconic DVD bouncing logo screensaver

💬 Connect with me

• LinkedIn: https://www.linkedin.com/in/nipunrathore/
• Instagram: https://www.instagram.com/nipunsinghrathore/