Architect Profile Pre-Launch Website Template

Quick summary

Atelier is a single-page architect portfolio template built around horizontal scroll, cinematic motion, and a restrained iridescent color system. It is designed for practices that treat every commission as singular, and want a digital presence that communicates that gravity before the full archive is even live.

Who this template is for

This template is built for architectural practices with a distinctive point of view and a clientele that expects an experience, not a brochure. It suits studios preparing to launch a full portfolio while generating early interest through a waitlist.

• Architecture studios commissioning pavilions, gallery-homes, and civic spaces for cultural institutions, private collectors, and municipalities
• Practices wanting a coming-soon presence that feels considered, not placeholder
• Studios whose work depends on visual authority and spatial storytelling to attract the right collaborators and press

What problem this template solves

Most portfolio templates present architecture as a grid of images. That format flattens spatial work into thumbnails and gives every practice the same visual weight. Atelier solves a different problem: how do you make a digital page feel like entering a space?

• Architects lose high-value commissions when their online presence fails to communicate the intelligence behind the work
• A generic coming-soon page wastes the window before launch, missing the chance to qualify and collect serious leads
• Static layouts cannot convey the progression of a practice, its material thinking, or the ambition of individual projects

What you get with this template

You get a complete single-page layout built for desktop-first horizontal scroll, with a carefully sequenced set of sections that move a visitor from first impression through portfolio, process, and waitlist signup. Every section is built to feel intentional.

• A full-screen video hero with a cursor-reactive iridescent overlay and a letter-by-letter studio name reveal
• Four chronological portfolio panels using parallax layers, plus a process interstitial showing sketch, model, and built work
• A dual-path email capture panel with a social proof counter, a "Reserve Your View" call to action, and a separate "Follow the Build" toggle for process-focused leads

Feature list

This template includes the following built-in features, each designed to serve the specific needs of an architecture studio preparing for a major portfolio launch.

Cursor-Reactive Iridescent Hero

The hero section plays a full-screen, golden-hour architectural walkthrough video. As the visitor moves their cursor, a faint iridescent sheen shifts across the footage, making the page feel responsive before any scrolling begins. A reduced-motion fallback is included for users who prefer less animation.

Horizontal Scroll Portfolio Gallery

Four project panels are arranged chronologically in a horizontal scroll layout powered by GSAP. Each panel occupies one full viewport width. Parallax layers shift at different speeds within each panel, adding depth. The scroll progression itself communicates how the practice has grown in scale and ambition over time.

Process Interstitial with Lead Qualification

Between the portfolio panels and the waitlist, a triptych panel dissolves through three states: a hand sketch, a three-dimensional model, and a drone photograph of the completed work. A "Follow the Build" toggle captures emails from visitors interested in process, separating them from visitors who want the finished portfolio, giving studios two distinct lead groups from one page.

Dual-Path Waitlist Capture

The final panel is a dark graphite field with a single-line statement and a minimal email input. The input field uses a teal underline that shifts to iridescent pink on focus. A live counter shows how many visitors have already reserved their view, providing quiet social proof without a countdown timer or launch date.

Scroll-Linked Progress Indicator

Teal navigation markers and a scroll-progress indicator track the visitor's position as they move horizontally through the page. This gives the experience a sense of spatial orientation, telling visitors where they are in the portfolio journey without interrupting the visual flow.

Letter-by-Letter Title Reveal

The studio name appears one character at a time, timed to the camera's first turn in the hero video. This animation uses thin, wide-tracked sans-serif typography and sets the pacing for the rest of the page, signaling that every detail is deliberate.

Page sections overview

Design & branding system

The design follows an Atelier Studio theme expressed through an AI Iridescent color system. The palette is built around four values, each assigned a specific role so that color becomes functional, not decorative.

• Deep graphite (#1A1A2E) anchors all backgrounds; pearlescent lilac (#C3B1E1) washes across section transitions; shifting holographic teal (#5EEAD4) marks navigation and scroll-progress elements
• Soft prismatic pink (#F0A6CA) appears exclusively on hover states and cursor trails, meaning color rewards interaction rather than competing for attention at rest
• Typography uses DM Sans in thin tracked weights for the studio name, Fraunces serif for project titles, and JetBrains Mono for counters and data elements, creating a clear typographic hierarchy across three distinct voices

Mobile & speed optimization

The template is built desktop-first, with the horizontal scroll experience designed for larger screens where the spatial analogy of a gallery walk reads most clearly. A vertical fallback layout is included for mobile visitors.

• Animations use GPU-accelerated transforms only, keeping the visual effects as light as possible on the rendering layer
• The video hero includes a reduced-motion fallback, so visitors with system-level motion preferences still receive a coherent experience
• The horizontal scroll is powered by GSAP, with the parallax and cursor-reactive layers scoped to desktop breakpoints to avoid unnecessary processing on smaller devices

How this template helps you convert

The template is structured to move visitors through a clear emotional arc, from awe to curiosity to commitment, without relying on aggressive calls to action or promotional language.

1. The cursor-reactive hero and letter reveal create immediate engagement before the visitor has read a single word, establishing the studio's spatial intelligence through the interface itself.
2. The chronological portfolio sequence builds a narrative of a practice evolving, so by the time a visitor reaches the waitlist panel, they have experienced the work rather than merely seen it.
3. The dual-path email capture qualifies leads at the point of signup, separating visitors who want the finished archive from those who want ongoing process updates, giving the studio two distinct audience groups to communicate with after launch.

Other information about this template

This template is categorized under Personal and Resume, with a specific focus on the Architect Profile subcategory and the Architect Portfolio Website niche. It is designed as a coming-soon landing page, not a full live portfolio, making it ideal for studios in the pre-launch phase of a new digital presence.

• The template style is Horizontal Scroll, and the creative direction is Immersive Visual, meaning the layout is built around motion, depth, and spatial sequence rather than conventional page structure
• All copy in the template is placeholder text intended to be replaced with real project titles, studio descriptions, and waitlist messaging specific to the practice
• The footer follows a minimal pattern with social icons and copyright only, keeping the close of the page as quiet and considered as the rest of the layout

Show more