Apple Mabook Website

📋 Table of Contents

1. ✨ Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start

✨ Introduction

Apple-style 3D website built with React, Three.js, GSAP, and TailwindCSS! Showcase products in immersive 3D scenes, scroll-animated models, and pinned sections. Featuring responsive design, smooth timeline animations, and visually striking image transitions—perfect for developers creating interactive, modern web experiences.

⚙️ Tech Stack

• CodeRabbit is an AI-powered code review tool that integrates with IDEs like VS Code and Git platforms such as GitHub and GitLab. It provides real-time, context-aware feedback on pull requests, including line-by-line analysis, security vulnerability detection, and adherence to coding standards. CodeRabbit learns from your team's preferences, adapting its reviews over time to enhance code quality and developer productivity.

• GSAP is a powerful JavaScript animation library used in this project to create dynamic, scroll-driven visuals. Features include SplitText animations for bold text reveals, ScrollTrigger for timeline control, parallax scrolling, pinned sections, scroll-synced video playback, seamless multi-section timelines, image masking effects, and a fully custom animated carousel.

• React is a declarative JavaScript library for building interactive UIs. It provides the component structure for modular development, allowing smooth integration of GSAP animations, reusable logic for scroll behavior, and support for responsive layout and state-driven UI features like carousels and video sections.

• Tailwind CSS is a utility-first CSS framework that allows developers to design custom user interfaces by applying low-level utility classes directly in HTML, streamlining the design process.

• Three.js is a powerful JavaScript 3D library used in this project to render interactive 3D graphics in the browser. Features include WebGL-based rendering, support for cameras, lights, and materials, 3D model importing, geometry and texture manipulation, scene graph management, animation capabilities, raycasting for interactivity, and integration with physics and post-processing effects for immersive experiences.

• Vite is a lightning-fast build tool and development server that powers this project’s workflow. It enables instant hot module replacement, fast startup, and optimized production builds—ideal for an animation-heavy React site with smooth, real-time development feedback and minimal config.

• Zustand is a lightweight and flexible state management library for React. In this project, it’s used to manage global state efficiently, enabling reactive updates with minimal boilerplate. Features include simple store creation, easy state slicing, middleware support for logging and persistence, seamless integration with React components, and performant state updates without unnecessary re-renders.

🔋 Features

👉 3D Product Scene with Realistic Lighting System: Showcase products in lifelike 3D environments for maximum visual impact.

👉 Animate 3D Model on Scroll: Create immersive interactions by animating 3D models based on user scroll position.

👉 ScrollTrigger Effects: Power scroll-based animations and timeline control with GSAP’s ScrollTrigger.

👉 Pinned Sections: Lock sections in view while animating content for engaging scroll experiences.

👉 Image Masking Effects: Use scroll-triggered pins and masks for visually striking image transitions.

👉 Seamless Timeline Animations: Craft smooth animation timelines that span across multiple sections.

👉 Responsive Design: Ensure fluid UI and adaptive GSAP animations across all screen sizes.

And many more, including code architecture and reusability.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/Varni1512/Macbook.git
cd Macbook

Installation

Install the project dependencies using npm:

npm install

Running the Project

npm run dev

Open http://localhost:5173 in your browser to view the project.

🔗 Connection

If you enjoyed this project or found it useful, feel free to connect with me and explore more of my work.

• 💼 LinkedIn: Connect on LinkedIn
• 💻 GitHub: View my GitHub profile
• 📧 Email: varni1505@gmail.com

I’m open to discussions around frontend development, creative animations, 3D web experiences, and modern UI engineering.

---

⭐ Support

If this project helped you, please consider:

• Giving it a ⭐ on GitHub
• Forking the repository
• Sharing it with the developer community

Your support is greatly appreciated 🚀