UI / UX / MOTION DESIGN · REAL-TIME 3D
Workforce App
Give the sales conversation a world to explore. Housing, dining and infrastructure become one connected experience.
Enter the experience.
A clear invitation introduces the offering before the 3D scene. The opening gives people a starting point, then clears the screen with a 700 ms transition.
Move between solutions.
Numbered categories organize housing, dining and infrastructure. Selecting an area moves the camera toward its place in the scene, so the choice has a visible destination.
Keep the interface legible.
The 3D scene shows where things belong. The detail panel gives labels, specifications and photographs a stable reading surface. This addresses a design problem shared with in-vehicle displays: a moving scene and information people need to read at a glance.
Make motion explain the change.
The camera establishes location. Panels reveal the information that belongs to a selection. Timing and easing give those changes a consistent pace.
| State change | Timing | Easing | Purpose |
|---|---|---|---|
| Start screen → scene | 700 ms | cubic-bezier(0.22, 1, 0.36, 1) | Fade, scale and blur clear the invitation. |
| Solution details expand | 320 ms | cubic-bezier(0.22, 1, 0.36, 1) | Reveal the next choices within the selected category. |
| Area information opens | 320 ms | cubic-bezier(0.22, 1, 0.36, 1) | Fade, slide and scale bring detail into view. |
| Area selection → camera focus | Adaptive; 0.6 s smoothing | Damped camera movement | Connect a UI selection to its position in the scene. |
Values verified against the implemented app. Camera smoothing controls how movement settles; it is not a fixed 600 ms transition duration.
Why I built it.
The RK sales team relied on photographs and verbal explanations to present workforce housing, dining and infrastructure. That made the combined offering harder to show in one conversation.
I built an interactive experience for sales and prospective clients. They can explore the services together, move into individual areas and read the information in context.
Built with React Three Fiber and Three.js, using GLB models.
The result.
The RK sales team uses the app with prospective clients. Clients understand the offering more clearly, with a shared visual reference for the conversation.
Explore the live app →