Skip to content

README.md

Latest commit

 

History

History
88 lines (64 loc) · 3.08 KB

README.md

File metadata and controls

88 lines (64 loc) · 3.08 KB

📘 Project Overview

MacBook Landing Page – a React‑based showcase that combines Three.js (via @react-three/fiber) and GSAP scroll animations.
The page displays a 3D MacBook model that rotates as the user scrolls, while feature boxes fade/slide in sync with the scroll timeline. It’s a learning sandbox for:

  • React + Three.js integration
  • GSAP + ScrollTrigger animations in a 3D scene
  • Responsive handling with react-responsive

🚀 Getting Started

Prerequisites

Tool Minimum version
Node.js 18.x
npm / yarn 8.x
React 18.x
Three.js 0.160.x
GSAP 3.12.x

Installation

# clone the repo
git clone https://github.com/your-username/macbook-landing-page.git
cd macbook-landing-page

# install dependencies
npm install   # or `yarn install`

Run locally

npm run dev   # Vite/Next/CRA dev server (depends on your setup)

Open http://localhost:3000 (or the port shown in the console) to view the landing page.

🛠️ Core Features

Feature Implementation
3D MacBook model Loaded with @react-three/fiber; responsive scaling via react-responsive.
Scroll‑driven rotation GSAP timeline + ScrollTrigger attached to #f-canvas.
Feature boxes Positioned absolutely over the canvas; animated via CSS/GSAP (extendable).
Video pre‑loading useEffect creates hidden <video> elements for each feature video to avoid lag.
Suspense fallback Shows a loading message while the GLTF model is being fetched.

📂 Project Structure (relevant files)

src/
├─ components/
│  ├─ Features.jsx          ← main page component (canvas + boxes)
│  ├─ ModelScroll.jsx       ← GSAP + Three.js logic
│  └─ models/
│     └─ Macbook.jsx        ← GLTF model loader
├─ three/
│  └─ StudioLights.jsx      ← HDRI / three‑point lighting setup
├─ store/
│  └─ macbookStore.js       ← Zustand (or similar) for texture state
└─ constants/
   ├─ features.js           ← feature text & video paths
   └─ featureSequence.js    ← ordered video data

🧩 Extending the Demo

  1. Add more GSAP timelines – e.g., fade‑in/out of feature boxes, camera moves, or material changes.
  2. Swap textures – use setTexture from the store to change the MacBook screen on scroll.
  3. Responsive tweaks – adjust scale and position based on breakpoints for tablets/phones.
  4. Deploy – host on Vercel, Netlify, or GitHub Pages (npm run build → dist/).

📄 License

This project is for learning purposes and is released under the MIT License. Feel free to fork, modify, and share!