Skip to content

Interactive product · Case study Demo

Auto Gallery

From a static vehicle page to an explorable experience.

Auto Gallery connects product discovery, a guided 3D studio and transparent payment assumptions in one browser experience. One concept vehicle is implemented; the other catalog entries are explicitly marked as future experience briefs.

The public runtime for this project is temporarily unavailable.

React · Vite · Three.js · WebGL

Actual Auto Gallery interface showing the interactive concept SUV
Actual running application · desktop
Mohammed Mahdi Kaabi’s role
Product design and software development, with AI-assisted implementation. The vehicle model is a third-party asset.
Product version
1.0.0 · Demo
App language
English and Persian
01

The problem

Static photos make it difficult to connect a vehicle’s exterior, cabin and practical details. This demo explores how a guided journey can help visitors inspect those details at their own pace without presenting invented inventory or specifications.

02

What you can try

Discover

Browse the product overview, open detail pages and enter the single supported 3D studio. Roadmap records never pretend to be available cars.

Explore

Orbit the concept vehicle, inspect cabin and cargo views, use hotspots and interact with mapped doors and wheels. Rendering quality adapts to the device.

Follow Lyra

Take a nine-step guided tour or use rule-based Offline Assistance. These are curated local interactions, not a live generative AI service.

Compare assumptions

Change example price, down payment, term and rate. The calculator updates the illustrative monthly payment locally.

Keep a private summary

Optionally save a consented demo summary in this browser. It expires after 24 hours while open or is cleared on the next visit. No dealer or CRM receives it.

03

A small, explicit architecture

React handles discovery and the route shell; hash routes keep detail and studio links refreshable. The Three.js studio loads on demand. An immutable registry allows only the vehicle whose model and mechanical mapping are present. Scene commands are allowlisted, and the calculator and browser-local storage are separate modules.

  1. Discover
  2. Inspect in 3D
  3. Guided context
  4. Payment scenario

04 · Evidence

What the source establishes

The inspected 1.0.0 source contains an executable Vite application, one optimized glTF vehicle, local guidance, finance and consent modules, and unit and browser tests. The portfolio build uses the same application with scoped asset paths and a return link. No server credential or database is needed for this demo.

Source revision eba8596 · 2026-09-03

Actual running application · mobile
Actual running application · mobile
05

Boundaries of this demo

  • One real 3D concept is included. There is no live inventory, official trim data, manufacturer affiliation or production CRM.
  • Live AI is disabled. The optional server integration remains outside this public static build.
  • The powertrain view is conceptual. Cargo inspection hides the rear hatch because complete hatch animation is not reliable.
  • Finance is illustrative, not a quotation, financing offer, approval or lender term.
  • The interface and case study are available in English and Persian.
  • WebGL and a capable device are required for 3D. A fallback is shown if rendering fails; the model is about 14.4 MB before transfer compression.
Asset provenance

Vehicle model and texture web-delivery rights were attested by the project owner on 1 September 2026. The repository does not include the receipt or purchase-date license snapshot, so this is not independent verification. The model is not attributed to Mohammed. React and Three.js notices accompany the app.

Third-party notices

Explore the implementation

Open the demo, enter the 3D studio and choose guided or manual exploration. No account is required.

The public runtime for this project is temporarily unavailable.