// car.jsx — three side-view car silhouettes // Each is drawn pointing RIGHT (+X) inside a viewBox; the path follower // rotates the wrapper to match the path tangent. function SportsCar({ accent = "#E63946", body = "#07080d", glass = "#111827", headlights = false, }) { // Top-down sports car — vector artwork (SVG → background-removed PNG), points RIGHT. // `headlights` swaps to a variant with bright headlights + long beams baked in for // dark mode. Both PNGs share canvas dims so toggling doesn't shift position. // // The PNG canvas is wider than the car silhouette (extra space to the right holds // the headlight beams). Body width is ~38% of the canvas, biased to the LEFT. // We compensate the off-center body via an inner translate so the body CENTER — // not the canvas center — sits at the path-follower's anchor point. const src = headlights ? "assets/car-svg-lights.png" : "assets/car-svg.png"; const CANVAS_W = 3449; const CANVAS_H = 670; const BODY_W = 1319; const BODY_LEFT = 20; // x in canvas where car body starts const BODY_CENTER_X = BODY_LEFT + BODY_W / 2; const bodyCenterFrac = BODY_CENTER_X / CANVAS_W; // ~0.197 — fraction of canvas where body center sits const W = 460; // overall image width on page const H = Math.round(W / (CANVAS_W / CANVAS_H)); // preserve canvas aspect return (

{/* Blurred PNG duplicate as drop shadow. CSS `blur()` on an respects the alpha channel (unlike `drop-shadow()` on , which iOS Safari can draw against the bounding box). The .car parent is position:fixed and only its X + rotation change per scroll frame, so the blurred layer's bitmap is cached after the first paint and not re-rasterised on every frame. */}

); } // Legacy SVG sports car, kept as a fallback variant in case someone wants it. function SportsCarSVG({ accent = "#E63946", body = "#07080d", glass = "#111827", headlights = false, }) { const paint = body; const stripe = accent; return ( ); } function F1Car({ accent = "#E63946", body = "#1b1d23", headlights = false }) { // Top-down F1 silhouette pointing RIGHT. return ( ); } function GoKart({ accent = "#E63946", body = "#1b1d23", headlights = false }) { // Top-down kart silhouette pointing RIGHT. return ( ); } window.SportsCar = React.memo(SportsCar); window.F1Car = React.memo(F1Car); window.GoKart = React.memo(GoKart); window.CAR_VARIANTS = { sports: window.SportsCar, f1: window.F1Car, kart: window.GoKart, };