A 3D parking configurator in active development: explore a home, residence, or retail property, watch solutions respond, and turn your choices into a project brief.
My role
Product experience & 3D frontend engineer
Scope
Work in progress · Public 3D preview
In development · Home, residence, and retail journeys, parking plans, and brief export are available in the public preview.
Help visitors understand parking solutions through their own space and needs, without requiring technical knowledge.
02 / My contribution
What I built
Designed the journey and architectural scenes, integrated an optimized concept-car asset, engineered the planning and rendering systems, and deployed the product on Vercel.
03 / Delivery scope
Where it stands
Home, residence, and retail journeys, parking plans, and brief export are available in the public preview.
MacroPark Experience is a work in progress with a public preview on Vercel. I am designing and engineering it to make connected parking tangible before a site visit. Visitors enter one of three architectural environments, preview arrivals, access, reservations, charging, and solar, then explicitly add the solutions they want. The current build combines custom architectural geometry with an optimized, attributed concept-car asset, locally served PBR surfaces, reflections, animated hardware, and orbit inspection. A validated per-place plan drives the interface and exportable brief, while adaptive graphics, reduced motion, and a WebGL fallback keep the consultation usable.
Interactive sales experience for MacroPark02 /Product experience
What the product does.
01Architectural Experience2 capabilities
Three Distinct Places
A cantilevered villa, terraced residence, and retail pavilion use custom geometry, recessed glazing, furnishings, timber screens, and landscaping.
Inspect in 3D
Orbit and zoom around the property and detailed concept car. Return to the guided workbench without competing camera controllers.
02Guided Journey2 capabilities
Choose a Place
Home, apartment building, and shop or mall each provide a relevant environment and keep an independent plan.
Preview Before Adding
A solution can physically demonstrate itself without silently changing the client plan.
03Physical Stories2 capabilities
Arrival & Access
Vehicles approach recognition points, barriers respond, and accepted or expired visits have visible outcomes.
Charging & Solar
Parked vehicles connect to chargers while optional solar canopies and energy pulses make the relationship visible.
04Decision Support2 capabilities
Per-Place Plans
Visitors can compare needs, add or remove solutions, and return after a refresh. Only parking choices are saved on the device; personal brief details stay in memory.
Project Brief
One domain model drives preview, copy, download, and an optional prepared email without claiming a backend submission.
05Resilience2 capabilities
Adaptive Rendering
Quality controls, hidden-page pause, reduced motion, settled animations, and selective mounting control GPU cost.
Usable Fallback
Place selection, solution choices, and the project brief still work when WebGL is unavailable.
03 /System design
How the pieces connect.
System workflow
Place-to-plan experience loop
A visitor decision drives both the client interface and a visible 3D consequence, while one normalized configuration stays responsible for the final brief.
Client journey
Choose context
Home, residence or retailEach place has its own relevant needs and retained plan
Select a need
Preview the outcome
Solution workbenchPreview, add, remove and replay are separate actions
3D physical storyVehicles, access, guidance, charging and solar respond
Explicitly add
Keep the decision
Normalized planValid solutions remain separate for each place
Project briefPreview, copy, or download; email is optional configuration
01One Journey, Separate Rendering System
The interface owns choices and accessible controls; the domain owns valid configurations; Zustand owns the current visit; and a dynamically loaded rendering boundary owns WebGL, frame scheduling, camera motion, and physical stories.
Places, needs, compatibility rules, and exported brief data.
Experience state
Preview versus inclusion, replay, per-place plans, and modal state.
Scene runtime
Adaptive graphics, visibility, motion preference, camera, and WebGL failure.
Privacy
Persist validated parking choices only. Keep contact and project details in memory until the visitor copies or downloads the brief.
02Detailed 3D Assets Within a Browser Budget
The vehicle adapts the Khronos Car Concept by Eric Chadwick / Darmstadt Graphics Group GmbH under CC BY 4.0. Draco compression, WebP textures, static-material batching, and normalized wheel assemblies reduce the source GLB from 11.8 MB to about 1.01 MB. The architecture is custom geometry; its 512-pixel PBR maps come from Poly Haven under CC0.
Glazing, cabin detail, separate wheel pivots, per-instance paint, and distance-driven wheel rotation retain the vehicle character.
Fit the story
Ground and center visible geometry, align the vehicle heading, and preserve the established motion paths.
Control rendering cost
Share prepared geometry, batch surfaces, generate reflections locally, and adapt resolution, shadows, and frame scheduling.
03A Product Experience for a Connected-Parking System
This website demonstrates parking outcomes through an illustrative 3D environment. It complements the separate MacroPark embedded, mobile, and administration project; the live configurator does not operate a real barrier, accept payments, or submit a CRM enquiry. Explore the connected-system case study through the related-project link below.
04 /In action
A closer look at the build.
Actual project screens and documented visuals. Open any image for the full view.
Every capability needed a visible physical consequence instead of another technical card or diagram.
02
Preview Is Not Consent
Exploring a solution had to remain separate from adding it to the plan, including keyboard and modal behavior.
03
3D Without Fragility
The journey had to stay responsive, reduced-motion friendly, and usable when rendering fails or the page is hidden.
04
Detailed Models, Predictable Motion
Model scale, hidden geometry, mirrored transforms, and normalized attributes can change grounding and wheel placement. Geometry regressions guard the imported asset before it enters the existing story paths.
05
Two Camera Modes, One Owner
Guided shots yield while the visitor inspects a property, then recover from the actual camera position when the workbench returns.
06 /The toolkit
Each tool has a job.
Open a technology to see its role in this project.
Experience
Next.js 15 +
App shell, static production delivery, and code splitting
React 19 +
Accessible client journey and solution workbench
GSAP +
Opening and interface choreography
CSS Modules +
Scoped responsive interface and modal layouts
3D Runtime
Three.js +
Custom architecture, reflective surfaces, animated vehicles, and physical parking stories
React Three Fiber +
Scene composition and React rendering boundary
Drei + Draco +
Local compressed glTF loading and orbit/zoom inspection
PBR materials +
Locally served color, normal, and roughness maps with a generated reflection environment
Adaptive graphics +
DPR, shadows, frame scheduling, quality controls, and visibility pause
State & Quality
Zustand +
Preview, plan, replay, and per-place journey state
Production Next.js deployment with local model, decoder, font, and texture delivery
WebGL fallback +
The consultation remains usable without a GPU context
07 /Delivery notes
The documented scope.
33
Tests Passing
The Node suite verifies plans, persistence, previews, briefs, cameras, vehicle geometry, wheel pivots, and asset budgets.
3
Client Environments
Home, residence, and retail journeys share one product model while retaining distinct plans.
120 kB
First Load JS
The validated Next.js production build defers the 3D renderer and assets. This initial JavaScript figure excludes model, texture, and decoder transfers.
Next milestone
The next step is defined.
Refine the 3D scenes and animations, validate performance on physical phones, and finish production consultation integrations.
Home, residence or retailEach place has its own relevant needs and retained plan
