/responsive /frontend-design /3d-web-experience /animation-patterns
 
 PROJECT BRIEF — VORA ARCHITECTS

Create a complete, production-ready website for VORA Architects, a fictional high-end architecture studio specialising in extraordinary contemporary homes shaped by nature.

The website must feel like a real award-winning architecture website: sophisticated, editorial, immersive and highly visual. It must not look like a generic AI-generated website or a conventional corporate template.

Use cinematic blue-hour, overcast or early-evening lighting. The landscapes may feel dramatic, but the homes must remain warm and comfortable.

The images must look like authentic high-end architectural photography, not concept art.

Use realistic construction details, believable scale, natural material imperfections, coherent window geometry and physically plausible structures.

Avoid:

Surreal or impossible building shapes

Warped windows

Impossible cantilevers

Duplicated plants

Overly perfect surfaces

Excessive vegetation

Obvious AI artefacts

Unrealistically empty interiors

Buildings that look like science-fiction concepts

Generate a consistent image set containing:

Wide cinematic exterior images

Close-up material and facade details

Interior views with warm ambient lighting

Elevated establishing shots

Landscape-oriented fullscreen images suitable for desktop hero sections

SITE STRUCTURE

Create four functional pages:

Home

Projects

About

Contact

Use persistent minimalist navigation with the VORA logo on the left and Home, Projects, About and Contact on the right.

The navigation should be transparent over imagery and transition into a solid light or dark version when required for readability.

Place the navigation inside a subtly rounded container with an approximately 8px radius, delicate border and soft shadow when it appears over light content.

HOME PAGE

The homepage is the priority. Spend most of the creative effort here.

HERO

Create a fullscreen hero using the strongest wide image: an extraordinary curved residence integrated into a dramatic natural landscape at blue hour, with warm interior light visible through large windows.

Use an asymmetrical editorial composition.

Headline:

“Architecture,

softened.”

Supporting copy:

“We create sculptural homes shaped by landscape, light and the lives lived within them.”

Add a restrained “Explore our projects” link.

Place the hero image inside a large architectural curved mask or softly rounded frame rather than a standard hard-edged rectangle.

HERO INTERACTION

As the user begins scrolling, smoothly expand the masked image until it fills the entire viewport.

The headline and navigation should move with subtle parallax and fade away.

The transition must feel cinematic, smooth and premium.

INTRODUCTION

Create a minimal editorial statement section with oversized typography:

“Extraordinary homes should feel as natural as the landscapes that hold them.”

Add a short paragraph explaining that VORA designs one-of-a-kind residences where progressive architecture meets warmth, comfort and nature.

Keep this section spacious and visually simple.

SCROLL-DRIVEN FEATURE — “SHAPED BY PLACE”

This should be the main showpiece of the website.

Create a long, pinned fullscreen section controlled by vertical scrolling. Do not hijack or disable the user’s natural scrolling.

While the section remains pinned, transition through four architectural projects:

01 — Forest Fold

A pale sculptural residence with a flowing shell-like roof hidden within a dense green forest.

02 — Tide House

A warm timber-and-bronze curved home positioned above a dramatic coastline.

03 — Stillwater

A dark, intimate lakeside retreat with wide openings framing mountains and water.

04 — Urban Canopy

A sophisticated curved residential building integrated into a quiet green city environment.

For each project:

Use a fullscreen cinematic image

Apply subtle image scaling and parallax

Transition between images using an elegant curved architectural mask or soft vertical reveal

Keep the project number, name, location and short description fixed in a minimal corner layout

Include a slim vertical progress indicator showing 01–04

Use smooth crossfades without flashy effects

Apply subtle rounded corners when images are not filling the complete viewport

The sequence should feel like moving through a curated architectural film.

FEATURED PROJECT

Create a split editorial section featuring one signature residence.

Use:

One large exterior image

One close-up facade image

One warm interior detail

Project:

“Forest Fold”

Oslo, Norway — Private Residence

Description:

“A continuous concrete shell bends around the existing trees, creating a home that feels protected, open and inseparable from the forest.”

Include a “View project” link.

Use approximately 8px corner radiuses on the images and a very subtle shadow where images visually overlap.

PHILOSOPHY

Create a section titled:

“Built around life.”

Use three short principles:

Shaped by place

Designed for feeling

Made to endure

Do not place these inside three generic identical cards. Create a more editorial composition using typography, spacing and subtle dividing lines.

Combine the text with a slowly moving architectural detail image showing curved timber, bronze or concrete.

FINAL CTA

Use another immersive full-width evening image with warm light visible inside the home.

Headline:

“Let’s create somewhere extraordinary.”

Button:

“Start a project”

Use a refined button with an 8–10px radius, delicate border and soft hover shadow.

Include a minimal footer with studio locations, email, Instagram and copyright information.

PROJECTS PAGE

Create a sophisticated editorial project index.

Show 6–8 fictional residential projects using a consistent image collection.

Use a large staggered grid with varying image proportions rather than equal generic cards.

Each image should reveal the project name, location and year on hover.

Include subtle filtering options:

All

Forest

Coast

Mountain

Urban

Use tasteful image parallax and smooth page transitions.

Keep the page visually led with very little copy.

Use consistent 8px corner radiuses on project images. Hover states may add a subtle shadow and a small amount of elevation, but the effect must remain elegant and restrained.

ABOUT PAGE

Keep this page concise.

Include:

A strong architectural or studio image

The headline “We design homes that belong.”

A short introduction to VORA’s philosophy

A restrained process section: Listen, Shape, Refine, Build

A small team section with believable names and roles

A final contact link

Do not make this page overly long.

CONTACT PAGE

The desktop contact page must be locked to exactly one viewport height with no vertical scrolling.

Use one dramatic fullscreen architectural background image at dusk with a dark overlay.

Place a refined contact form above it.

The form should include:

Name

Email

Project location

Project type

Estimated budget with selectable ranges

Desired timeline

Services required with checkboxes

Short project description

Submit button labelled “Begin the conversation”

Present the form cleanly inside a sophisticated interface container with:

Approximately 8–10px border radius

A subtle translucent or warm off-white surface

Delicate border

Soft, diffused shadow

Generous spacing

Clear visual hierarchy

Do not make it look like a generic white contact card.

Inputs, selection controls and buttons should use consistent 5–8px radiuses and polished macOS-inspired interaction states.

Ensure the layout remains usable and responsive on smaller screens. Allow mobile scrolling only if required to keep every form field accessible.

INTERACTIONS AND MOTION

Use premium, restrained motion throughout:

Smooth scrolling

GSAP ScrollTrigger or an equivalent performant animation system

Gentle image parallax

Refined text reveals

Curved mask transitions

Smooth page transitions

Subtle hover states

Small depth and shadow changes on interaction

Respect prefers-reduced-motion

Motion should support the architecture and never distract from it.

TECHNICAL REQUIREMENTS

Build a fully functional responsive React website with working navigation and routes for all four pages.

Use reusable components and a consistent design system.

Create global design tokens for:

Colours

Typography

Spacing

Border radius

Borders

Shadows

Transitions

Use 8px as the primary interface border radius to maintain consistency.

The contact form should validate required fields and display a polished success state.

Optimise generated images and animations for performance.

Prevent layout shifts and ensure the website works across desktop, tablet and mobile.

Use semantic HTML, strong contrast, keyboard-accessible navigation and appropriate alternative text.

All copy should be final, believable and written specifically for VORA Architects. Do not use lorem ipsum or unfinished placeholder content.

The final result should feel custom art-directed, calm, warm and expensive — a digital architecture experience rather than a standard business website.

GOAL

Present VORA as a world-class architecture studio and make potential clients want to explore its work and enquire about a private residential project.

TARGET AUDIENCE

Affluent international clients looking to build a unique luxury home in an exceptional natural location.

CORE CREATIVE DIRECTION

The central design idea is:

“Architecture, softened.”

VORA creates warm, liveable homes using sculptural curves, flowing rooflines, rounded openings and organic forms rather than harsh rectangular boxes. The architecture should feel progressive and slightly futuristic, but always structurally believable, buildable and human.

Think of the ambition and visual confidence of leading Scandinavian architecture studios such as BIG, combined with the intimacy and warmth of a private home.

Create a strong visual identity that remains consistent across every page.

VISUAL REFERENCE — SOLARA VILLA

If accessible within your system, use Sticklight’s “Solara Villa” project as an additional source of inspiration for its premium art direction, immersive imagery, typography, composition and refined motion.

Do not copy the project, its name, content, exact layout, assets or branding. Reinterpret its strongest qualities within VORA’s own distinct visual identity, organic architectural language and warmer, nature-focused aesthetic.

BRAND

Name: VORA Architects

Tagline: Architecture, softened.

Create a simple, minimalist logo mark inspired by the curved silhouette of a house or roof. It should feel architectural and recognisable without being overly literal.

Combine the symbol with a refined uppercase VORA wordmark.

VISUAL SYSTEM

Use a restrained palette:

Warm off-white: #F2F0EA

Deep charcoal: #171715

Natural oak and muted bronze: #A36C3D

Soft concrete grey

Dark moss green: #55604A

Typography should be clean, contemporary and editorial. Use a modern grotesk-style sans serif with oversized headlines, carefully controlled line breaks and generous negative space.

The interface should have the refined softness of Apple’s macOS design language.

Use a consistent, subtle border radius throughout the interface:

Approximately 5–10px on buttons, inputs, menus, image containers and interactive elements

Use 8px as the primary default radius

Corners should feel softly rounded and polished, never overly pill-shaped

Larger architectural image masks may use more pronounced custom curves when appropriate

Add subtle, premium shadows to floating navigation elements, forms, dropdowns, buttons and selected content containers. Shadows must be soft, diffused and realistic, with low opacity. Avoid heavy black drop shadows.

Use delicate borders, slight layering and restrained depth to create a polished interface inspired by Apple products. The result should feel tactile and premium without becoming glossy or overly decorative.

Avoid:

Generic card-based layouts

Obvious templates

Bright gradients

Excessive pill-shaped elements

Glassmorphism everywhere

Fake statistics

Stock-photo aesthetics

Decorative elements without purpose

Excessive text

Generic AI marketing copy

Large cartoon-like corner radiuses

Heavy or dramatic shadows

IMAGERY

The images are the most important part of the entire website.

Use the attached images only as references for architecture, atmosphere, framing, materials and lighting.

Do not simply place a mixture of unrelated reference images throughout the website. Instead, generate a new, coherent collection of architectural images that convincingly appear to come from the same studio and photography campaign.

All projects should share a recognisable architectural language:

Flowing and curved forms

Sculptural rooflines

Rounded openings

White or pale mineral concrete

Warm timber or bronze cladding

Large areas of realistic architectural glass

Dark natural stone

Architecture integrated into forests, mountains, lakesides and coastlines

Subtle vegetation incorporated into the buildings

Warm amber interior lighting that makes the homes feel inhabited and inviting