VEYRA - Autonomous Drive

An immersive 3D autonomous mobility experience that reveals how LiDAR, radar, cameras, AI, and connected systems power the VEYRA One.

Comment 1

Inspiration

Autonomous vehicles are often explained through technical diagrams or dense articles, but I wanted to create something that makes the technology feel visual, cinematic, and easy to understand.

VEYRA began as an idea for a futuristic product experience: a visitor scrolls through a dark 3D environment while the vehicle rotates and reveals the systems that allow it to perceive, understand, and respond to the world around it.

The goal was to combine automotive design, interactive storytelling, and real-time 3D graphics into a website that immediately feels like a premium concept-car reveal.

What it does

VEYRA is an immersive 3D autonomous-mobility experience centered around the fictional VEYRA One.

The main scroll experience introduces seven stages:

  • Vehicle introduction
  • Roof-mounted LiDAR
  • Forward radar
  • Surround cameras
  • Ultrasonic sensors
  • Onboard AI compute
  • Full-system finale

As the user scrolls, the camera and vehicle move through choreographed poses while responsive labels identify each system and explain its purpose.

The project also includes dedicated pages for:

  • Vehicle: design, specifications, and sustainability
  • Intelligence: perception, prediction, and decision-making
  • Safety: redundancy and safe-operation principles
  • Network: connected fleet and urban-mobility concepts
  • Vision: the purpose and story behind VEYRA

The experience is responsive across desktop, tablet, and mobile, with chapter-specific camera framing and annotation positioning.

How I built it

The website was built with:

  • React and TypeScript
  • Three.js
  • React Three Fiber
  • Drei
  • GSAP and ScrollTrigger
  • Tailwind CSS
  • Vite
  • Wouter
  • Vercel
  • Replit Agent and OpenAI Codex

The VEYRA One is a procedural 3D model created directly in code rather than downloaded as a premade vehicle asset.

The main page uses a fixed React Three Fiber canvas and a long scroll track. GSAP ScrollTrigger converts the user’s scrolling into progress values, which are used to interpolate the camera, vehicle, lighting, and annotation states between chapters.

The secondary pages use a shared visual system and IntersectionObserver-based scroll reveals. I also added reduced-motion support, responsive navigation, deep-link routing, social-sharing metadata, and a custom VEYRA favicon.

Challenges I faced

One of the largest challenges was making the procedural vehicle feel polished rather than like a collection of basic geometric shapes. I repeatedly refined its silhouette, wheels, glass, lighting, materials, sensors, and brand badge.

Lighting was another challenge. Early versions had excessive bloom and large white or cyan reflection artifacts. I adjusted material roughness, emission intensity, postprocessing, and scene lighting to preserve subtle reflections without overwhelming the vehicle.

The scroll experience also required extensive responsive work. Camera angles that looked correct on desktop sometimes cropped the vehicle or caused labels to collide on mobile. I created mobile-specific camera poses, targets, field-of-view settings, vehicle scaling, and annotation offsets for every chapter.

Deployment required additional work because the project originated as a multi-package Replit workspace. I configured the correct Vite application root and output directory, added an SPA rewrite for direct routes, and hardened the build configuration for both local development and Vercel.

Accomplishments that I am proud of

I am especially proud that

  • The vehicle is procedurally modeled in code
  • The 3D experience tells a clear technical story through scrolling
  • The brand, car, interface, logo, and supporting pages feel like one unified product
  • The project works across desktop and mobile layouts
  • Sensor annotations remain connected to the correct vehicle components
  • The final website includes accessibility and reduced-motion considerations
  • I developed an original fictional mobility brand rather than relying on an existing manufacturer

What I learned

This project taught me how much detail is involved in building a convincing real-time 3D web experience.

I learned more about:

  • React Three Fiber scene architecture
  • Procedural Three.js modeling
  • Camera choreography
  • GSAP ScrollTrigger
  • Responsive 3D composition
  • Lighting and material tuning
  • Postprocessing and bloom control
  • IntersectionObserver animations
  • Monorepo deployment
  • Vercel routing and build configuration
  • Using multiple AI development tools for different strengths

I also learned that visual polish often comes from many small improvements rather than one large feature.

What's next for VEYRA

Future versions could include:

  • A detailed interior experience
  • Interactive sensor simulations
  • A driveable city demonstration
  • More advanced accessibility options
  • Improved loading based on actual 3D asset readiness
  • Additional performance optimization and code splitting
  • A cinematic VEYRA product film

For this hackathon, my focus was creating a complete, polished, and memorable interactive concept that shows how autonomous-vehicle technology could be explained through the web.

Built With

Share this project:

Updates

Submission history