🍎 MacBook GSAP 3D Experience

An immersive, production-ready MacBook product showcase
Featuring interactive 3D models, cinematic animations, and Apple-inspired design excellence

Live Demo • Features • Installation • Documentation • Contributing

🌟 Live Demo

📋 Table of Contents

Overview
Features
Tech Stack
Architecture
Installation
Project Structure
Core Components
State Management
3D Models & Assets
Animation System
Performance Optimization
Customization
Troubleshooting
Best Practices
Deployment
Browser Support
Contributing
License
Changelog

🎯 Overview

MacBook GSAP 3D Experience is a cutting-edge web application that recreates the premium feel of Apple's product pages. Built with modern web technologies, this project demonstrates advanced techniques in 3D rendering, animation, and interactive design.

Why This Project?

🎓 Educational: Perfect for learning React Three Fiber, GSAP, and 3D web development
💼 Portfolio-Ready: Showcase your skills with a production-quality project
🔧 Extensible: Clean architecture makes it easy to add features or adapt for other products
🚀 Performance-First: Optimized for smooth 60fps animations across devices

Use Cases

E-commerce product showcases
Portfolio websites for designers/developers
Marketing campaigns and landing pages
Interactive product configurators
Educational demonstrations of 3D web tech

✨ Features

🎨 Visual & Design ✅ Pixel-perfect Apple-inspired UI ✅ Smooth micro-interactions ✅ Custom typography (SF Pro) ✅ Dark mode support ✅ Glass morphism effects ✅ Responsive grid layouts	🖥️ 3D Experience ✅ High-quality GLB models ✅ Real-time model switching ✅ Studio-grade lighting ✅ Material customization ✅ Dynamic shadows ✅ Reflection mapping
🎬 Animations ✅ GSAP ScrollTrigger integration ✅ Parallax scrolling effects ✅ Stagger animations ✅ Page transitions ✅ Easing customization ✅ Timeline orchestration	⚡ Performance ✅ Code splitting ✅ Lazy loading assets ✅ Optimized textures ✅ FPS monitoring ✅ Memory management ✅ Progressive enhancement
📱 Responsive ✅ Mobile-first approach ✅ Touch gestures ✅ Adaptive layouts ✅ Performance scaling ✅ Cross-browser tested ✅ Tablet optimization	🔧 Developer Experience ✅ TypeScript ready ✅ Hot Module Replacement ✅ ESLint + Prettier ✅ Component documentation ✅ Debugging tools ✅ Clear code comments

🛠️ Tech Stack

Frontend Framework

React 18.2.0+          → UI library with concurrent features
React DOM 18.2.0+      → React renderer for web

Build Tools

Vite 5.0+              → Next-gen build tool (ES modules, HMR)
@vitejs/plugin-react   → Official React plugin for Vite

3D Graphics

Three.js ^0.160.0      → WebGL 3D library
@react-three/fiber     → React renderer for Three.js
@react-three/drei      → Useful helpers (OrbitControls, useGLTF, etc.)
@react-three/postprocessing → Post-processing effects

Animation

GSAP 3.12+             → Professional animation library
gsap/ScrollTrigger     → Scroll-based animations
gsap/ScrollSmoother    → Smooth scrolling (optional)

State Management

Zustand 4.4+           → Lightweight state management

Utilities

clsx                   → Conditional className utility
react-responsive       → Media query hooks
leva                   → GUI controls for debugging (dev only)

Development

ESLint                 → JavaScript linting
Prettier               → Code formatting
Husky                  → Git hooks
lint-staged            → Run linters on staged files

🏗️ Architecture

Component Hierarchy

App
├── Navbar
├── Showcase (Hero Section)
│   └── ProductViewer
│       ├── Canvas (R3F)
│       │   ├── StudioLights
│       │   ├── ModelSwitcher
│       │   │   ├── Macbook14
│       │   │   └── Macbook16
│       │   ├── Environment
│       │   └── Effects
│       └── Controls (OrbitControls)
├── Features (Scroll Section)
│   ├── FeatureCard (x4)
│   └── ScrollAnimation
├── Highlights
│   ├── VideoCarousel
│   └── SpecList
├── Performance
│   ├── ChipAnimation
│   └── BenchmarkChart
└── Footer

Data Flow

graph TD
    A[User Interaction] --> B[Zustand Store]
    B --> C[React Components]
    B --> D[3D Scene]
    C --> E[UI Updates]
    D --> F[Model Updates]
    E --> G[GSAP Animations]
    F --> G
    G --> H[Rendered Output]

File Organization Strategy

📦 Atomic Design Pattern
├── 🔹 Atoms (Buttons, Inputs)
├── 🔸 Molecules (Cards, NavItems)
├── 🔶 Organisms (Navbar, ProductViewer)
├── 📄 Templates (PageLayout)
└── 📱 Pages (App.jsx)

📁 Project Structure

macbook-gsap-app/
│
├── 📂 public/                          # Static assets (served as-is)
│   ├── 📂 models/                      # 3D models
│   │   ├── macbook.glb                 # Base MacBook model
│   │   ├── macbook-14.glb              # 14-inch variant
│   │   └── macbook-16.glb              # 16-inch variant
│   ├── 📂 fonts/                       # Web fonts
│   │   ├── SF-Pro-Display-Regular.woff2
│   │   └── SF-Pro-Display-Bold.woff2
│   ├── 📂 videos/                      # Video textures
│   │   ├── hero.mp4
│   │   └── features/
│   ├── 📂 textures/                    # Image textures
│   │   ├── env-map.hdr
│   │   └── matcap.png
│   └── favicon.svg
│
├── 📂 src/
│   ├── 📂 assets/                      # Imported assets
│   │   ├── 📂 images/
│   │   │   ├── hero-bg.jpg
│   │   │   └── chip-m3.png
│   │   └── 📂 icons/
│   │       └── apple-logo.svg
│   │
│   ├── 📂 components/
│   │   ├── 📂 models/                  # 3D Model Components
│   │   │   ├── Macbook.jsx             # Generic MacBook wrapper
│   │   │   ├── Macbook14.jsx           # 14" model component
│   │   │   ├── Macbook16.jsx           # 16" model component
│   │   │   └── index.js                # Barrel exports
│   │   │
│   │   ├── 📂 three/                   # Three.js Components
│   │   │   ├── ModelSwitcher.jsx       # Handles model transitions
│   │   │   ├── StudioLights.jsx        # Lighting setup
│   │   │   ├── ProductViewer.jsx       # Main 3D canvas
│   │   │   ├── Environment.jsx         # HDR environment
│   │   │   ├── Effects.jsx             # Post-processing
│   │   │   └── CameraController.jsx    # Camera animations
│   │   │
│   │   ├── 📂 sections/                # Page Sections
│   │   │   ├── Showcase.jsx            # Hero section
│   │   │   ├── Features.jsx            # Scrolling features
│   │   │   ├── Highlights.jsx          # Video highlights
│   │   │   ├── Performance.jsx         # Specs & benchmarks
│   │   │   └── Compare.jsx             # Model comparison
│   │   │
│   │   ├── 📂 ui/                      # Reusable UI Components
│   │   │   ├── Button.jsx
│   │   │   ├── Card.jsx
│   │   │   ├── Loader.jsx
│   │   │   ├── VideoCarousel.jsx
│   │   │   └── index.js
│   │   │
│   │   ├── Navbar.jsx                  # Navigation header
│   │   └── Footer.jsx                  # Footer component
│   │
│   ├── 📂 hooks/                       # Custom React Hooks
│   │   ├── useMediaQuery.js            # Responsive breakpoints
│   │   ├── useScrollAnimation.js       # GSAP scroll helpers
│   │   ├── useModelLoader.js           # GLB loading with progress
│   │   └── usePerformanceMonitor.js    # FPS tracking
│   │
│   ├── 📂 store/                       # State Management
│   │   ├── index.js                    # Zustand store
│   │   └── slices/                     # Store slices
│   │       ├── modelSlice.js
│   │       └── uiSlice.js
│   │
│   ├── 📂 constants/                   # App Constants
│   │   ├── index.js                    # Main constants
│   │   ├── colors.js                   # Color palette
│   │   ├── sizes.js                    # MacBook sizes
│   │   └── animations.js               # Animation configs
│   │
│   ├── 📂 utils/                       # Utility Functions
│   │   ├── performanceOptimizations.js
│   │   ├── textureLoader.js
│   │   └── analytics.js
│   │
│   ├── 📂 styles/                      # Global Styles
│   │   ├── index.css                   # Main stylesheet
│   │   ├── reset.css                   # CSS reset
│   │   └── variables.css               # CSS variables
│   │
│   ├── App.jsx                         # Root component
│   ├── main.jsx                        # Entry point
│   └── vite-env.d.ts                   # Vite types
│
├── 📂 docs/                            # Documentation
│   ├── API.md                          # Component API docs
│   ├── ANIMATIONS.md                   # Animation guide
│   └── DEPLOYMENT.md                   # Deployment guide
│
├── 📂 scripts/                         # Build scripts
│   ├── optimize-models.js              # GLB optimization
│   └── generate-thumbnails.js          # Video thumbnails
│
├── .eslintrc.cjs                       # ESLint config
├── .prettierrc                         # Prettier config
├── .gitignore
├── package.json
├── vite.config.js                      # Vite configuration
├── tailwind.config.js                  # Tailwind CSS config
└── README.md

📦 3D Models & Assets

Model Requirements

Format Specifications:

File Type: .glb (Binary GLTF)
Max File Size: 15MB (compressed)
Polygon Count: < 100K triangles
Texture Resolution: 2048x2048 (max)

Recommended Tools:

Blender - Free 3D modeling software
gltf-pipeline - Model optimization CLI
Draco - Mesh compression

Model Optimization Workflow

1. Export from Blender

File → Export → glTF 2.0 (.glb/.gltf)

Settings:
☑ Remember Export Settings
☑ Apply Modifiers
☑ Compression: Draco (level 10)
☑ Export: Visible Objects
☐ Export Cameras
☐ Export Lights

2. CLI Optimization

# Install gltf-pipeline
npm install -g gltf-pipeline

# Optimize model
gltf-pipeline -i macbook-raw.glb -o macbook.glb -d

# Check file size
ls -lh public/models/

3. Texture Optimization

# Install sharp (image processing)
npm install sharp

# Compress textures
node scripts/optimize-textures.js

🎬 Animation System

GSAP ScrollTrigger Patterns

1. Pin Section with Rotation

gsap.to(modelRef.current.rotation, {
  y: Math.PI * 2,
  scrollTrigger: {
    trigger: sectionRef.current,
    start: 'top top',
    end: 'bottom bottom',
    scrub: 1,
    pin: true,
    anticipatePin: 1
  }
});

🌐 Browser Support

Browser	Version	Support
Chrome	90+	✅ Full
Firefox	88+	✅ Full
Safari	14+	✅ Full
Edge	90+	✅ Full
Mobile Safari	iOS 14+	✅ Full
Chrome Android	Latest	✅ Full

Required Features:

WebGL 2.0
ES6 Modules
CSS Grid
CSS Custom Properties
IntersectionObserver API

🙏 Acknowledgments

Inspiration

Apple - Product page design excellence
awwwards - Creative web design showcase
Codrops - Innovative web experiments

3D Assets

MacBook Model: Jack Baeten on Sketchfab
HDR Maps: Poly Haven

Libraries & Tools

Three.js by Ricardo Cabello (Mr.doob)
GSAP by GreenSock
React Three Fiber by Poimandres
Zustand by Poimandres

Learning Resources

⭐ Show Your Support

If this project helped you, please consider:

⭐ Starring the repository
🐦 Sharing on Twitter
📝 Writing a blog post
💼 Using in your portfolio

_{Built with ❤️ and ☕ by Your Name}
_{⭐ Star this repo if you found it helpful!}

Back to Top ↑

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
public		public
src		src
.gitignore		.gitignore
Macbook-14.jsx		Macbook-14.jsx
Macbook-16.jsx		Macbook-16.jsx
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
macbook-14-transformed.glb		macbook-14-transformed.glb
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation

🍎 MacBook GSAP 3D Experience

🌟 Live Demo

📋 Table of Contents

🎯 Overview

Why This Project?

Use Cases

✨ Features

🎨 Visual & Design

🖥️ 3D Experience

🎬 Animations

⚡ Performance

📱 Responsive

🔧 Developer Experience

🛠️ Tech Stack

Frontend Framework

Build Tools

3D Graphics

Animation

State Management

Utilities

Development

🏗️ Architecture

Component Hierarchy

Data Flow

File Organization Strategy

📁 Project Structure

📦 3D Models & Assets

Model Requirements

Model Optimization Workflow

1. Export from Blender

2. CLI Optimization

3. Texture Optimization

🎬 Animation System

GSAP ScrollTrigger Patterns

1. Pin Section with Rotation

🌐 Browser Support

🙏 Acknowledgments

Inspiration

3D Assets

Libraries & Tools

Learning Resources

⭐ Show Your Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages