Case study
How this site was built.
Haven is an AI agent for a new home, with a wall panel in every room. Meridian Interface designed and built all of it: the product, the panel software, the film and this website. This page says what is real, what is a sample, and how it is made.
- 10panel screens, one for each kind of room
- 535automated browser checks on every build
- 0WCAG 2.2 AA violations found by those checks
The brief
Show a family, a home builder and an architect what living with Haven is like before a home exists: the house drawn in light, a panel they can use right now, and a clear account of what keeps them safe. Then let them book a walkthrough that lands straight in the sales pipeline.
What is real, and what is a sample
| Part | What it is |
|---|---|
| The live panel | The real panel software, all ten screens, running in your browser on a simulated house. Nothing you press reaches a real device. |
| The home server | Real and working: it talks to Home Assistant, runs the safety rules, learns comfort preferences and speaks in the chosen voice. |
| Weather, cameras, electricity | Samples in the demo, labelled as such on every screen. A real home shows its own. |
| The homes | Sample plans. The walk-through and Linden House are drawn from them. |
| Product pictures | Renderings made for this site, not photographs of a specific brand’s hardware. |
| The film | The house is drawn by the site’s own engine; the live-action shots are generated clips; the guide is a synthetic voice. |
| The booking form | Real: it sends your request to Meridian Interface’s CRM. |
How it is put together
- Layers that can’t be skipped. Devices, then a single safety controller, then the home’s services and agents, then the routes the panels call. Nothing reaches a door, a lock or the garage except through the controller, and the AI’s tools have no way to say “confirmed”: unlocking and opening wait for a person.
- One codebase, two places. The same routes serve the home server and the browser demo, so the panel on this page is the panel a home runs.
- Learning that asks first. Habits Haven notices become suggestions. Nothing it learns runs until someone says yes.
- Honest numbers. Electricity is marked as an estimate unless a meter measures it, and the demo’s weather and camera pictures say they are samples.
Tools and technology
- Node.js with a single runtime dependency: Anthropic’s Claude API, for conversation, with an offline parser as a fallback
- Plain HTML, CSS and JavaScript for the panels and this site, with no framework; Three.js for the 3D house
- Home Assistant for devices and cameras; ElevenLabs for the premium voice; Open-Meteo for weather
- Supabase for the CRM the booking form writes to
- Playwright and axe-core for the browser checks; esbuild to package the demos; FFmpeg to assemble the film
How it is tested
Every change runs 139 unit and integration tests and 535 browser checks, split between the home server and the demo. The checks press the controls on every screen, follow the safety confirmations, and audit each screen for WCAG 2.2 AA with axe-core. Before release, a crawler pressed every button on every screen, and every link and control on this site.
Who made it
Meridian Interface: web design, mobile app interfaces, analytics & CRM dashboards, and brand identity systems. otis@meridianinterface.com · meridianinterface.com
Back to the site