MacBook 3D Landing Page

An Apple-inspired 3D landing page built with React and React Three Fiber, featuring a scroll-driven MacBook screen hinge animation and dynamic material customization.

🚀 Live Demo: https://mac-landing-page.netlify.app/

Features

• Scroll-based MacBook lid animation
• Direct GLTF mesh manipulation
• Runtime material & texture updates
• HDR environment lighting
• Preserved model orientation (manual tuning)

Tech Stack

React • Three.js • @react-three/fiber • @react-three/drei • WebGL

How it Works

• The GLTF model is traversed to access individual meshes
• The screen hinge is animated based on scroll offset
• Materials are modified at runtime without re-exporting the model
• Imperative Three.js mutations are used for accurate frame-based animation