DomaineLuxury Real Estate WordPress Theme

Overview

Domaine is a WordPress theme for developers and brokers of high-end residential architecture — villas, cliff houses, penthouses, mountain retreats. It is built as a brand site rather than a listings portal: the homepage is a ten-act editorial sequence, not a search form over a card grid.

Its signature is the atmosphere layer. A single WebGL2 field of mist spans the whole document and is sampled through a window that travels with the scroll, so the air at the footer is the same body of air seen at the hero, carried down — it never restarts and never loops. The field is built from a curl-noise flow that advects the sampling position (a divergence-free flow, so it genuinely swirls rather than sliding), two levels of domain warping for cloud’s billowed self-similar edge, and three depth slices at different scales and drift rates composited back to front. The layer paints the page’s grounds itself, taking each band’s colour from the stylesheet, which is what lets one continuous field read across crisp light/dark act changes. Its brightness is capped by a measured contrast budget rather than by taste: the pale type on the dark bands needs 4.5:1, which caps the ground it sits on at 0.176 relative luminance, so the mist gets 0.10 of headroom and buys the rest of its presence chromatically.

The second is a real 360° walk-through. Equirectangular photography mapped to the inside of a sphere with the camera at its centre: inertial damped dragging, wheel and pinch changing the field of view rather than CSS-scaling, hotspots projected from 3D directions to screen space every frame so they stay welded to the architecture, and a crossfade between rooms. Authors give hotspot angles as longitudes in the flat photograph; the conversion to camera yaw happens in one place so nobody editing a listing has to think about the renderer.

The hero is a depth-driven parallax, not a slideshow: a depth proxy derived from the projection’s perspective term and local luminance contrast displaces near material further than far, and residences dissolve into one another through fractal noise. It is documented as a proxy, not dressed up as photogrammetry — a JPEG has no depth channel.

Composition. Five distinct layouts cycle down the homepage — one bleeding past the viewport edge, one letting the text ride over the photograph, one handing the row to oversized type and shrinking the image to a supporting note. The sideways showcase runs panels at five widths and five heights so it never reads as a carousel. The archive gets the same treatment by position, so adding a sixth residence continues the rhythm on its own.

Data. A property post type with price, address, coordinates, beds, baths, garage, interior and land area, year, architect, video, gallery, floorplan, panorama sets and features; five taxonomies for type, location, status, feature and style; an advisor post type; and a Journal. Every visual module is driven from the admin — nothing on the front end is hard-coded. Schema.org RealEstateListing, Residence, Offer and PostalAddress are emitted for search.

Motion, honestly degraded. Under prefers-reduced-motion the atmosphere, smooth scroll, GSAP and the hero shader are never downloaded at all — the grounds revert to flat colour and every reveal completes instantly. If WebGL2 is unavailable the sections keep their own opaque backgrounds, because the class that makes them transparent is only added once the shader has compiled and drawn.