3D Landing Page for Apple iPhone

A React landing page template that renders an Apple iPhone 14 in 3D with Three.js and animates the page on scroll using GSAP ScrollTrigger, shipping with a live demo and a companion tutorial video.

What is the 3D Landing Page for Apple iPhone?

The 3D Landing Page for Apple iPhone is a single-page React website template that displays an interactive 3D model of an iPhone and animates sections as the visitor scrolls. It takes a Three.js iPhone model (an "Apple iPhone 13 Pro Max" asset by DatSketch under a Creative Commons Attribution license) plus section content, and outputs a desktop-and-mobile landing page built in React. It was created by codebucks27 and is published on GitHub with a live Vercel demo at apple-iphone14.vercel.app. A starter-code repository and a YouTube tutorial are linked from the README for anyone who wants to build it step by step.

What makes this template stand out?

• Three.js 3D rendering — the hero renders an iPhone model in the browser using @react-three/fiber and @react-three/drei, with Three.js as an explicit dependency.
• GSAP scroll animations — page transitions and section reveals are driven by GSAP 3 with ScrollTrigger.
• styled-components styling — component-scoped CSS via styled-components 6 rather than a utility-class framework.
• Full landing-page sections — screenshots in the repo show a hero section, a quote section, a color-option section and a pricing section, each with mobile variants.
• Loading screen — an Apple logo icon is used on the page loading screen, and three stock Pixabay videos are included as background media.
• Bun + Vite tooling — the original Create React App setup has been migrated to Bun 1.4.2 and Vite 8 with React 19, Fiber 9, Drei 10 and web-vitals 6; Vitest replaces the CRA test runner.
• Quality gates — scripts for bun run lint (ESLint 9), bun run typecheck (TypeScript 6), bun run test, bun run build and bun run preview are provided.

Who is it for?

• React developers learning 3D on the web: follow the linked YouTube tutorial to wire @react-three/fiber and GSAP together on a real page.
• Front-end developers building product launch pages: adapt the hero, color and pricing sections into a device or hardware marketing page.
• Students of scroll animation: study a working ScrollTrigger setup where 3D model state and page sections stay in sync.

What can you do with the 3D Landing Page for Apple iPhone?

• Product marketers: reuse the hero, color-swatch and pricing sections as the skeleton for a phone or gadget launch page.
• React learners: start from the separate starter-code repository and build up to the finished landing page alongside the video tutorial.
• Template customizers: swap the iPhone GLB model and the Pixabay background videos for your own assets while keeping the GSAP scroll structure.

How does the 3D Landing Page for Apple iPhone work?

Install dependencies with the pinned Bun version (bun install --frozen-lockfile), then run bun run start to serve the dev build on port 3000. Production builds go to build/ via bun run build, and Vite keeps the CRA REACT_APP_*, NODE_ENV and PUBLIC_URL compatibility along with the SPA history fallback. The README notes the unchanged scaffold test still expects a missing "learn react" link, and the new lint and typecheck gates surface inherited gaps.