Residential Design Pre-Launch Website Template

Quick summary

Shoreform is a single-page waitlist template for a boutique coastal architecture studio. It pairs a hand-drawn animated hero with a 60/40 asymmetric grid, scrolling project confessions, a looping on-site video, and a "Reserve Your Site Visit" form. Heavy charcoal structure meets iridescent prismatic light at every turn.

Who this template is for

This template is built for design-forward practices that lead with a strong creative identity. It suits founders who want visitors to feel the weight of their work before reading a single word of copy.

• Boutique residential architecture studios launching a direct-to-client program
• Coastal developers and designers building a waitlist for a limited-intake season
• Design-obsessed founders who want a creator spotlight page, not a portfolio grid

What problem this template solves

Most architecture practice pages feel like filtered galleries. They show work without telling the story behind it. Shoreform fixes that by putting the founding architect's voice at the center of every scroll section.

• Visitors leave portfolio sites without feeling connected to the designer's point of view
• Generic contact forms fail to communicate scarcity or exclusivity for high-intent clients
• A flat grid cannot carry the mythology that high-value residential clients need before they commit

What you get with this template

You get a fully structured, single-page beach house landing page that combines cinematic visuals with intimate narration and a conversion-ready waitlist form. Every section works together to build trust and urgency before the visitor reaches the call to action.

• An animated SVG hero that draws a brutalist beach house stroke by stroke, then pulses cyan along every edge before the founder name sets in oversized type
• Three project reveal sections using a 60/40 asymmetric grid, with large bleed imagery on the wide column and first-person architect narration on the narrow column
• A waitlist form anchored in the 40-column on desktop and pinned to the bottom bar on mobile, complete with a coast preference toggle and a live slot counter

Feature list

This template is built with a high level of animation and interactivity. Each feature below is grounded in what the brief specifies.

Animated SVG Hero Illustration

A hand-drawn brutalist beach house assembles itself stroke by stroke on load. Concrete slabs, a descending staircase, and palm fronds sketch into place against a shifting iridescent gradient. After the drawing completes, a single cyan pulse fires along every edge before the founder name appears.

Asymmetric 60/40 Project Grid

The wide column holds one project at a time, enormous and bleeding off the frame edge. The narrow column carries the designer's first-person narration for that house. Three project sections alternate between overwhelming image and intimate text, building the mythology of a single creative voice.

Scarcity-Driven Waitlist Form

The form reads "We take six houses a year." above the input fields. A live counter shows remaining consultation slots. Visitors enter their email, select a preferred coast from a toggle (Atlantic, Pacific, or Gulf), and describe their site in one sentence.

Looping On-Site Video Section

A short cinematic loop shows the founding architect on-site in a hard hat and linen shirt, pointing at formwork against an ocean horizon. It plays mid-scroll between project reveals to break the reading rhythm and ground the page in physical reality.

GSAP ScrollTrigger Reveal System

Project sections and narration blocks animate into view as the visitor scrolls. Reveals are tied to scroll position using GSAP ScrollTrigger, giving the page a cinematic pacing that matches the weight of the work.

Reactive Cyan Bioluminescence

Cyan (#00F0FF) appears only on hover states and loading animations. It fires on every interactive edge as if disturbed by a fingertip. This restraint keeps the palette feeling intentional rather than decorative.

Page sections overview

Design & branding system

The visual identity is Bold Brutalist filtered through an iridescent color system. Charcoal dominates the structural and typographic layer. Pearl washes across negative space. Lilac surfaces as image overlays. Cyan fires only on interaction.

• Color palette: deep formwork charcoal (#1C1C1E), shifting pearl (#E8DAF0), wet-sand holographic lilac (#B4A0C8), and reactive accent cyan (#00F0FF)
• Typography: Fraunces display serif for headlines and oversized founder name, DM Sans grotesque for all body and narration copy
• Visual style: oil-slick iridescence against heavy industrial darkness, architectural-section drawing meets graphic novel line weight

Mobile & speed optimization

The template is built desktop-first to serve a design-obsessed audience. On mobile, the layout adapts the 60/40 grid to a single-column stacked flow without losing the visual hierarchy.

• The waitlist form moves to a fixed bottom bar on mobile so the call to action is always one tap away
• Static content uses server components while animations and interactive elements use client components, keeping the heaviest assets out of the initial render
• CSS iridescent gradient shifts and GSAP animations are scoped to client-side components only

How this template helps you convert

Shoreform is engineered around scarcity and creative trust. Every scroll section earns the click before the visitor ever sees the form.

1. The animated hero and first-person project narration build emotional investment in the architect's identity before any commercial message appears, making the waitlist feel like access rather than a sign-up.
2. The live slot counter and "We take six houses a year" copy create genuine scarcity that shortens the decision window for high-intent visitors who already know they want this kind of work.
3. The coast preference toggle and one-sentence site description field make the form feel like a curated intake, not a generic lead capture, which increases the perceived value of submitting.

Other information about this template

This template is designed for practices ready to position their studio as a singular creative vision rather than a service menu. A few additional details worth knowing before you build with it.

• The template ships with Fraunces and DM Sans as the paired typeface system, both available via Google Fonts
• The iridescent gradient system uses CSS custom properties, making palette adjustments straightforward without rewriting animation logic
• The press and recognition strip is designed for publication logos and award marks, supporting the social proof layer for studios with existing editorial coverage
• The footer follows a Vercel-style horizontal ultra-minimal pattern, keeping the page exit clean and on-brand
• The template is suited to English-language, US-coastal positioning with Atlantic, Pacific, and Gulf as the default coast toggle options, though the toggle labels can be edited to suit other geographies

Show more