https://github.com/g-mustafa1/3d-web-with-react

🌐 My3DStudio – Immersive 3D Websites | 🚀 React + Three.js + Tailwind CSS | 💻 Home, About, Services & Contact Pages | ⚡ Interactive 3D Animations, Product Demos & Configurators | ✨ Smooth UI & Responsive Design
https://github.com/g-mustafa1/3d-web-with-react

file-structure framer-motion lucide-react react react-components react-router-dom responsive-design tailwind-css three-js

Last synced: 3 months ago
JSON representation

🌐 My3DStudio – Immersive 3D Websites | 🚀 React + Three.js + Tailwind CSS | 💻 Home, About, Services & Contact Pages | ⚡ Interactive 3D Animations, Product Demos & Configurators | ✨ Smooth UI & Responsive Design

• Host: GitHub
• URL: https://github.com/g-mustafa1/3d-web-with-react
• Owner: G-Mustafa1
• Created: 2025-11-07T18:25:02.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2025-11-12T18:12:40.000Z (8 months ago)
• Last Synced: 2025-11-12T20:20:14.422Z (8 months ago)
• Topics: file-structure, framer-motion, lucide-react, react, react-components, react-router-dom, responsive-design, tailwind-css, three-js
• Language: JavaScript
• Homepage: https://3d-web-with-react.vercel.app
• Size: 8.5 MB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🌐 My3DStudio

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwind-css&logoColor=white)

![Three.js](https://img.shields.io/badge/Three.js-000000?style=for-the-badge&logo=three.js&logoColor=white)

![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)

---

## 🎬 Website Demo

![here-gif](https://github.com/user-attachments/assets/c4435426-83c4-4b05-8bae-8c45600db6b9)

> Interactive 3D Hero, About, Services, and Contact sections with smooth animations.

---

## 🔹 Project Overview

**My3DStudio** is a **modern 3D web studio website** built using **React, Three.js, Tailwind CSS, and Framer Motion**.  

It showcases **interactive 3D experiences** for brands, products, and services with performance-first design and smooth animations.

**Pages Included:**

- **Home Page:** Hero section with interactive 3D canvas, call-to-action buttons.  

- **About Page:** Company information with 3D visuals.  

- **Services Page:** Highlights immersive 3D services and solutions.  

- **Contact Page:** Hero section with animated contact form and scroll-to-contact feature.  

---

## ✨ Features

- 🎨 **Interactive 3D Canvas** using Three.js  

- ⚡ **Smooth Animations** with Framer Motion  

- 📱 **Responsive Design** with Tailwind CSS  

- 💬 **Animated Contact Form** with validation feedback  

- 🎥 **Hero Videos & Background Animations**  

- 🖱️ **Scroll-to-Section Support** (Book a Call → Contact Form)  

- ✨ **Hover Effects & Button Animations**  

---

## 🛠️ Tech Stack

| Technology | Purpose |

|------------|---------|

| React | Frontend framework |

| React Router | Page routing |

| Three.js | 3D interactive canvas |

| Framer Motion | Animations & transitions |

| Tailwind CSS | Styling & responsive design |

| Vite | Development & build tool |

---

## 📂 Screenshots

### Home Page - Hero Section



### About Section



### Services Section



### Contact Form



---

## ⚡ How to Run

```bash

# Navigate into the project

cd my3dstudio

# Install dependencies

npm install

# Start development server

npm run dev