1948
Porsche
0%
Est. 1948 · Stuttgart
Driven by
Greatness
Scroll to Explore
‘+g.year+’
Generation ‘+g.no+’
‘+g.year+’
‘+g.name+’
‘+g.tagline+’
‘+g.desc+’
‘+g.specs.map(s=>’
‘+s.l+’‘+s.v+’
‘).join(”)+’
Porsche Legacy — A Journey Through Generations
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
–bg: #080808;
–text: #ede8df;
–accent: #C9A96E;
–muted: rgba(237,232,223,0.38);
}
html { overflow-x: hidden; }
body {
background: var(–bg);
color: var(–text);
font-family: ‘Inter’, sans-serif;
overflow-x: hidden;
cursor: none;
}
#cursor {
position: fixed; width: 10px; height: 10px; background: var(–accent);
border-radius: 50%; pointer-events: none; z-index: 9999;
transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, background 0.3s;
mix-blend-mode: difference;
}
#cursor-ring {
position: fixed; width: 36px; height: 36px;
border: 1px solid rgba(201,169,110,0.5); border-radius: 50%;
pointer-events: none; z-index: 9998; transform: translate(-50%, -50%);
transition: width 0.4s, height 0.4s, opacity 0.3s;
}
#progress-bar {
position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 1000;
transform-origin: left; transform: scaleX(0); background: var(–accent);
transition: background 0.8s ease;
}
#nav-dots {
position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
z-index: 200; display: flex; flex-direction: column; gap: 12px;
}
.nav-dot {
width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.15);
cursor: pointer; transition: background 0.4s, transform 0.4s; position: relative;
}
.nav-dot::after {
content: attr(data-label); position: absolute; right: 18px; top: 50%;
transform: translateY(-50%); font-size: 10px; letter-spacing: 2px;
text-transform: uppercase; color: rgba(255,255,255,0.4); white-space: nowrap;
opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.nav-dot:hover::after { opacity: 1; }
.nav-dot.active { background: var(–accent); transform: scale(1.8); }
.nav-dot.active::after { opacity: 1; color: var(–accent); }
#year-strip {
position: fixed; left: 28px; bottom: 40px; z-index: 200;
writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
color: rgba(255,255,255,0.25); transition: color 0.5s;
}
#loader {
position: fixed; inset: 0; background: var(–bg); z-index: 9000;
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 28px;
}
.loader-wordmark {
font-family: ‘Cormorant Garamond’, serif; font-size: 28px; font-weight: 300;
letter-spacing: 14px; text-transform: uppercase; color: var(–text);
}
.loader-wordmark span { color: var(–accent); }
.loader-track { width: 220px; height: 1px; background: rgba(255,255,255,0.08); position: relative; overflow: hidden; }
.loader-fill { height: 100%; width: 0%; background: var(–accent); }
.loader-pct { font-size: 10px; letter-spacing: 3px; color: var(–muted); }
#hero {
height: 100vh; display: flex; flex-direction: column; align-items: center;
justify-content: center; position: relative; overflow: hidden;
}
#hero-bg {
position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(201,169,110,0.06) 0%, transparent 70%),
radial-gradient(ellipse 100% 50% at 50% 100%, rgba(10,10,10,0.8) 0%, transparent 60%);
}
#hero::before {
content: ”; position: absolute; inset: -50%;
background-image: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 256 256′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cfilter id=’noise’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.9′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23noise)’ opacity=’0.04’/%3E%3C/svg%3E”);
opacity: 0.35; pointer-events: none; animation: grainShift 8s steps(2) infinite;
}
@keyframes grainShift {
0% { transform: translate(0,0); } 25% { transform: translate(-3%,-3%); }
50% { transform: translate(3%,-3%); } 75% { transform: translate(-3%,3%); }
100% { transform: translate(3%,3%); }
}
.hero-eyebrow {
position: relative; font-size: 10px; letter-spacing: 6px; text-transform: uppercase;
color: var(–accent); opacity: 0; transform: translateY(16px); margin-bottom: 28px;
display: flex; align-items: center; gap: 16px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
content: ”; display: block; width: 32px; height: 1px;
background: var(–accent); opacity: 0.6;
}
.hero-title {
font-family: ‘Cormorant Garamond’, serif; font-size: clamp(64px, 11vw, 140px);
font-weight: 300; line-height: 0.88; text-align: center; letter-spacing: -3px;
opacity: 0; transform: translateY(24px);
}
.hero-title em { font-style: italic; color: var(–accent); font-weight: 300; }
.hero-meta {
margin-top: 36px; display: flex; align-items: center; gap: 24px;
opacity: 0; transform: translateY(12px);
}
.hero-meta-line { width: 1px; height: 32px; background: rgba(255,255,255,0.15); }
.hero-meta-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero-meta-val { font-size: 22px; font-family: ‘Cormorant Garamond’, serif; font-weight: 300; color: var(–text); }
.hero-meta-lbl { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(–muted); }
.scroll-cue { position: absolute; bottom: 44px; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; }
.scroll-cue-text { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(–muted); }
.scroll-cue-line {
width: 1px; height: 52px;
background: linear-gradient(to bottom, rgba(201,169,110,0.7), transparent);
transform-origin: top; animation: linePulse 2.2s ease-in-out infinite;
}
@keyframes linePulse {
0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.4); opacity: 0.3; }
}
.generation { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden; }
.generation.flip { direction: rtl; }
.generation.flip > * { direction: ltr; }
.gen-visual { position: relative; overflow: hidden; background: #111; }
.gen-img-clip { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); overflow: hidden; }
.generation.flip .gen-img-clip { clip-path: inset(0 0 0 100%); }
.gen-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: brightness(0.82) contrast(1.06) saturate(0.9); transition: filter 0.3s; }
.gen-visual:hover .gen-img { filter: brightness(0.9) contrast(1.06) saturate(1); }
.gen-img-vignette { position: absolute; inset: 0; background: linear-gradient(to right, rgba(8,8,8,0.55) 0%, transparent 40%, transparent 60%, rgba(8,8,8,0.2) 100%); }
.generation.flip .gen-img-vignette { background: linear-gradient(to left, rgba(8,8,8,0.55) 0%, transparent 40%, transparent 60%, rgba(8,8,8,0.2) 100%); }
.gen-visual::before { content: ”; position: absolute; inset: 0; background: linear-gradient(135deg, var(–sa, #1a1a1a) 0%, #0a0a0a 100%); z-index: -1; }
.gen-copy { display: flex; flex-direction: column; justify-content: center; padding: 80px 72px 80px 80px; position: relative; overflow: hidden; }
.generation.flip .gen-copy { padding: 80px 80px 80px 72px; }
.gen-year-wm { position: absolute; font-family: ‘Cormorant Garamond’, serif; font-size: clamp(120px, 18vw, 240px); font-weight: 300; color: rgba(255,255,255,0.022); pointer-events: none; line-height: 1; right: -10px; bottom: 10px; user-select: none; }
.generation.flip .gen-year-wm { right: auto; left: -10px; }
.gen-accent-bar { position: absolute; left: 0; top: 12%; bottom: 12%; width: 2px; background: var(–sa, var(–accent)); transform: scaleY(0); transform-origin: top; }
.generation.flip .gen-accent-bar { left: auto; right: 0; }
.gen-gen-no { font-size: 9px; letter-spacing: 5px; text-transform: uppercase; color: var(–sa, var(–accent)); margin-bottom: 18px; opacity: 0; transform: translateY(14px); }
.gen-year { font-family: ‘Cormorant Garamond’, serif; font-size: clamp(18px, 2.5vw, 28px); font-weight: 300; color: var(–muted); letter-spacing: 4px; margin-bottom: 12px; opacity: 0; transform: translateY(14px); }
.gen-name { font-family: ‘Cormorant Garamond’, serif; font-size: clamp(38px, 5.5vw, 68px); font-weight: 300; line-height: 1; letter-spacing: -1px; margin-bottom: 10px; opacity: 0; transform: translateY(20px); }
.gen-tagline { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(–sa, var(–accent)); margin-bottom: 28px; opacity: 0; transform: translateY(14px); }
.gen-rule { width: 48px; height: 1px; background: var(–sa, var(–accent)); margin-bottom: 28px; transform: scaleX(0); transform-origin: left; }
.gen-desc { font-size: 14.5px; line-height: 1.85; font-weight: 300; color: rgba(237,232,223,0.72); max-width: 440px; margin-bottom: 44px; opacity: 0; transform: translateY(16px); }
.gen-specs { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 28px; opacity: 0; transform: translateY(14px); }
.spec { flex: 0 0 50%; padding: 0 0 20px 0; display: flex; flex-direction: column; gap: 5px; }
.spec-lbl { font-size: 8.5px; letter-spacing: 3px; text-transform: uppercase; color: var(–muted); }
.spec-val { font-size: 16px; font-weight: 400; color: var(–text); font-family: ‘Cormorant Garamond’, serif; letter-spacing: 0.5px; }
.gen-divider { height: 1px; background: rgba(255,255,255,0.04); }
#footer { height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; gap: 20px; }
#footer::before { content: ”; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(201,169,110,0.05) 0%, transparent 70%); }
.footer-title { font-family: ‘Cormorant Garamond’, serif; font-size: clamp(36px, 6vw, 80px); font-weight: 300; letter-spacing: -2px; text-align: center; opacity: 0; transform: translateY(20px); }
.footer-title em { font-style: italic; color: var(–accent); }
.footer-sub { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(–muted); opacity: 0; transform: translateY(10px); }
.footer-line { display: flex; align-items: center; gap: 16px; opacity: 0; }
.footer-rule { width: 48px; height: 1px; background: var(–accent); opacity: 0.4; }
.footer-since { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(–accent); }
@media (max-width: 860px) {
.generation { grid-template-columns: 1fr; min-height: auto; }
.generation.flip { direction: ltr; }
.gen-visual { height: 55vw; min-height: 280px; }
.gen-copy { padding: 48px 28px 56px; }
.gen-year-wm { display: none; }
#nav-dots, #year-strip { display: none; }
body { cursor: auto; }
#cursor, #cursor-ring { display: none; }
}
gsap.registerPlugin(ScrollTrigger);
const BASE = ‘https://commons.wikimedia.org/wiki/Special:FilePath/’;
const gens = [
{ no:’01’, year:’1948′, name:’Porsche 356′, tagline:’The One That Started It All’, desc:’Born from salvaged Volkswagen parts in a small Austrian barn, the 356 was Ferry Porsche’s hand-built dream. Weighing just 590 kg, it proved that lightness is the purest form of performance — and gave the world its first taste of what Porsche means.’, specs:[{l:’Engine’,v:’1.1L Flat-4′},{l:’Power’,v:’40 hp’},{l:’Weight’,v:’590 kg’},{l:’Top Speed’,v:’140 km/h’}], accent:’#C9A96E’, img:’1949_Porsche_356-2_Coupe_(30795116158).jpg’, flip:false },
{ no:’02’, year:’1963′, name:’Porsche 911′, tagline:’Born Iconic’, desc:’Ferdinand “Butzi” Porsche penned a silhouette that would never go out of style. Debuting as the “901” at the 1963 Frankfurt Motor Show, the flat-six rear-engine layout felt impractical on paper and transcendent on the road.’, specs:[{l:’Engine’,v:’2.0L Flat-6′},{l:’Power’,v:’130 hp’},{l:’0 – 100′,v:’9.1 sec’},{l:’Top Speed’,v:’210 km/h’}], accent:’#B8B8B8′, img:’Porsche_911_2.0_Coupe_IMG_0819.jpg’, flip:true },
{ no:’03’, year:’1973′, name:’Porsche 911 Carrera RS 2.7′, tagline:’The Lightweight Legend’, desc:’Built to homologate for Group 4 racing, Porsche needed to sell 500. They sold 1,590. The ducktail spoiler, thinned glass, and stripped interior made it the most focused 911 yet. Today it is considered among the greatest road cars ever made.’, specs:[{l:’Engine’,v:’2.7L Flat-6′},{l:’Power’,v:’210 hp’},{l:’0 – 100′,v:’5.8 sec’},{l:’Weight’,v:’900 kg’}], accent:’#E03030′, img:’Paris_-_RM_auctions_-_20150204_-_Porsche_911_Carrera_RS_2.7_Touring_-_1973_-_005.jpg’, flip:false },
{ no:’04’, year:’1977′, name:’Porsche 928′, tagline:’The Grand Tourer’, desc:’Porsche’s board intended the 928 to replace the 911. A front-mounted V8, a hatchback body, and the first-ever Motor Trend Car of the Year from a European brand made it a masterpiece. The 911 survived. Both became icons.’, specs:[{l:’Engine’,v:’4.5L V8′},{l:’Power’,v:’240 hp’},{l:’0 – 100′,v:’6.5 sec’},{l:’Top Speed’,v:’230 km/h’}], accent:’#B87333′, img:’1991_Porsche_928_S4_LC24.jpg’, flip:true },
{ no:’05’, year:’1989′, name:’Porsche 964′, tagline:’The Modern Classic’, desc:’With 85% new components, the 964 was the most ambitious 911 revision in history. All-wheel drive arrived for the Carrera 4, and the Turbo received a full intercooler. Yet beneath the technology, the soul remained air-cooled and pure.’, specs:[{l:’Engine’,v:’3.6L Flat-6′},{l:’Power’,v:’250 hp’},{l:’0 – 100′,v:’5.5 sec’},{l:’Top Speed’,v:’260 km/h’}], accent:’#CC2200′, img:’Porsche_911_(964)_Carrera_2_(14055426744)_(cropped).jpg’, flip:false },
{ no:’06’, year:’1993′, name:’Porsche 993′, tagline:’Last of the Air-Cooled’, desc:’Universally beloved as the finest 911 ever, the 993 brought a new multi-link rear suspension, a sleeker body, and a twin-turbo Turbo that remains a benchmark. When its production ended in 1998, an entire era of motoring history closed with it.’, specs:[{l:’Engine’,v:’3.6L Flat-6′},{l:’Power’,v:’272 hp’},{l:’0 – 100′,v:’5.4 sec’},{l:’Top Speed’,v:’270 km/h’}], accent:’#3A7BD5′, img:’1995_Porsche_993_Carrera_RS_in_Riviera_Blue,_front_left.jpg’, flip:true },
{ no:’07’, year:’1997′, name:’Porsche 996′, tagline:’A New Era Begins’, desc:’Controversial on arrival for its fried-egg headlights and water-cooled engine, history has been kinder to the 996. It democratised 911 ownership, spawned the immortal GT3 and GT2, and proved Porsche could reinvent without surrendering its soul.’, specs:[{l:’Engine’,v:’3.4L Flat-6′},{l:’Power’,v:’300 hp’},{l:’0 – 100′,v:’5.2 sec’},{l:’Top Speed’,v:’278 km/h’}], accent:’#8A8A8A’, img:’2001_Porsche_996_Turbo_FOS22.jpg’, flip:false },
{ no:’08’, year:’2004′, name:’Porsche 997′, tagline:’Perfected’, desc:’Wearing 993-inspired bodywork over the 996’s proven platform, the 997 restored purists’ faith. The 997 GT3 RS and 997 GT2 RS remain among the greatest driver’s cars ever built. This was the 911 as close to perfect as anyone had known.’, specs:[{l:’Engine’,v:’3.6L Flat-6′},{l:’Power’,v:’325 hp’},{l:’0 – 100′,v:’4.8 sec’},{l:’Top Speed’,v:’285 km/h’}], accent:’#909080′, img:’Porsche_911_(997)_Carrera_-_Flickr_-_The_Car_Spy_(11).jpg’, flip:true },
{ no:’09’, year:’2011′, name:’Porsche 991′, tagline:’Evolved’, desc:’The most significant 911 since the original: longer, wider, on a new platform with electric steering. Purists worried — until they drove the 991 GT3, whose 9,000 rpm naturally aspirated flat-six became the single greatest engine note in modern motoring.’, specs:[{l:’Engine’,v:’3.4L Flat-6′},{l:’Power’,v:’350 hp’},{l:’0 – 100′,v:’4.6 sec’},{l:’Top Speed’,v:’289 km/h’}], accent:’#E8E8E8′, img:’2012_Porsche_911_Carrera_S_2.jpg’, flip:false },
{ no:’10’, year:’2019′, name:’Porsche Taycan’, tagline:’The Electric Revolution’, desc:’Porsche’s boldest step since the 356: a fully electric four-door sports car that refused to compromise. An 800V architecture, a two-speed rear transmission, and instant torque delivery set a new benchmark — and proved the future of driving could still be thrilling.’, specs:[{l:’Motors’,v:’Dual Electric’},{l:’Power’,v:’530 hp’},{l:’0 – 100′,v:’3.8 sec’},{l:’Range’,v:’464 km’}], accent:’#00C8F0′, img:’2020_Porsche_Taycan_4S_79kWh_Front.jpg’, flip:true },
{ no:’11’, year:’2020′, name:’Porsche 992′, tagline:’The Modern Icon’, desc:’The 992 synthesises 75 years of evolution into the most complete 911 ever made. Wider bodywork, available hybrid power drawn from Porsche’s motorsport programme, and a chassis that is simultaneously the sharpest and most comfortable in 911 history.’, specs:[{l:’Engine’,v:’3.0L Flat-6T’},{l:’Power’,v:’385 hp’},{l:’0 – 100′,v:’4.2 sec’},{l:’Top Speed’,v:’293 km/h’}], accent:’#CC1020′, img:’2025_Porsche_992_Carrera_convertible_DSC_7026.jpg’, flip:false },
];
const container = document.getElementById(‘gen-container’);
const dotsEl = document.getElementById(‘nav-dots’);
gens.forEach((g,i) => {
const dot = document.createElement(‘div’);
dot.className=’nav-dot’; dot.dataset.label=g.year;
dot.addEventListener(‘click’,()=>document.getElementById(‘g’+i).scrollIntoView({behavior:’smooth’}));
dotsEl.appendChild(dot);
const sec = document.createElement(‘section’);
sec.className=’generation’+(g.flip?’ flip’:”); sec.id=’g’+i;
sec.style.setProperty(‘–sa’,g.accent);
sec.innerHTML=’
Driven by
‘;
container.appendChild(sec);
if(i{
const g=gens[i]; const isFlip=g.flip;
const tl=gsap.timeline({scrollTrigger:{trigger:sec,start:’top 75%’,toggleActions:’play none none reverse’,onEnter:()=>{document.getElementById(‘year-strip’).textContent=g.year;document.querySelectorAll(‘.nav-dot’).forEach((d,di)=>d.classList.toggle(‘active’,di===i));document.getElementById(‘progress-bar’).style.background=g.accent;},onEnterBack:()=>{document.getElementById(‘year-strip’).textContent=g.year;document.querySelectorAll(‘.nav-dot’).forEach((d,di)=>d.classList.toggle(‘active’,di===i));document.getElementById(‘progress-bar’).style.background=g.accent;}}});
tl.to(sec.querySelector(‘.gen-img-clip’),{clipPath:isFlip?’inset(0 0 0 0%)’:’inset(0 0% 0 0)’,duration:1.3,ease:’power3.inOut’}).to(sec.querySelector(‘.gen-img’),{scale:1,duration:1.5,ease:’power2.out’},'{mx=e.clientX;my=e.clientY;});
(function animCursor(){rx+=(mx-rx)*0.12;ry+=(my-ry)*0.12;cursor.style.left=mx+’px’;cursor.style.top=my+’px’;cursorRing.style.left=rx+’px’;cursorRing.style.top=ry+’px’;requestAnimationFrame(animCursor);})();
document.querySelectorAll(‘a,.nav-dot,.gen-visual’).forEach(el=>{el.addEventListener(‘mouseenter’,()=>{cursor.style.width=’18px’;cursor.style.height=’18px’;cursorRing.style.width=’56px’;cursorRing.style.height=’56px’;});el.addEventListener(‘mouseleave’,()=>{cursor.style.width=’10px’;cursor.style.height=’10px’;cursorRing.style.width=’36px’;cursorRing.style.height=’36px’;});});
const fill=document.getElementById(‘loader-fill’);const pctEl=document.getElementById(‘loader-pct’);const imgs=document.querySelectorAll(‘.gen-img’);let loaded=0;
function tick(){loaded++;const p=Math.round((loaded/imgs.length)*100);fill.style.width=p+’%’;pctEl.textContent=p+’%’;if(loaded>=imgs.length)dismiss();}
imgs.forEach(img=>{if(img.complete){tick();}else{img.addEventListener(‘load’,tick);img.addEventListener(‘error’,tick);}});
function dismiss(){setTimeout(()=>{gsap.to(‘#loader’,{opacity:0,duration:0.9,ease:’power2.inOut’,onComplete:()=>{document.getElementById(‘loader’).style.display=’none’;}});},400);}
setTimeout(()=>{if(document.getElementById(‘loader’).style.display!==’none’)dismiss();},4000);
Vamsee Jasti 