🎨 Zajno Clone - Digital Studio Website 🌐

Welcome to the Zajno Clone project! This is a clone of the Zajno website, a creative digital studio that showcases stunning projects with interactive 3D animations, GLSL shaders, and smooth scroll effects. 🚀

Explore the beauty of creative animations and modern web design with Three.js, GSAP, and Locomotive Scroll.

🌟 Features

• 📱 Responsive Design: Optimized for all screen sizes.
• 🖼️ Interactive 3D Animation with Three.js.
• ✨ GLSL Shaders: Stunning visual effects for images.
• 🎢 Smooth Scrolling with Locomotive Scroll.
• 🖱️ Hover Effects powered by GSAP.
• 🎨 Modern, sleek, and clean user interface.

🚀 Technologies Used

• HTML5: Structure and content.
• CSS3: Styling and layout.
• JavaScript: Core functionality and animations.
• Three.js: 🎮 3D rendering and animations.
• GSAP: ⚡ Smooth and efficient animations.
• GLSL Shaders: ✨ Custom vertex and fragment shaders for cool effects.
• Locomotive Scroll: 🧑‍💻 Smooth scrolling library.
• Tailwind CSS: 🧹 Utility-first CSS framework for fast styling.
• Font Awesome: 💎 Icon library for better UI.

📸 Screenshots

Here are some beautiful snapshots of the project! 🌈

![Screenshot 1]

Interactive hover effect on images!

![Screenshot 2]

Creative 3D scene with smooth transitions!

🛠️ Installation

1. Clone the repository to your local machine:

   git clone https://github.com/anshulkotwal/zajno-clone.git

2. Navigate to the project directory:

   cd zajno-clone

3. Open the index.html file in your browser to view the project.

4. To install the dependencies, run:

   npm install

5. To start the development server:

   npm start

⚙️ How It Works

• Three.js creates a dynamic 3D scene with a camera, lighting, and custom shaders for unique visual effects.
• Custom vertex and fragment shaders (written in GLSL) allow real-time texture manipulations and beautiful hover effects on images.
• Locomotive Scroll provides smooth scrolling throughout the page for an immersive experience.
• GSAP animates hover interactions and mouse movements with smooth transitions.
• The 3D scene is rendered to a canvas, and elements adjust dynamically on window resize.

🔑 Key Components:

• Three.js Scene: The heart of the project, handling 3D rendering and animations.
• GLSL Shaders: Stunning visual effects for textures and mouse interactions.
• Mouse Interaction: Hover over images to trigger real-time animations.
• Smooth Scrolling: Implemented using Locomotive Scroll for seamless page navigation.

🧑‍🎨 Credits

• Zajno: The original inspiration behind this project (Zajno).
• Three.js: A JavaScript library for 3D graphics (Three.js).
• GSAP: A powerful animation library (GSAP).
• Locomotive Scroll: A smooth scrolling library (Locomotive Scroll).
• Tailwind CSS: Utility-first CSS framework (Tailwind CSS).
• Font Awesome: Icon library (Font Awesome).

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

🔧 Made with ❤️ by [Anshul-Kotwal]
If you like this project, feel free to ⭐ star it and share it with others! @[email protected]