Real Estate Template

Quick Start

1. Unzip and open index.html in a browser, or serve the folder with any static server (npx serve .).
2. The pages are plain HTML files: index.html (home), listings.html, property.html, areas.html (area map), area.html (one neighbourhood guide), sell.html and team.html.
3. Every page shares assets/style.css, assets/homes.js and assets/script.js. There is no build step.
4. Deploy the folder as it is to any static host.

Using It With Your Own Design

• Colour: the palette is the token block at the top of assets/style.css. The four panel colours are --terracotta, --harbour, --blush and --ochre; each panel sets a --panel and --panel-ink pair, so keep each pair at 4.5:1 or better (the measured pairs are listed in the stylesheet's first comment).
• Photographs: keep them true colour and in daylight. The page adapts to the photographs, never the reverse: there is no tint or overlay to match.
• Type: Piazzolla (display, italic for every home's name) and Figtree (interface and body), self-hosted in assets/fonts/ (see Fonts below). Change the files, the @font-face rules and --font-display / --font-body.
• Stock: one array of homes in assets/homes.js (see below).

Pages and Configuration

Page	Sections	Hands-on piece
Home	Split hero, new this week, agency band, areas band, valuation band	Featured-homes deck
Listings	Title and live count, filter bar, grid or map, register band	Filters, grid/map toggle, photo scrubbing
Property	Split hero with facts, gallery, description, floorplan, walking times, viewing card, nearby homes	Floorplan rooms, gallery, viewing request
Areas	Brand-coloured map of Bristol, "Not sure where to start?" panel, six neighbourhood tiles	Neighbourhood pins and cards
Area guide	Split header, facts strip, editorial, budget band, homes nearby	"What your budget buys" slider
Sell	Split header, stepped valuation form beside the process timeline, terms, sold strip, testimonial	Stepped form, draggable sold strip
Team	Split header, five agent cards, two offices with a map, contact form	Flip-over agent cards

Every feature looks for its own data- hook and does nothing when the markup is missing, so you can delete a section, or a page and its nav link, without editing the script.

The stock list (assets/homes.js)

window.MP.homes holds every home: slug, street, area, areaId, postcode, price, tenure, type (house or flat), kind, beds, baths, sqft, epc, tax, an optional tag (New, Under offer), at ([longitude, latitude]), summary, features, rooms (name and caption per room photograph), plan and walks.

Photographs follow one naming rule in assets/img/: <slug>-ext.webp (1400 wide) and <slug>-ext-sm.webp (640) for the front, <slug>-r1.webp, <slug>-r1-sm.webp and so on for each room, in the order of rooms.

To add a home: add an entry, bake or drop in its photographs, then copy one <article class="card"> in listings.html and change its data-home, data-area, data-type, data-price, data-beds, data-photos and text. The map pins, the area cards and the property page pick it up from the array.

window.MP.areas holds the six neighbourhoods for the area map (pin position, line, price band, station, school, link) and window.MP.offices the two offices for the team map.

Featured-homes deck (home)

Each [data-deck-card] in the hero names a home (data-deck-card="<slug>"), its panel colour and panel ink (data-panel="terracotta" data-panel-ink="cream", token names without the dashes) and carries a portrait interior (<slug>-card.webp, 560 × 720). Each [data-deck-photo] is that home's exterior; only the first loads with the page, and the next one loads when the deck is about to show it. Add or remove a home by adding or removing a card and its photo. Visitors drag or flick the top photograph, use the round arrow buttons, or focus the deck and use the arrow keys; a polite live region announces each home.

Listings

Filters are native inputs in [data-filters]: area, type, min, max, beds, saved and view. Add an area chip by adding a radio with the area's areaId as its value. listings.html?area=redland and ?saved=1 preselect a filter. Pointing across a card's photograph scrubs through the front and three rooms (from data-photos); the dots below do the same on touch and keyboard. The map view is created the first time it is opened.

Property page

property.html?home=<slug> shows any home in the array; property.html alone shows the static worked example (Hampton Road), which is also what visitors without JavaScript see. The hero, gallery, floorplan, walking times and "More homes nearby" come from the array.

The listing photograph carries view-transition-name: home-photo into the property hero, so in browsers with cross-document view transitions the photograph morphs into place. Other browsers load the page normally. Reduced motion turns the transition off.

Floorplans

plan is { w, h, floors, rooms } in plan units of any scale. Each floor is an outline { label, x, y, w, h }; each room is { name, dims, x, y, w, h, photo }, where photo is the index in rooms of the photograph that shows it, or null for a room without one. Photographed rooms are shaded, focusable buttons; choosing one lights it and swaps the photograph beside the plan.

Walking times

walks is a list of [place, metres, minutes]. The demo's figures are routed on foot along real streets with OpenStreetMap data (https://routing.openstreetmap.de/routed-foot/route/v1/foot/<lng,lat>;<lng,lat>). Recalculate them for your own homes.

Maps

All three maps are MapLibre GL on OpenFreeMap's Positron style: OpenStreetMap data, free, with no API key or account. createMap() in the script recolours the style at runtime to the brand: cream land, harbour-blue water, sage parks and white roads; change those colours there. Wheel and one-finger drag scroll the page; the map pans with Ctrl/Cmd and wheel, or two fingers on touch. Keep the OpenStreetMap attribution. Without JavaScript or WebGL each map is a link to OpenStreetMap.

MapLibre is the heaviest file on the site, so no page loads it with the page. loadMapLibre() in the script fetches its script and stylesheet when a map is about to be seen: the office map when it comes within a screen of the viewport, the listings map when the visitor reaches for the Map toggle, and the areas map at once (areas.html also preloads both files in its <head>). The two URLs are MAPLIBRE_JS and MAPLIBRE_CSS at the top of that block; change them to pin another version or self-host it. A page that includes MapLibre with its own <script> and <link> tags uses that copy instead.

Budget slider (area guide)

The examples are a JSON block ([data-budget-examples]) under the slider: price, street, area, a one-line description, image, status and an optional link. The slider shows the most expensive example at or under its value.

Forms

The register, viewing, valuation and contact forms are front ends only: they check the fields and show a confirmation in place without sending anything. Connect them to your CRM, Formspree or Netlify Forms before launch. The valuation form shows one step at a time with JavaScript and all four steps as one form without it; the home page's postcode field passes ?postcode= to it.

Saved homes

Heart buttons ([data-save="<slug>"]) keep a shortlist in the visitor's browser (localStorage, key mp-saved-homes), shown as a count on the nav button and as the Saved filter on listings. Nothing is sent anywhere.

Palette

Token	Value	Use
--cream	#F5EDE0	Page ground; ink on it 13.8:1
--ink	#2B1F1A	Text and solid pills
--ink-dim	#5E4E45	Secondary text, 6.8:1 on cream
--terracotta	#A8482A	Lead panel and tags; cream on it 5.0:1
--harbour	#1D5677	Accent, links, focus ring, map water; 6.8:1 with cream either way
--blush	#EDBFA8	Panel; ink on it 9.6:1 (never cream text)
--ochre	#D8A23F	Panel and Sold stamps; ink on it 7.0:1 (never cream text)
--sage	#A9B79B	Map parks only

Accessibility and Fallbacks

• Without JavaScript, or with the GSAP CDN blocked, every page is complete: the deck shows its first home with links to the others, every listing shows, the valuation form is one form, maps are links and agent cards show both faces.
• Reduced motion keeps every control but changes instantly: no flings, wipes, flips or reveals, and no view-transition morph.
• Native buttons, radios, selects and a range input throughout, with visible keyboard focus. Floorplan rooms are buttons with aria-pressed; hidden card faces are inert.
• Map pins are decorative; each map has a mirrored list of buttons or the same content as text.

Dependencies

• GSAP 3.15.0 with ScrollTrigger, plus Draggable (home, sell), InertiaPlugin (sell) and Flip (listings) (works with 3.12+), from jsDelivr.
• MapLibre GL 4.7.1 from unpkg on the listings, areas and team pages, loaded by the script when a map is needed (see Maps); tiles from OpenFreeMap (no key).
• Lenis 1.3.17 for optional smooth scrolling (add ?smooth=off to a URL, or data-smooth="off" on <html>, to turn it off).
• Piazzolla and Figtree, self-hosted in assets/fonts/.

Each page loads only the plugins it uses.

Fonts

Piazzolla (roman and italic) and Figtree are self-hosted in assets/fonts/, so no page makes a render-blocking third-party request. The files are the Latin subsets Google Fonts serves (all three are variable fonts), declared by the @font-face rules at the top of assets/style.css with the same weights and unicode-range Google uses. Each page preloads Figtree and the Piazzolla italic, the faces of the first screen. Licence: SIL Open Font License 1.1 (Piazzolla: Copyright 2018 The Piazzolla Project Authors, https://github.com/huertatipografica/piazzolla; Figtree: Copyright 2022 The Figtree Project Authors, https://github.com/erikdkennedy/figtree).

To swap a face, put your .woff2 in assets/fonts/, point its @font-face rules and the token at it, and change the preloads in each page's <head>. To use Google Fonts instead, delete the @font-face rules and the preloads and add the Google Fonts <link> to every page.

Images and Credits

Bundled photographs are WebP derivatives in assets/img/, cropped and resized but not colour graded, listed in assets/img-manifest.json. Rebuild them with bun scripts/build-template-assets.ts real-estate-template --force (in the GSAP Vault repo), or replace a file with your own at the same name and size. Each home's exterior comes in three widths, -ext (1400), -ext-md (960) and -ext-sm (640), and the browser picks one through the srcset; a replacement needs all three.

All photographs are from Pexels under the Pexels licence; every source URL is in assets/img-manifest.json (https://images.pexels.com/photos/<id>/..., page https://www.pexels.com/photo/<id>/). They include street and harbour views of Bristol (Clifton Suspension Bridge, Hotwells, Redland, the Floating Harbour, Wapping Wharf); the homes' exteriors and interiors are stock photographs paired for the example and do not show the streets they are captioned with.

Marlow & Pike, its people, offices, phone numbers, homes, prices and sales are fictional. Street names and map positions are real Bristol streets.