Property Discovery Platform
A property discovery concept fronted by a procedurally generated 3D skyline. Residential and commercial filtering, project showcases, a locations explorer, payment plans and lead capture.
- Built for
- Faisalabad Property Discovery
- Hero
- Procedural WebGL skyline
- Journey
- Discover → compare → enquire
- Data
- Illustrative sample data
Overview
A real-estate platform concept for Faisalabad. The hero is a WebGL architectural scene — towers, facades and city layout generated in code rather than modelled — and the rest of the page is the discovery journey: featured property, projects, filtering, locations, investment framing, payment plans, amenities and a lead form.
Objective
Take the parts of property buying that are usually PDFs and phone calls — plans, locations, payment schedules — and put them into one browsable experience.
Problem and opportunity
Local property marketing leans on printed brochures and message threads. The information a buyer actually compares on is fragmented across all of them, which makes shortlisting harder than it needs to be.
Solution
A single page that moves from aspiration to detail: an atmospheric 3D skyline to set the tone, then progressively more concrete tools — filters, an interactive locations explorer with map visualisation, a payment plan experience and a lead form that captures a real enquiry.
Technology
- Framework
- Next.js 14React 18TypeScript
- 3D
- Three.jsReact Three Fiber 8dreipostprocessing
- Motion
- Framer Motion 11custom reveal & parallax
- Styling
- Tailwind CSS 3lucide-react
Key features
What is actually in the build.
- 01
Procedural 3D skyline
The hero city is generated: tower massing, facade patterns and site layout are all computed, so the scene ships as code rather than as a heavy model download.
- 02
Property discovery and filtering
A filter sheet narrows the catalogue across residential and commercial listings, with property cards and a featured property treatment.
- 03
Locations explorer
Named Faisalabad locations with an accompanying map visualisation, so a buyer can move between areas rather than scanning a list.
- 04
Payment plan experience
Instalment schedules presented as an interactive breakdown instead of a static table.
- 05
Lead capture
A structured enquiry form plus a persistent WhatsApp affordance, which is how this market actually makes first contact.
On a phone
Designed for the small screen too.
Captured from the live deployment at 390 × 844. The mobile layout is composed rather than scaled down — navigation, density and the primary action are all decided again for the narrow viewport.
UX and interface decisions
Dark for atmosphere, then light for detail
The skyline opens on a deep navy night scene; the working sections that follow lift into lighter surfaces where dense information has to stay legible.
Editorial property cards
Large imagery with restrained typographic overlays, rather than the specification-table style most listing sites default to.
Honest about its own data
The site states plainly that projects, pricing, availability and statistics shown are illustrative sample data, not verified listings.
Technical approach
Generated architecture
Separate modules handle tower geometry, facade patterning and city layout, which is what makes the skyline variable without an asset pipeline.
Scene fallback path
The 3D hero has an explicit fallback component for when the canvas cannot or should not run.
Reusable motion layer
Reveal, text reveal, parallax and counter primitives are shared across every section instead of re-declared per component.
Challenges
The parts that needed a second attempt.
Atmosphere without weight
A photoreal city would have meant a large model budget on a page most people open on a phone. Generating the skyline kept the payload small enough that the 3D could stay.
Aspiration next to arithmetic
Payment plans and filters are unglamorous but decisive. They had to sit in the same page as the skyline without either one undercutting the other.
Next project
Restaurant Digital Experience
Moon Grill · Interactive demo
