{"id":20709512,"url":"https://github.com/shahdinsalman23/react-macbookpro","last_synced_at":"2026-04-11T03:03:45.764Z","repository":{"id":263180838,"uuid":"889598314","full_name":"shahdinsalman23/react-macbookpro","owner":"shahdinsalman23","description":"Interactive 3D web animation using React Three Fiber and Tailwind CSS, featuring a fully animated Apple MacBook Pro with scroll and zoom functionality.","archived":false,"fork":false,"pushed_at":"2025-08-11T09:28:41.000Z","size":381,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T14:36:41.611Z","etag":null,"topics":["3dmodals","react-fiber","react-three-drei","reactjs","tailwindcss","threejs","vite"],"latest_commit_sha":null,"homepage":"https://react-macbookpro-shahdin.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shahdinsalman23.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-16T18:25:55.000Z","updated_at":"2025-09-09T23:11:04.000Z","dependencies_parsed_at":"2024-11-16T19:41:26.306Z","dependency_job_id":null,"html_url":"https://github.com/shahdinsalman23/react-macbookpro","commit_stats":null,"previous_names":["shahdinsalman23/react-macbookpro"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shahdinsalman23/react-macbookpro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahdinsalman23%2Freact-macbookpro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahdinsalman23%2Freact-macbookpro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahdinsalman23%2Freact-macbookpro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahdinsalman23%2Freact-macbookpro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shahdinsalman23","download_url":"https://codeload.github.com/shahdinsalman23/react-macbookpro/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahdinsalman23%2Freact-macbookpro/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31667034,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3dmodals","react-fiber","react-three-drei","reactjs","tailwindcss","threejs","vite"],"created_at":"2024-11-17T02:06:41.098Z","updated_at":"2026-04-11T03:03:45.741Z","avatar_url":"https://github.com/shahdinsalman23.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Apple MacBook Pro Animation Project 💻 \n\nAn immersive 3D interactive experience showcasing the Apple MacBook Pro using **React Three Fiber** and **Tailwind CSS**. This project highlights a stunning animation of the MacBook Pro with a scroll-based rotation effect, custom textures, and a responsive interface inspired by Apple's elegant design.\n\n---\n\n## 🌟 Features\n\n- **3D Model Rendering**: The MacBook Pro is rendered using `@react-three/drei` and `@react-three/fiber`.\n- **Scroll-based Animation**: Smooth and interactive screen rotation tied to the user's scroll actions.\n- **Custom Material Textures**: Applied realistic textures to specific model parts for enhanced visuals.\n- **Responsive Design**: Navbar and content styled with Tailwind CSS for seamless adaptability across devices.\n- **Real-time Controls**: Integrated with `OrbitControls` for additional model interaction.\n- **Dynamic Environment**: HDRI environment lighting for realism using Polyhaven assets.\n\n---\n\n## 🛠️ Technologies Used\n\n- **React.js**: Frontend framework for building the application.\n- **React Three Fiber**: A React renderer for Three.js for creating 3D scenes.\n- **Tailwind CSS**: Utility-first CSS framework for styling.\n- **Three.js**: 3D rendering library used under the hood.\n- **@react-three/drei**: Helper library for Three.js with premade abstractions.\n- **React Icons**: For adding Apple-inspired icons.\n\n---\n\n## 📂 Project Structure\n\n```plaintext\n.\n├── public/\n│   ├── mac.glb          # 3D model of the MacBook Pro\n│   ├── red.jpg          # Custom texture for the screen or matte surface\n├── src/\n│   ├── components/\n│   │   ├── MacContainer.js # 3D model rendering and animation logic\n│   ├── App.js             # Main app entry point\n│   ├── style.css          # Custom Tailwind styles\n├── tailwind.config.js    # Tailwind CSS configuration\n├── README.md             # Project documentation\n\n```\n\n\n## 🎮 Usage\n\n- **Scroll**: Use the mouse wheel or scroll gesture to rotate the MacBook screen.\n- **Zoom/Rotate**: Use OrbitControls to explore the 3D model.\n- **Navbar**: Interact with the Apple-inspired navbar for UI navigation (static links).\n\n\n## 🛠️ Customization\n\n### Updating the 3D Model\nReplace `mac.glb` in the `public/` directory with your own `.glb` file.\n\n### Changing the Texture\nUpdate the `red.jpg` file in the `public/` directory with your preferred texture.\n\n\n\n## 🌐 Resources\n\n- [React Three Fiber Documentation](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs)\n- [Polyhaven HDRIs](https://polyhaven.com/)\n\n\n\n## 🤝 Contributing\n\nContributions are welcome! Feel free to open a pull request or raise an issue for suggestions or bugs.\n\n\n\n## 📜 License\n\nThis project is licensed under the MIT License. See the `LICENSE` file for details.\n\n\n\n## 🧑‍💻 Author\n\n**Shahdin Salman**  \n[GitHub](https://github.com/shahdinsalman23) | [LinkedIn](https://www.linkedin.com/in/shahdinsalman)\n\n\n\n## ⭐ Acknowledgements\n\n- 3D model inspired by [Apple MacBook Pro](https://www.apple.com/macbook-pro/).\n- HDRI lighting by [Polyhaven](https://polyhaven.com/).\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahdinsalman23%2Freact-macbookpro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshahdinsalman23%2Freact-macbookpro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahdinsalman23%2Freact-macbookpro/lists"}