ITZFIZZ — McLaren 720S Scroll Experience

A premium, scroll-driven product landing page built around the McLaren 720S — where scrolling drives a full car animation sequence instead of a static hero image.

Live Demo · Repo

---

Overview

ITZFIZZ is a cinematic landing page built for a frontend assignment, designed to show what's possible when scroll position becomes an animation timeline rather than just a trigger for fade-ins. As the user scrolls through the hero, the car accelerates, brakes, and settles across three animation phases — fully synced to scroll progress via GSAP ScrollTrigger and smoothed with Lenis.

Key Features

• Scroll-driven hero animation — a 3-phase car sequence (accelerate → brake → settle) mapped directly to scroll position, not scroll-triggered on/off states
• Buttery smooth scrolling via Lenis, wired into the GSAP ticker for frame-perfect sync
• Horizontal scroll storytelling — a 3-panel chapter section that tracks sideways as the user scrolls down
• Reactive typography — headline letters and stat counters shift and dim in response to the car's position on screen
• Custom SVG car illustration with headlight and glow animations
• Zero layout thrash — all animations use transform-only properties with will-change hints for consistent 60fps performance
• Fully responsive, frosted-glass navbar, infinite marquee tickers, and a complete page (features, about, testimonials, CTA, footer)

Tech Stack

Layer	Technology
Framework	Next.js 14 (App Router)
UI	React 18, Tailwind CSS 3
Animation	GSAP 3.12 + ScrollTrigger
Smooth Scroll	Lenis
Fonts	Inter (body), Bebas Neue (display)

Quick Start

npm install
npm run dev
# → http://localhost:3000

No backend, no environment variables — it's a static, client-rendered experience.

Prefer zero setup? Open standalone/index.html directly in any browser — no install required.

Page Sections

1. Navbar — fixed, transitions to frosted glass on scroll
2. Hero — the core scroll-driven car animation (500vh scroll distance)
3. Marquee — infinite spec ticker (720 BHP · 0–60 in 2.9s ...)
4. Features — 4-card performance spec grid
5. Horizontal Scroll — 3 chapters that slide across as the user scrolls down
6. About — brand story with a 4-stat grid
7. Testimonials — owner reviews with hover accents
8. CTA + Footer — full-bleed call-to-action and site footer

Animation Architecture

The hero animation runs as a GSAP timeline gated behind a scroll-linked ScrollTrigger (scrub: 1.8), broken into three phases:

• Phase 1 (0–35% scroll): car accelerates right, speed lines appear, headlights fade out
• Phase 2 (35–65% scroll): car decelerates left, headlights fade back in (braking)
• Phase 3 (65–100% scroll): car settles into its final resting position

Headline letters and stat counters run their own reactive timelines (scrub: 1.2 / 1.4), dimming and shifting in response to the car's position rather than on a fixed schedule. All GSAP contexts are properly cleaned up on unmount, and animations are dynamically imported to stay SSR-safe.

Using a Real Car Image

By default, the hero renders a custom SVG illustration. To swap in a photo:

1. Drop your image at /public/car.png
2. In src/sections/HeroSection.jsx, replace <CarSVG /> with:

import Image from 'next/image';

<Image
  src="/car.png"
  alt="McLaren 720S"
  width={710}
  height={290}
  priority
  style={{ width: '100%', display: 'block' }}
/>

Performance Notes

• Transform-only animations (no layout-triggering properties)
• gsap.ticker.lagSmoothing(0) for consistent frame timing under load
• Dynamic imports for GSAP + Lenis keep the initial bundle SSR-safe
• gsap.context() scoping ensures full animation cleanup on unmount