3D Web Experience
APPLE MACBOOK
ROLE
SOLO BUILD — EXPERIENCE ENGINEERING
TIMELINE
SHIPPED · v1.0.0
SCOPE
STACK
OVERVIEW
A faithful study of Apple's product-page language: an interactive MacBook scene with realistic lighting, masking transitions and buttery scroll-triggered sequences — engineered, not just animated.
Three.js renders the MacBook scene with realistic lighting models while GSAP drives scroll-triggered sequences, masking effects and transitions that mirror Apple's product storytelling. React 19 on Vite keeps iteration fast with HMR.
The repository runs like a production codebase: Husky pre-commit hooks with lint-staged, ESLint and Prettier enforcement, Vitest for testing, GitHub Actions workflows, and both dev and production Docker Compose setups with an Nginx config for self-hosted serving.
One of the most starred projects on my GitHub — a compact demonstration that frontend craft and infrastructure discipline belong in the same repo.
OUTCOMES
Recreating Apple's polish is the hardest UI bar there is — that's why it's worth doing.