An ultra-luxury, high-performance web experience celebrating Formula 1 driver Charles Leclerc (#16) and Scuderia Ferrari HP. Built with cutting-edge creative development techniques, bespoke fluid vector physics, hardware-accelerated Canvas 2D rendering, authentic FIA circuit telemetry, and cinematic scroll choreography inspired by world-class driver platforms.
- Mechanical Optical Reticle: Minimalist optical preloader featuring driver
#16, radial blade ticks, and a circular SVG progress ring. - Smart Percentage Counter: Sprints from
0%to16%, takes an authentic0.18smicro-pause honoring Charles's car number, then smoothly finishes at100%. - Central Radial Dilation: Uses a hardware-accelerated CSS
radial-gradientmask to expand outwards from the center (r: 0 β 140vmax), unveiling the Hero Section with an exposure flash snap without page jitter or layout shifts.
- Tapered Aerodynamic Droplet Vector Spline: As the cursor sweeps across Charles Leclerc's portrait, it continuously paints an organic liquid ribbon trail that seamlessly reveals his Monaco GP Helmet worn beneath.
- Direct DOM Path Updating: Mask paths and backdrop liquid shadows are updated directly via element refs, achieving consistent 60β120 FPS performance with zero React re-render churn.
- Scale-Compensated Coordinate Mapping: Computes velocity vectors, normal tangent lines, and sub-step quadratic BΓ©zier curves in real-time.
- Natural Dissolve / Fade-Out: Gracefully dissolves within 0.8 seconds of mouse inactivity, returning cleanly to its editorial portrait state.
- Full-bleed Hero Zoom-out: The fullscreen cover transitions smoothly into a cropped editorial portrait box with authentic Monza GP scooped notch framing.
- Real-time SVG Signature Drawing: Charles Leclerc's handwritten signature dynamically draws itself across the screen using animated
stroke-dasharrayandstroke-dashoffsetmapped to GSAP scroll triggers. - Frictionless Unpinning: Optimized scroll pinning distance eliminates frozen scrolling stalls, flowing seamlessly into the multi-chapter timeline.
- Dynamic typographic experience where each word illuminates in Monaco Red and pure white as the user scrolls, chronicling Charles's journey from Karting in Brignoles to victory in Monaco & Monza.
- Podium Gallery: Horizontal scroll cards showcasing landmark Formula 1 victories with bespoke carbon grid styling.
- Dual Identity (Monaco vs Maranello): Interactive split comparison highlighting Charles's Monegasque heritage and his passionate Ferrari tifosi spirit.
- Authentic FIA Circuit Vector Geometry: 100% authentic vector path geometry for all 24 championship circuits (Albert Park to Yas Marina) β zero generic stock photos.
- Hyperiux Sliding Highlight Pill: Swiss tabular list on the left with a smooth white sliding highlight pill that inverts text cleanly to deep black (
#000000) on hover. - Sticky Telemetry Projection Stage: Right-hand sticky preview chamber rendering glowing Ferrari Red (
#E10600) circuit vectors, single-line telemetry specs (Length β’ Laps β’ Turns β’ Leclerc Record), and live countdown timers.
- Optical Shutter Gateway: Fullscreen aperture iris sequence with spacious, non-overlapping viewfinder HUD telemetry (
REC [RAW 4K // 120 FPS],APERTURE: Ζ/1.2 β Ζ/16, corner brackets). - 3D Zoom Parallax Archive: High-impact multi-layer photo grid that expands in 3D perspective space as you scroll, immersing viewers in candid off-track and on-track visual moments.
- Synchronized 8-Section Navigation: Complete site navigation with instant smooth scrolling to
#hero,#story,#podiums,#monaco-maranello,#calendar,#archive-parallax,#socials-deck, and the official Ferrari Store. - Handwritten Glowing Signature: Dynamic SVG draw-in animation in Modena Yellow (
#FFE500). - Infinite Sponsor Ticker: 60fps marquee ticker showcasing Scuderia Ferrari HP official partners.
- Direct Business Enquiries CTA: Magnetic pill button with diagonal light sheen animation.
- Core Framework: React 18.3, Vite 6.4
- Animations & Physics: GSAP 3.12 (ScrollTrigger), Framer Motion 13
- Smooth Scrolling: Lenis Scroll
- Styling & Design System: Tailwind CSS v4, Custom Swiss Editorial Serif & Heavyweight Racing Sans Typography
- Icons & Assets: Lucide React, Custom F1 Monaco/Monza GP Photography & Official FIA SVG Vectors
- Canvas Physics: HTML5 Canvas 2D, Simplex Noise
- Node.js (version 18 or higher recommended)
npmoryarn
-
Clone the repository:
git clone https://github.com/FerrelHD/leclerc-redline.git cd leclerc-redline -
Install dependencies:
npm install
-
Start the local development server:
npm run dev
Open http://localhost:3000 in your browser.
-
Build for production:
npm run build
-
Preview production build:
npm run preview
leclerc-redline/
βββ public/
β βββ images/ # Cutout portraits, official helmet renders, Monaco/Monza textures
βββ src/
β βββ components/
β β βββ hero/ # FaceHelmetReveal, MainVisualStack, AnimatedSignature, MonzaHudCard
β β βββ sections/ # Navbar, MenuOverlay, StorytellingScroll, PodiumGallery,
β β β # MonacoMaranelloSplit, F1Calendar, ArchiveZoomParallax, SocialsDeck, Footer
β β βββ ui/ # LoadingScreen, CustomCursor, WavesBackground, MagneticEffect, etc.
β βββ data/ # F1 Calendar circuit vectors, Charles Leclerc career stats
β βββ App.jsx # Main layout, Lenis smooth scroll ticker, ScrollTrigger refresh
β βββ index.css # Design tokens, Swiss typography, noise overlays, carbon grid textures
β βββ main.jsx # React DOM entry point
βββ package.json # Project dependencies and build scripts
βββ vite.config.js # Vite configuration with Tailwind CSS v4 plugin
βββ README.md # Project documentation
βWe did it at home. We did it at Monaco. For Ferrari.β