WebGL Mirror Distortion 🪞✨

WebGL Mirror Distortion is a creative visual experiment that simulates a dynamic mirror-like surface using WebGL and GLSL shaders. The project creates smooth distortion, ripple, and reflection effects that run in real time inside the browser. This project is ideal for learning shader programming, creative coding, and advanced WebGL effects.

🚀 Live Demo

https://anujbhatia7471.github.io/advanced-hover-interactions/

🎯 Features

• Real-time mirror distortion effect
• Smooth animated ripple and wave patterns
• Fragment shader–based rendering
• High-performance GPU rendering via WebGL
• Responsive canvas (works on desktop & mobile)
• Clean and minimal code structure

🛠️ Tech Stack

• WebGL
• GLSL (Vertex & Fragment Shaders)
• JavaScript
• HTML5 Canvas
• CSS

🧠 How It Works

• A full-screen WebGL canvas is created.
• The vertex shader handles geometry positioning.
• The fragment shader applies:
  • UV distortion
  • Time-based sine waves
  • Reflection-style warping
• Uniforms like time and resolution are updated on every frame to animate the distortion effect.

📦 Installation & Usage

1️⃣ Clone the repository

git clone https://github.com/AnujBhatia7471/advanced-hover-interactions.git 2️⃣ Open the project Simply open index.html in a modern browser (Chrome, Edge, Firefox).

⚠️ For local shader loading, use a local server: npx serve 📱 Compatibility ✔ Desktop browsers ✔ Mobile browsers ✔ Touch devices (auto-adapted) ❌ Very old browsers without WebGL support

✨ Customization Ideas Add mouse or touch interaction Adjust distortion intensity Apply image or video textures Combine with post-processing effects Convert into a portfolio background animation

📸 Preview

📄 License This project is licensed under the MIT License. Feel free to use, modify, and distribute.

🤝 Contributing Contributions are welcome! Feel free to open issues or submit pull requests.

🙌 Credits Created by Anuj Bhatia Inspired by creative WebGL and shader experiments. ⭐ If you like this project, consider giving it a star!