Residential Specialty Design Professional Website Template

Quick summary

Passiv is a content-led landing page template for passive house architects. It opens with an animated architectural cross-section that draws itself on screen, then guides visitors through interactive building-physics diagrams, a layered case study scroll, and floating testimonial cards before presenting a downloadable resource form. Education comes first; the ask comes after trust is earned.

Who this template is for

This template is designed for architecture practices that specialise in low-energy and passive house design. It speaks directly to the people doing the briefing, building, or commissioning.

• Self-builders who track energy modeling data and want an architect who understands their spreadsheets
• Developers seeking Passivhaus certification to strengthen planning applications
• Retrofit homeowners ready to address persistent heat loss and draughts for good

What problem this template solves

Most architecture websites lead with portfolio imagery and end with a contact form. That approach leaves technically minded clients unconvinced. Passive house clients need proof before they commit.

• Visitors leave before understanding what makes the practice different from a conventional architect
• Technical credibility is hard to communicate through photographs alone
• The gap between a curious visitor and a qualified lead stays wide when education is absent

What you get with this template

The template delivers a complete single-page layout structured around a content-first conversion path. Every section is designed to deepen understanding before requesting any contact detail.

• An animated SVG hero that draws a Passivhaus cross-section layer by layer on screen
• Three interactive building-physics diagrams covering U-values, thermal bridges, and heat balance
• A layered case study scroll, a testimonial section, and a dual-path resource download form

Feature list

This template includes a focused set of built-in features drawn from the source brief.

Animated SVG Cross-Section Header

The hero opens with a fine-line architectural drawing that builds itself on screen. Foundation, insulation layers, airtightness membrane, mechanical ventilation with heat recovery (MVHR) ducts, and triple-glazed sunlight paths each animate in sequence. Each system appears in a distinct iridescent hue, and the completed drawing shimmers faintly once the sequence finishes.

Interactive Building-Physics Diagrams

Three interactive diagrams sit in the Physics Proof section. Visitors can explore a U-value diagram, a thermal bridge visualisation, and a heat balance chart. Each diagram uses iridescent overlays to separate data layers, making complex thermal science legible without requiring prior technical knowledge.

Overlap and Layered Scroll Experience

Content planes overlap and slide beneath each other as the visitor scrolls. A thermal imaging heatmap appears from behind a construction photograph. A Passivhaus Planning Package (PHPP) energy balance diagram overlaps a window jamb detail section. The scroll rhythm moves from philosophy to physics to proof, mirroring how a passive house works: invisible systems stacked inside a beautiful shell.

Dual-Path Resource Call to Action

The primary call to action offers a downloadable Passivhaus Starter Pack: a bundled PDF containing U-value calculators, certified component suppliers, and a pre-consultation checklist. The lead form collects name, email, and project stage (dreaming, planning, or site-ready). A secondary path offers access to a gated forty-minute thermal bridge video masterclass.

Translucent Floating Testimonials

Client testimonials appear on translucent cards that float above full-bleed interior photography. Each card can carry project-specific metrics and energy performance numbers, grounding social proof in verifiable data rather than generic praise.

Atelier Studio Typography System

Headings use Fraunces, a high-contrast editorial serif that carries intellectual weight. Body text and interface elements use DM Sans, a clean geometric sans-serif. The pairing creates a tone of technical precision without feeling cold or purely corporate.

Page sections overview

Design & branding system

The visual identity follows an Atelier Studio aesthetic where technical precision meets iridescent light. The palette is inspired by light refracting through a low-emissivity (low-e) glass coating.

• Deep graphite (#1C1C1E) anchors the page as the primary background ground; pearl white (#F0EDE8) lifts content planes above it
• Iridescent lilac (#C4B5E0) activates on hover states and section dividers; holographic green (#88C9A1) highlights energy performance callouts
• Fraunces sets editorial headings with high contrast; DM Sans handles all body copy and interface labels for clarity at any size

Mobile & speed optimization

The template is built desktop-first, matching the working habits of energy modeling clients who need room to read detailed diagrams. Performance is kept tight through specific technical choices.

• All animations use GPU-accelerated transforms only, keeping scroll-linked parallax and iridescent shimmer smooth without taxing the CPU
• Scroll triggers use the Intersection Observer application programming interface (API) so animations fire only when elements enter the viewport, avoiding unnecessary rendering work

How this template helps you convert

The conversion path is intentional and sequenced. Value is demonstrated well before any form appears, so the click feels earned rather than pressured.

1. Three interactive diagrams and a full case study scroll appear before the first form, so visitors arrive at the call to action already educated and trusting
2. The dual-path form lowers the barrier to entry: visitors choose between a downloadable PDF pack or a video masterclass based on where they are in their project journey
3. The project stage selector (dreaming, planning, or site-ready) qualifies each lead at the point of submission, giving the practice useful context for every follow-up conversation

Other information about this template

This template sits at the intersection of residential specialty design and architecture, built specifically for the passive house niche. A few additional details worth noting:

• The page is localised for English UK audiences, uses metric units throughout (U-values in W/m²K, energy use in kWh/m²/yr), and is priced in GBP where relevant
• The template style is Overlap/Layered, meaning content planes physically stack and reveal as the visitor scrolls, reinforcing the building-science narrative at a structural level
• The color system is classified as AI Iridescent, a palette that shifts and shimmers to reflect the interference patterns of specialist glazing coatings
• The header concept is an Animated Illustration, not a photograph or video, making it a rare choice that communicates building physics faster than any image could
• The creative direction is Immersive Visual, and the landing-page direction is Content/Resource, prioritising education and downloadable assets over direct service enquiry
• The footer uses a horizontal flow pattern that keeps the close of the page clean and consistent with the studio aesthetic

Show more