Lamborghini Aventador scroll-driven site

Title: Immersive Scroll-Driven 3D Car Website (React, Three.js, WebGL)

Short description (for the portfolio card):

Cinematic one-page website for the Lamborghini Aventador SVJ 63 Roadster, built as an unofficial concept study. A real 3D car model sits at the heart of every section while the camera flies through 8 scroll-controlled scenes, with interactive hotspots, a paint and headlight configurator, and a custom cursor.

Full description:

I designed and built this interactive 3D website from scratch to show what scroll-driven WebGL storytelling can do for a premium product.

What the visitor experiences

A tachometer loader that follows real loading progress, then a red light sweep reveals the car.

8 scroll-scrubbed scenes. The camera moves around the car, and scrolling back up rewinds everything exactly.

Clickable 3D hotspots pinned to the car (brakes, roof, engine, rear wing). Each one flies the camera in for a close-up.

A showroom: drag to orbit the car, switch paint colours, turn the headlights on and off.

Animated stats and a speedometer that follows scroll, plus a race-track outline (from OpenStreetMap data) that draws itself with a running lap timer.

A synthesised V12 engine sound, off by default and toggled by the user.

A custom cursor, smooth type reveals, and a background rifle model that follows the mouse.

What I handled

Optimising the 3D models: the car went from 17.7 MB to 3.6 MB and the rifle from 44.8 MB to 0.8 MB (about 5 times and 55 times smaller). I also split the wheels so they spin, and removed trademark artwork.

Camera, lighting, reflections and post-processing in the 3D scene.

Responsive layout for desktop and phones, with a lighter graphics tier on mobile.

Accessibility: keyboard navigation, reduced-motion support, and all content kept as real text.

A fallback that keeps the page readable if WebGL or a model fails to load.

Security headers and dependency hygiene, deployed on Cloudflare.

Tech stack: React 18, TypeScript, Three.js, React Three Fiber, drei, GSAP and ScrollTrigger, Lenis smooth scroll, Tailwind CSS, Zustand, Vite, Web Audio API, Cloudflare Pages.

Links

Live demo: https://aventador-svj63.p...

Source code: https://github.com/abedal...

Skills/tags: Three.js, React Three Fiber, WebGL, GSAP, React, TypeScript, Creative Development, 3D Web, Motion Design, Interactive Website, Landing Page

Note: This is an unofficial concept study, not affiliated with Lamborghini. The 3D models are by third-party artists (CC BY 4.0).

العربية

العنوان: موقع تفاعلي ثلاثي الأبعاد بالتمرير (React وThree.js وWebGL)

الوصف:

صممت وبنيت هذا الموقع من الصفر ليعرض سيارة Lamborghini Aventador SVJ 63 Roadster كدراسة تصميم غير رسمية. السيارة ثلاثية الأبعاد في قلب كل قسم، والكاميرا تتنقل حولها عبر 8 مشاهد يتحكم بها التمرير.

ما يجده الزائر:

شاشة تحميل على شكل عدّاد دوران محرك تتبع تقدم التحميل الحقيقي.

8 مشاهد تتحرك بالتمرير، وعند التمرير للأعلى تعود الحركة بدقة.

نقاط تفاعلية على السيارة (الفرامل والسقف والمحرك والجناح)، وكل نقطة تقرّب الكاميرا.

صالة عرض: تدوير السيارة بالسحب، وتغيير اللون، وتشغيل المصابيح.

أرقام متحركة وعدّاد سرعة يتبع التمرير، ومضمار سباق يُرسم أمام الزائر مع مؤقت للّفة.

صوت محرك V12 مُولَّد داخل المتصفح، متوقف افتراضيًا ويشغّله الزائر.

مؤشر ماوس مخصص ونصوص تظهر بحركات ناعمة.

ما قمت به:

تحسين النماذج ثلاثية الأبعاد: نموذج السيارة من 17.7 إلى 3.6 ميغابايت، والبندقية من 44.8 إلى 0.8.

ضبط الكاميرا والإضاءة والانعكاسات والمؤثرات.

تصميم متجاوب للحاسوب والجوال، مع مستوى رسوم أخف على الهاتف.

إمكانية وصول: تنقل بلوحة المفاتيح ودعم تقليل الحركة، والمحتوى كله نص حقيقي.

بديل يحافظ على قراءة الصفحة إذا لم يعمل WebGL.

ترويسات أمان ونشر على Cloudflare.

التقنيات: React وTypeScript وThree.js وReact Three Fiber وGSAP وTailwind وVite.

الروابط: العرض المباشر https://aventador-svj63.p... والكود https://github.com/abedal...

ملاحظة: دراسة تصميم غير رسمية وغير تابعة لـ Lamborghini، والنماذج ثلاثية الأبعاد من فنانين آخرين.