Technology.
The Concept
Real estate interfaces tend to default to photography and floor plans. This experiment asks a different question: what if the first thing a visitor sees is a living, breathing 3D object — one that reacts to their cursor, catches light, and feels tactile through a screen?
The house icon is extruded from SVG path data directly into Three.js geometry, then wrapped in MeshTransmissionMaterial to simulate glass or crystal. The result is a surface that refracts its environment rather than simply reflecting it — closer to a physical object than a rendered image.
Post-processing layers (N8AO for ambient occlusion, Bloom for light bleed, TiltShift2 for depth simulation) push the scene further toward a photographic aesthetic without touching a single photograph.
The hero rig ties camera movement to pointer position, making the experience feel alive the moment a visitor moves their mouse — no click required.
What This Solves
High-end property marketing lives and dies by first impression. A static hero — even with stunning photography — is a passive experience. This prototype demonstrates that a sub-200KB WebGL scene can deliver an interactive, premium feel that stands apart from every competing listing page using the same stock photo template.
The same pattern scales: swap the house geometry for a plot map, a building model, or a neighborhood cluster. The glass material is material-agnostic.
Stack
- React Three Fiber
- @react-three/drei
- @react-three/postprocessing
- maath
- Three.js
- Vite
