Real States
A real estate marketplace where properties are browsed as a 3D gallery and toured as panoramas.
- Role
- Software Engineer
- Status
- shipped
Problem
A property list is a grid of thumbnails that tells you almost nothing about a space. Real States replaces the grid with a gallery you move through, and lets a listing open into a panoramic tour of the actual rooms.
Architecture
Read this diagram as text
- Web client mounts Arc card rack
- Arc card rack opens listing Panoramic tour viewer
- Web client connects to Listings API
- Listings API connects to Listings store
- Panoramic tour viewer streams Media storage
Engineering decisions
The stack, reasoning not written up yet:
Three.js · React Three Fiber · React · glTF / GLB · WebGL
The hard part
The arc rack is the whole project, and it is also what fought back. Laying cards on a curve is arithmetic, but the count is not fixed: three listings and forty listings cannot share a radius without either overlapping every card or scattering them past the frame, so the curve is derived from the count rather than authored. The real ceiling was texture memory. Every listing opens into a full panorama and early versions kept each one it had shown, so browsing long enough killed the tab on a phone. Panoramas now load for the listing being toured and are released on the way out, with compressed stills held on the cards behind it.
Result
Listings are browsed as a curved gallery rather than a grid, and any one of them opens into a panoramic tour of the actual rooms. The viewer was benchmarked against Street View and Matterport for sharpness before it shipped, and the asset pipeline — glTF sourcing through to compression — was built to keep it that way on a phone.