ROADSTER
Credits · how it's built

Roadster, an interactive concept

Concept design & development by Philip Ojo Oladeji. A cinematic product website, a booking and payments platform and a separate admin dashboard, designed and built end to end.

01 Cinematic experience

  • One scroll-driven master timeline (GSAP ScrollTrigger) choreographs nine scenes, from the white drawing sheet to the smoke finale.
  • Lenis smooth scrolling, scrubbed to the timeline, with reduced-motion support throughout.
  • Real-time 3D in WebGL with Three.js, React Three Fiber and Drei.
  • Custom GLSL shaders: a pen-on-paper line-art drawing, an X-ray anatomy view, fBm volumetric smoke, a baked contact shadow and a studio paint material.
  • Wireframe-to-photoreal reveal, camera choreography, a multi-viewport showcase and physically staged stunts (flip, inverted ramp, thruster hop).

02 3D model & assets

  • Model: “Tesla Roadster (2028).” by morolucky, licensed CC BY 4.0.
  • Optimised with glTF-Transform: welded, simplified, Meshopt-compressed geometry and WebP textures.
  • Line art, X-ray internals, lighting, shadows and smoke are generated procedurally at runtime.
  • Gallery images are studio renders of the same model.
  • Typefaces: Michroma, Inter and JetBrains Mono (SIL Open Font License), self-hosted with next/font.

03 Commerce & bookings

  • Reservations for each version, paid in full or in 3, 6 or 12 monthly installments.
  • Private test drives in European cities with live slot availability, per-car pricing and experience upgrades.
  • Checkout add-ons and promo codes; every price is recomputed on the server in US dollars.
  • Payments by Bitcoin, Ethereum or bank transfer: the team issues payment details that expire, with BIP-21 / EIP-681 QR codes and a live countdown.
  • Testnet-only address validation (bech32 checksums), watch-only wallets and no private keys on the server.
  • Meeting-point emails with calendar invites once a test drive is paid (Resend).

04 Admin dashboard

  • A separate Next.js app that talks to the site through a token-protected API.
  • Live alerts for new payment requests (sound, toast, tab badge, desktop notifications).
  • Control over prices, test-drive cities, times and capacity, add-ons, promo codes, wallets and bank accounts.
  • Booking management, payment verification, rescheduling, an email outbox and revenue by stream.

05 Engineering

  • Next.js 16 (App Router), React 19 and TypeScript; server components and route handlers.
  • Data in a JSON store or Supabase (Postgres), switched by configuration.
  • Responsive from phone to desktop, keyboard accessible, with reduced-motion fallbacks.
  • Tested with headless-browser visual captures and end-to-end API checks.

06 Sources & notes

  • Figures and stunts are recreated from coverage of the 15 Oct 2026 Roadster reveal (TechCrunch, Teslarati, Wikipedia). They are manufacturer claims, not independent measurements. Lineup vehicles are simplified stand-ins.
  • Unofficial concept · not affiliated with Tesla, Inc. Tesla and Roadster are trademarks of Tesla, Inc.; no Tesla logos, fonts, imagery or code are used. Payments run on test networks.