Atelier is a luxe minimal landing page template built for craftsman architecture practices. It opens with a nine-tile parallax photo mosaic, unfolds through four cinematic full-viewport scroll acts, and closes with a single bold call to action. Every design decision reflects material restraint and careful craft, guiding serious clients toward one destination: booking a consultation.
by Rocket studio
Loading preview…
Quick summary
Atelier is a single-page portfolio landing page designed for bespoke architectural practices. It pairs a nine-tile asymmetric photo mosaic header with a slow, cinematic scroll sequence that walks visitors through site, drawings, making, and the finished home. The entire page funnels toward one call to action: a consultation booking click.
Who this template is for
This template is built for architectural studios where the work speaks for itself. It suits practices that take on a small number of highly considered projects and need a page that reflects that discipline.
Craftsman architecture studios focused on bespoke residential or hospitality projects
Boutique practices serving couples building forever homes, heritage hoteliers, and art collectors
Design-led architects who want a portfolio that earns trust before asking for a meeting
What problem this template solves
Most portfolio pages show finished rooms and move on. They do not communicate the depth of process, the weight of material decisions, or the patience a practice brings to every threshold. Prospective clients who care about craft cannot tell whether an architect will stay until the last hinge is set, or hand off the project halfway through.
Generic portfolio grids treat every project equally, removing the sense of authorship and care
Scattered calls to action dilute intent, making it unclear what the visitor should do next
A page that rushes its presentation signals that the practice rushes its work
What you get with this template
The template delivers a complete, single-page cinematic portfolio built for desktop-first browsing with graceful mobile adaptation. Every section is purposeful and sequenced to build trust before asking for action.
A nine-tile asymmetric photo mosaic hero with parallax scroll and a gold letterspaced wordmark
Four full-viewport cinematic scroll acts covering site, drawings, making, and living
A Pinterest-style masonry project grid, a studio philosophy split section, and a full-width closing call to action
Theme
Luxe Minimal
Creative direction
Cinematic Sequence
Color system
Obsidian & Gold
Style
Masonry/Pinterest
Direction
Click-Through
Page Sections
Nine-tile Parallax Mosaic Header
Cinematic Four-act Scroll Sequence
Masonry Project Grid with Hover Reveals
Layered Call to Action System
Studio Philosophy Split Section
Superhuman Extreme Minimal Footer
Related questions
Is this template suitable for a residential architecture studio?
Does this template include contact forms or booking tools?
Can I adapt the color palette and typography to my studio brand?
How many project images do I need for this template?
Is this a single-page or multi-page template?
Feature list
This template includes a focused set of high-craft interactive and visual features, each serving the single goal of converting the right client.
Nine-Tile Parallax Mosaic Header
The header fills the full viewport with nine asymmetric image tiles. Each tile shows a tightly cropped project detail rather than a complete building. Tiles shift at different speeds as the visitor scrolls, creating a sense of depth and material richness from the first second on the page.
Cinematic Four-Act Scroll Sequence
As the visitor scrolls past the mosaic, the page dissolves into a single project story told in four sequential full-viewport acts: the empty site, pencil-rendered drawings, craftsmen at work, and the finished home at blue hour. Transitions use slow crossfades, and the pacing communicates that this practice does not rush.
Masonry Project Grid with Hover Reveals
Below the cinematic sequence, projects appear in an asymmetric Pinterest-style masonry grid. Hovering over any card reveals additional information, keeping the surface clean while rewarding curiosity. Every card links toward the consultation booking page.
Studio Philosophy Split Section
A dedicated split-layout section pairs a material detail image with a block of studio philosophy text. This section grounds the practice's values in visual evidence before the visitor reaches the final call to action.
Layered Call to Action System
The primary call to action, "Start a Conversation," appears three times across the page in escalating weight: first as a quiet gold text link beneath the mosaic, then as a fixed bottom bar after the third scroll act, and finally as a full-width gold-on-black button at the close. No form fields are present on this page.
Superhuman Extreme Minimal Footer
The footer follows a Pattern 4 Superhuman Extreme Minimal layout, keeping the closing moments of the page as restrained as the opening. Nothing competes with the final call to action button above it.
Page sections overview
Section
Purpose
Photo Grid Mosaic
Opens the page with nine parallax image tiles and the gold studio wordmark
Cinematic Scroll Acts
Tells one full project story across four slow full-viewport crossfade transitions
Masonry Project Grid
Displays the portfolio in an asymmetric hover-reveal card layout
Studio Philosophy Split
Pairs studio values text with a material detail image
Closing Call to Action
Delivers the full-width gold-on-black "Start a Conversation" button
Minimal Footer
Closes the page with extreme restraint, no competing elements
Design & branding system
The visual identity is Luxe Minimal, built around an Obsidian and Gold color system. The palette is deliberately restrained, letting material weight do the communicating rather than decoration.
Obsidian black (#1A1A1A) grounds the page; warm parchment (#F5F0E8) surfaces cards and breathing space; brushed gold (#C9A96E) activates on hover states, thin ruling lines, and the wordmark
Typography pairs DM Sans for body text with Fraunces for display and serif headings, creating a contrast between clarity and warmth
Stagger reveals, slow crossfade transitions, and scroll-linked animation keep motion expressive but never distracting
Mobile & speed optimization
The template is built desktop-first to serve clients who browse on large screens, and it scales down with mobile grace so no visitor is left behind.
Native CSS smooth scroll and Intersection Observer handle all scroll-linked animation without relying on heavy third-party libraries
Parallax tile behavior, fixed call to action bar, and cinematic crossfades are all implemented with lightweight front-end techniques
Mobile layout preserves the visual hierarchy and funnel logic of the desktop experience
How this template helps you convert
The entire page is a single conversion funnel. There are no distractions, no competing destinations, and no form fields to fill out before the visitor is ready.
The cinematic scroll sequence holds attention for two or more minutes, letting visitors spend real time inside the work before any ask is made, so only genuinely interested clients reach the call to action.
The layered call to action system meets the visitor at three distinct moments of readiness, each with increasing visual weight, so the booking click feels like a natural conclusion rather than a sales push.
Other information about this template
This template is a strong fit for craftsman architecture practices that rely on visual storytelling and personal referral rather than high-volume lead generation.
The single-page structure with one outbound call to action destination keeps the experience clean and the visitor's intent clear
The Obsidian and Gold color system and Fraunces display typography are easy to remap to a studio's own wordmark and brand palette
Desktop-first design reflects the reality that high-value architecture clients tend to review portfolio work on large screens before reaching out
The template supports English-language content with a tone and format suited to United States and international luxury markets
