https://github.com/shamirali55/buzzworld
An animated 3D experience featuring a buzzing bee using Three.js, GSAP, and a vibrant UI. Sections explore bee facts, environment, and interaction — bringing the world of bees to life.
https://github.com/shamirali55/buzzworld
3d-models glb gsap gsap-animation html-css-javascript three-js
Last synced: 14 days ago
JSON representation
An animated 3D experience featuring a buzzing bee using Three.js, GSAP, and a vibrant UI. Sections explore bee facts, environment, and interaction — bringing the world of bees to life.
- Host: GitHub
- URL: https://github.com/shamirali55/buzzworld
- Owner: ShamirAli55
- Created: 2025-07-28T17:26:24.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-07-28T17:47:45.000Z (10 months ago)
- Last Synced: 2025-07-28T19:29:42.386Z (10 months ago)
- Topics: 3d-models, glb, gsap, gsap-animation, html-css-javascript, three-js
- Language: JavaScript
- Homepage:
- Size: 7.07 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🐝 BuzzWorld
**BuzzWorld** is an immersive 3D interactive experience built using Three.js and GSAP. This project visualizes a buzzing bee in a stylized digital world with smooth animations, scroll effects, and custom assets.
---
## 📦 Folder Structure
```
BuzzWorld/
│
├── assets/
│ └── model/
│ └── scene.glb # Bee 3D model
│
├── node\_modules/
│
├── src/
│ ├── bee\_logo.png
│ ├── lily.png
│ ├── right\_flower.png
│ └── style.css
│
├── .gitignore
├── index.html # Main HTML entry
├── main.js # Main JavaScript + logic
├── package.json
├── package-lock.json
└── README.md
````
---
## 🎯 Features
- 🐝 Integrated GLB bee model using `GLTFLoader`
- 🌼 Animated flowers and logo
- ✨ Smooth transitions via [GSAP](https://greensock.com/gsap/)
- 🎨 Custom cursor, loader animation, and gradient text
- 🧭 Three major sections:
- **About the Bee**
- **Environment**
- **Content (Random Facts)**
---
## 🔧 Built With
- [Three.js](https://threejs.org/)
- [GSAP](https://greensock.com/)
- HTML5, CSS3, JavaScript (ES6)
- Local asset rendering (no CDN dependency)
---
## 📸 Screenshots
> Below are sample static visuals of the experience.
---
## 🚀 How to Run
1. Clone the repository:
```bash
git clone https://github.com/ShamirAli55/BuzzWorld.git
````
2. Install dependencies:
```bash
npm install
3. Run server
npm run dev
4. Open in browser:
http://localhost:5173
---
## 👨💻 Author
**Shamir Ali**
📧 Email: [shamirali9779@gmail.com](mailto:shamirali9779@gmail.com)
🔗 GitHub: [ShamirAli55](https://github.com/ShamirAli55)
---
## 📜 License
This project is licensed under the [MIT License](LICENSE).
---
---