Cinematic MacBook Launch — Next.js Template
An immersive, high-performance product landing page featuring interactive 3D model configuration (Space Gray & Silver, 14" & 16" scaling), scroll-driven masked video zoom highlights, performance metric grids, and dynamic video texture mapping.
Next.js
TypeScript
Tailwind CSS v4GSAP@gsap/reactThree.jsReact Three FiberZustand4 pages included
Get started
Run it on your machine
Download the template, install dependencies, and have a fully working Next.js app running locally in under 2 minutes.
Download ZIP
Purchase the template to get the full source ZIP
↓Install deps
Open a terminal in the project folder and run the install command
Start dev server
Spin up the local development server with hot reload
Open browser
Visit the local URL and start customising the template
$ npx create-next-app@latest my-app
$ # copy template files into my-app/src/
$ cd my-app
$ npm install framer-motion lucide-react @studio-freight/lenis
$ npm run dev
→ Ready on http://localhost:3000
Requires Node.js 18+ and npm 9+. Stack: Next.js, TypeScript, Tailwind CSS v4, GSAP, @gsap/react, Three.js, React Three Fiber, Zustand.
What's included
Everything you need to ship
Custom Apple-style header navigation with blur and hover state translations
Production-ready and fully customisable out of the box.
Smooth video playback playbackRate speed acceleration in Hero view
Production-ready and fully customisable out of the box.
Fully interactive 3D MacBook Pro configurator with real-time model swapping
Production-ready and fully customisable out of the box.
Zustand state integration for dynamic color selection (Silver / Space Gray)
Production-ready and fully customisable out of the box.
Zustand state integration for interactive size configurations (14 inch / 16 inch)
Production-ready and fully customisable out of the box.
High-performance GSAP ScrollTrigger timeline animations throughout
Production-ready and fully customisable out of the box.
Perspective screen video texture mapping dynamically updating on group rotations
Production-ready and fully customisable out of the box.
Custom responsive grid layouts and robust mobile/tablet layout support
Production-ready and fully customisable out of the box.
Included sections
Ready to ship with Cinematic MacBook Launch?
One-time payment. Instant download. Everything you need to go from idea to production.