Real Estate Listing Site With a Scroll-Driven 3D Walkthrough

Buyers already read floor plans to judge a home. So this listing site starts on the plan, and as you scroll the plan rises into a 3D house you walk through room by room. Then it turns into a full listing: facts, gallery, an interactive floor plan, neighborhood, tour booking and a search of the brokerage's other homes.

The video above is a screen capture of the live site, scrolled top to bottom. Walk through it yourself: https://givemeprompts.com/demos/calloway/m

The blueprint, drawn in cyanotype blue.

Walls rise as a line drawing.

Each room fills in with light, color and period furniture as you arrive: the foyer, the front parlor with its bay window, the green dining room under a coffered ceiling.

Every wall, door and window comes from one floor plan drawing. The 3D walkthrough, the photo gallery and the clickable floor plan are all built from that same model, so they can never disagree. A listing team updates one thing and everything follows.

Price and facts up front, a gallery rendered from the same 3D model, a floor plan where clicking a room jumps the walkthrough there, a tour request form, and a search across nine illustrated homes that filters by neighborhood, style, bedrooms and price, on desktop and phone.

The house follows the layout of a real Pacific Heights Victorian, but The Calloway, the Cornice brokerage and its agent are fictional. No real photos or address are used, and the site says so.

Built with Three.js and hand-written HTML and CSS. Furniture models, the parquet floor and marble come from Poly Haven (CC0).

Selling a home that deserves more than a photo carousel, or building a brokerage site? admin@givemeprompts.com

More work: https://givemeprompts.com