Overview

A focused microsite for the Porsche 911 GT3 RS. Built as a scroll-driven showcase — Motion for sequencing, SVG masks for reveal, parallax for depth — with a layout that still holds on small screens. The brief was atmosphere and craft, not a CMS.

Problem

Car microsites often collapse into either a flat brochure or a WebGL flex that ignores readability. The challenge was cinematic pacing without sacrificing performance or mobile usability.

Goals

• Tell a short product story through scroll, not long copy
• Use motion as structure (section rhythm) rather than noise
• Keep the stack lean — no heavy canvas dependency for core effects
• Stay readable and tappable on phone-width viewports

Approach

Scroll-linked animation and section pinning set the pace. Each section earns its reveal; exits stay softer than enters so scrubbing never feels sticky.

SVG masking and layered composition create reveals without baking everything into video. Parallax adds depth while staying CSS/Motion-friendly.

Type, spacing, and motion distances scale across breakpoints so the same sequence doesn’t feel cramped or sparse.

Techniques

• Scroll-linked animation and section pinning
• SVG masking and layered composition
• Parallax depth without heavy canvas work
• Responsive type and spacing across breakpoints
• Reduced-motion fallbacks for accessibility

Outcome

A single-page experience that feels intentional on first scroll — brand atmosphere first, tech second. Useful as a motion and layout study as much as a product page.

Stack

Next.js, motion/react, Tailwind CSS.