Web Pages Hard
Architecture Firm
A premium architecture firm website with full-bleed project photography, an editorial horizontal scroll gallery, awards section, and a minimal contact form.
Open in Lab
MCP
gsap scrolltrigger lenis css
Targets: JS HTML
Code
/* โโ Reset & Base โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--off-white: #f5f3ee;
--dark: #0a0a0a;
--gold: #c9a96e;
--muted: #6b6b6b;
--border: rgba(10, 10, 10, 0.1);
--font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
--font-sans: "Inter", system-ui, -apple-system, sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--off-white);
color: var(--dark);
font-family: var(--font-sans);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* โโ Nav โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 56px;
background: var(--off-white);
border-bottom: 1px solid var(--border);
}
.nav-brand {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--dark);
text-decoration: none;
}
.nav-links {
display: flex;
align-items: center;
gap: 40px;
list-style: none;
}
.nav-links a {
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--dark);
}
/* โโ Hero โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.hero {
height: 100vh;
min-height: 600px;
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--dark);
}
.hero-image-placeholder {
position: absolute;
inset: 0;
background: linear-gradient(160deg, #1a1a14 0%, #0f0f0c 50%, #0a0a0a 100%);
}
.hero-gradient {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(10, 10, 10, 0.95) 0%,
rgba(10, 10, 10, 0.5) 40%,
rgba(10, 10, 10, 0.1) 100%
);
}
.hero-grid-lines {
position: absolute;
inset: 0;
display: flex;
justify-content: space-around;
pointer-events: none;
}
.hero-grid-lines span {
width: 1px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(201, 169, 110, 0.08) 50%,
transparent 100%
);
}
.hero-content {
position: relative;
z-index: 2;
padding: 0 56px 72px;
width: 100%;
}
.hero-established {
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 14px;
}
.hero-established::before {
content: "";
display: block;
width: 40px;
height: 1px;
background: var(--gold);
}
.hero-headline {
font-family: var(--font-serif);
font-size: clamp(2.8rem, 6vw, 5.5rem);
font-weight: 600;
line-height: 1.05;
color: var(--off-white);
letter-spacing: -0.01em;
max-width: 700px;
margin-bottom: 28px;
}
.hero-headline em {
font-style: italic;
color: var(--gold);
}
.hero-sub {
font-size: 0.9rem;
color: rgba(245, 243, 238, 0.5);
font-weight: 300;
letter-spacing: 0.06em;
}
.hero-scroll-hint {
position: absolute;
bottom: 40px;
right: 56px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(245, 243, 238, 0.3);
}
.scroll-line {
width: 1px;
height: 48px;
background: linear-gradient(to bottom, rgba(201, 169, 110, 0.5), transparent);
}
/* โโ Philosophy โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.philosophy {
padding: 120px 56px;
}
.philosophy-inner {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.philosophy-quote-wrap {
position: relative;
padding-top: 48px;
}
.philosophy-quote {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3.2vw, 2.4rem);
font-weight: 400;
font-style: italic;
line-height: 1.5;
color: var(--dark);
letter-spacing: -0.01em;
margin-bottom: 28px;
}
.philosophy-quote::before {
content: "\201C";
font-size: 6rem;
color: var(--gold);
opacity: 0.2;
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-serif);
line-height: 1;
}
.philosophy-credit {
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
/* โโ Projects โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.projects-section {
padding: 80px 0 80px 56px;
border-top: 1px solid var(--border);
}
.projects-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding-right: 56px;
margin-bottom: 40px;
}
.projects-title {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 600;
}
.projects-scroll-hint {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.75rem;
color: var(--muted);
letter-spacing: 0.08em;
}
.projects-track-wrap {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
cursor: grab;
padding-right: 56px;
padding-bottom: 8px;
scrollbar-width: none;
}
.projects-track-wrap::-webkit-scrollbar {
display: none;
}
.projects-track-wrap.dragging {
cursor: grabbing;
}
.projects-track {
display: flex;
gap: 24px;
width: max-content;
}
.project-card {
flex: 0 0 300px;
scroll-snap-align: start;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
background: #fff;
transition: transform 0.3s, box-shadow 0.3s;
}
.project-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.project-image-placeholder {
height: 240px;
background: linear-gradient(145deg, #1a1a16 0%, #0f0f0a 100%);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.project-img-lines {
position: absolute;
inset: 0;
}
.project-img-lines span {
position: absolute;
top: 50%;
left: 50%;
height: 1px;
width: var(--len, 50%);
background: rgba(201, 169, 110, 0.25);
transform-origin: left center;
transform: rotate(var(--rot, 0deg));
}
.project-info {
padding: 20px;
}
.project-meta-row {
display: flex;
gap: 12px;
margin-bottom: 8px;
}
.project-year {
font-size: 0.75rem;
color: var(--gold);
font-weight: 500;
}
.project-tag {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.project-name {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 4px;
}
.project-location {
font-size: 0.8rem;
color: var(--muted);
}
/* โโ Stats โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.stats-section {
padding: 96px 56px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.stats-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
}
.stat-item {
text-align: center;
padding: 32px 56px;
display: flex;
flex-direction: column;
gap: 12px;
}
.stat-number {
font-family: var(--font-serif);
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 600;
color: var(--dark);
line-height: 1;
letter-spacing: -0.02em;
}
.stat-number sup {
font-size: 0.45em;
color: var(--gold);
}
.stat-label {
font-size: 0.72rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
font-weight: 400;
}
.stat-divider {
width: 1px;
height: 80px;
background: var(--border);
flex-shrink: 0;
}
/* โโ Awards โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.awards-section {
padding: 96px 56px;
}
.awards-title {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 600;
margin-bottom: 40px;
}
.awards-table {
width: 100%;
}
.awards-table-head {
display: grid;
grid-template-columns: 80px 1fr 1fr;
padding: 10px 0;
border-bottom: 2px solid var(--dark);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.awards-table-body {
display: flex;
flex-direction: column;
}
.award-row {
display: grid;
grid-template-columns: 80px 1fr 1fr;
align-items: center;
padding: 18px 0;
border-bottom: 1px solid var(--border);
transition: background 0.15s;
}
.award-row:hover {
background: rgba(201, 169, 110, 0.04);
}
.award-year {
font-size: 0.82rem;
color: var(--gold);
font-weight: 500;
}
.award-name {
font-size: 0.9rem;
font-weight: 500;
}
.award-project {
font-size: 0.82rem;
color: var(--muted);
}
/* โโ Contact โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.contact-section {
padding: 96px 56px;
background: var(--dark);
color: var(--off-white);
}
.contact-inner {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
align-items: start;
}
.contact-title {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 600;
margin-bottom: 20px;
line-height: 1.2;
}
.contact-sub {
font-size: 0.9rem;
color: rgba(245, 243, 238, 0.5);
line-height: 1.75;
margin-bottom: 24px;
}
.contact-email {
font-size: 0.9rem;
color: var(--gold);
letter-spacing: 0.04em;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-input,
.form-textarea {
background: rgba(245, 243, 238, 0.05);
border: 1px solid rgba(245, 243, 238, 0.12);
border-radius: 4px;
padding: 12px 14px;
font-size: 0.9rem;
color: var(--off-white);
font-family: var(--font-sans);
outline: none;
width: 100%;
transition: border-color 0.2s;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: rgba(245, 243, 238, 0.3);
}
.form-input:focus,
.form-textarea:focus {
border-color: rgba(201, 169, 110, 0.4);
}
.form-select {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.form-textarea {
resize: vertical;
min-height: 120px;
}
.btn-submit {
align-self: flex-start;
padding: 14px 36px;
background: var(--gold);
color: var(--dark);
border: none;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
border-radius: 2px;
transition: opacity 0.2s, transform 0.2s;
}
.btn-submit:hover {
opacity: 0.85;
transform: translateY(-1px);
}
/* โโ Footer โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.footer {
padding: 32px 56px;
border-top: 1px solid var(--border);
}
.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.footer-brand {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 600;
}
.footer-offices {
display: flex;
gap: 24px;
font-size: 0.78rem;
color: var(--muted);
}
.footer-copy {
font-size: 0.78rem;
color: var(--muted);
}
/* โโ Responsive โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
@media (max-width: 768px) {
.nav {
padding: 18px 20px;
}
.nav-links {
display: none;
}
.hero-content {
padding: 0 20px 56px;
}
.philosophy {
padding: 80px 20px;
}
.projects-section {
padding: 60px 0 60px 20px;
}
.stats-inner {
flex-direction: column;
}
.stat-divider {
width: 80px;
height: 1px;
}
.awards-section,
.contact-section {
padding: 60px 20px;
}
.contact-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.footer {
padding: 24px 20px;
}
.footer-inner {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}/* โโ lgc-63-architecture-firm ยท script.js โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
/* โโ Counter Animation โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
(function initCounters() {
var statsEl = document.querySelector(".stats-section");
if (!statsEl) return;
var counters = statsEl.querySelectorAll(".stat-number[data-target]");
var started = false;
function easeOut(t) {
return 1 - Math.pow(1 - t, 3);
}
function animateCounter(el) {
var target = parseFloat(el.dataset.target) || 0;
var suffix = el.dataset.suffix || "";
var duration = 1600;
var start = null;
function tick(ts) {
if (!start) start = ts;
var progress = Math.min((ts - start) / duration, 1);
var value = easeOut(progress) * target;
el.textContent = (target % 1 === 0 ? Math.round(value) : value.toFixed(1)) + suffix;
if (progress < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
}
// Snapshot text content as targets before animating
counters.forEach(function (el) {
var text = el.firstChild ? el.firstChild.textContent.trim() : el.textContent.trim();
var num = parseFloat(text.replace(/[^\d.]/g, "")) || 0;
var suffix = text.replace(/[\d.,]/g, "").trim();
el.dataset.target = num;
el.dataset.suffix = suffix;
el.textContent = "0" + suffix;
});
var observer = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting && !started) {
started = true;
counters.forEach(animateCounter);
observer.disconnect();
}
});
},
{ threshold: 0.3 }
);
observer.observe(statsEl);
})();
/* โโ Horizontal Drag Scroll โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
(function initDragScroll() {
var container = document.querySelector(".projects-track-wrap");
if (!container) return;
var isDown = false,
startX = 0,
scrollLeft = 0;
container.addEventListener("mousedown", function (e) {
isDown = true;
container.classList.add("dragging");
startX = e.pageX - container.offsetLeft;
scrollLeft = container.scrollLeft;
e.preventDefault();
});
document.addEventListener("mouseup", function () {
if (!isDown) return;
isDown = false;
container.classList.remove("dragging");
});
document.addEventListener("mousemove", function (e) {
if (!isDown) return;
container.scrollLeft = scrollLeft - (e.pageX - container.offsetLeft - startX) * 1.4;
});
container.addEventListener(
"touchstart",
function (e) {
startX = e.touches[0].pageX;
scrollLeft = container.scrollLeft;
},
{ passive: true }
);
container.addEventListener(
"touchmove",
function (e) {
container.scrollLeft = scrollLeft + (startX - e.touches[0].pageX);
},
{ passive: true }
);
})();
/* โโ Contact Form โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
(function initForm() {
var form = document.querySelector(".contact-form");
if (!form) return;
form.addEventListener("submit", function (e) {
e.preventDefault();
var btn = form.querySelector(".btn-submit");
if (btn) {
btn.disabled = true;
btn.textContent = "Sendingโฆ";
}
setTimeout(function () {
form.innerHTML =
'<p style="color:#c9a96e;font-size:0.9rem;padding:16px 0;">Thank you โ we\'ll be in touch soon.</p>';
}, 800);
});
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Studio Kato โ Architecture & Interiors</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500&family=EB+Garamond:ital,wght@1,400;1,500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script type="importmap">{"imports":{"gsap":"https://esm.sh/gsap@3.13.0","gsap/ScrollTrigger":"https://esm.sh/gsap@3.13.0/ScrollTrigger","lenis":"https://esm.sh/lenis@1.1.13/dist/lenis.mjs"}}</script>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<a href="#" class="nav-brand">Studio Kato</a>
<ul class="nav-links">
<li><a href="#">Work</a></li>
<li><a href="#">Studio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-image-placeholder">
<div class="hero-gradient"></div>
<div class="hero-grid-lines">
<span></span><span></span><span></span><span></span><span></span>
</div>
</div>
<div class="hero-content">
<div class="hero-established">Est. 1994</div>
<h1 class="hero-headline">We build spaces<br /><em>that endure.</em></h1>
<p class="hero-sub">Architecture, Interiors & Urban Design<br />Tokyo โ London โ Sรฃo Paulo</p>
</div>
<div class="hero-scroll-hint">
<span>Scroll</span>
<div class="scroll-line"></div>
</div>
</section>
<!-- PHILOSOPHY -->
<section class="philosophy">
<div class="philosophy-inner">
<figure class="philosophy-quote-wrap">
<blockquote class="philosophy-quote">
"Architecture is not the design of buildingsโit is the design of how people move through the world. Every threshold, every material, every shaft of light is a decision about human experience."
</blockquote>
<figcaption class="philosophy-credit">โ Haruki Kato, Principal Architect</figcaption>
</figure>
</div>
</section>
<!-- PROJECTS HORIZONTAL SCROLL -->
<section class="projects-section">
<div class="projects-header">
<h2 class="projects-title">Selected Work</h2>
<div class="projects-scroll-hint">
<span>Drag to explore</span>
<svg width="40" height="12" viewBox="0 0 40 12" fill="none">
<path d="M0 6h38M32 1l6 5-6 5" stroke="currentColor" stroke-width="1.2"/>
</svg>
</div>
</div>
<div class="projects-track-wrap">
<div class="projects-track">
<article class="project-card">
<div class="project-image-placeholder">
<div class="project-img-lines">
<span style="--rot:30deg; --len:60%"></span>
<span style="--rot:60deg; --len:40%"></span>
<span style="--rot:15deg; --len:80%"></span>
</div>
</div>
<div class="project-info">
<div class="project-meta-row">
<span class="project-year">2023</span>
<span class="project-tag">Cultural</span>
</div>
<h3 class="project-name">Naka Cultural Centre</h3>
<p class="project-location">Osaka, Japan</p>
</div>
</article>
<article class="project-card">
<div class="project-image-placeholder">
<div class="project-img-lines">
<span style="--rot:75deg; --len:50%"></span>
<span style="--rot:45deg; --len:70%"></span>
<span style="--rot:90deg; --len:35%"></span>
</div>
</div>
<div class="project-info">
<div class="project-meta-row">
<span class="project-year">2022</span>
<span class="project-tag">Residential</span>
</div>
<h3 class="project-name">Thornwood House</h3>
<p class="project-location">Surrey, United Kingdom</p>
</div>
</article>
<article class="project-card">
<div class="project-image-placeholder">
<div class="project-img-lines">
<span style="--rot:20deg; --len:65%"></span>
<span style="--rot:55deg; --len:45%"></span>
<span style="--rot:80deg; --len:75%"></span>
</div>
</div>
<div class="project-info">
<div class="project-meta-row">
<span class="project-year">2021</span>
<span class="project-tag">Commercial</span>
</div>
<h3 class="project-name">Torre Pinheiros</h3>
<p class="project-location">Sรฃo Paulo, Brazil</p>
</div>
</article>
<article class="project-card">
<div class="project-image-placeholder">
<div class="project-img-lines">
<span style="--rot:40deg; --len:55%"></span>
<span style="--rot:10deg; --len:80%"></span>
<span style="--rot:65deg; --len:40%"></span>
</div>
</div>
<div class="project-info">
<div class="project-meta-row">
<span class="project-year">2020</span>
<span class="project-tag">Interior</span>
</div>
<h3 class="project-name">Morimoto Private Residence</h3>
<p class="project-location">Kyoto, Japan</p>
</div>
</article>
<article class="project-card">
<div class="project-image-placeholder">
<div class="project-img-lines">
<span style="--rot:50deg; --len:70%"></span>
<span style="--rot:25deg; --len:50%"></span>
<span style="--rot:85deg; --len:60%"></span>
</div>
</div>
<div class="project-info">
<div class="project-meta-row">
<span class="project-year">2019</span>
<span class="project-tag">Urban</span>
</div>
<h3 class="project-name">Aldgate Quarter Masterplan</h3>
<p class="project-location">London, United Kingdom</p>
</div>
</article>
</div>
</div>
</section>
<!-- STATS -->
<section class="stats-section">
<div class="stats-inner">
<div class="stat-item">
<span class="stat-number" data-target="1994">1994</span>
<span class="stat-label">Founded</span>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<span class="stat-number" data-target="140">140<sup>+</sup></span>
<span class="stat-label">Projects Completed</span>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<span class="stat-number" data-target="23">23</span>
<span class="stat-label">Countries</span>
</div>
</div>
</section>
<!-- AWARDS -->
<section class="awards-section">
<h2 class="awards-title">Recognition</h2>
<div class="awards-table">
<div class="awards-table-head">
<span>Year</span>
<span>Award</span>
<span>Project</span>
</div>
<div class="awards-table-body">
<div class="award-row">
<span class="award-year">2023</span>
<span class="award-name">RIBA International Prize</span>
<span class="award-project">Naka Cultural Centre</span>
</div>
<div class="award-row">
<span class="award-year">2022</span>
<span class="award-name">World Architecture Festival โ Winner</span>
<span class="award-project">Thornwood House</span>
</div>
<div class="award-row">
<span class="award-year">2021</span>
<span class="award-name">Architizer A+ Award</span>
<span class="award-project">Torre Pinheiros</span>
</div>
<div class="award-row">
<span class="award-year">2020</span>
<span class="award-name">Azure Award โ Interior</span>
<span class="award-project">Morimoto Residence</span>
</div>
<div class="award-row">
<span class="award-year">2018</span>
<span class="award-name">Pritzker Architecture Prize โ Shortlist</span>
<span class="award-project">Studio Kato</span>
</div>
<div class="award-row">
<span class="award-year">2015</span>
<span class="award-name">AIA Honor Award for Architecture</span>
<span class="award-project">Shiro Pavilion, Nara</span>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section class="contact-section">
<div class="contact-inner">
<div class="contact-text">
<h2 class="contact-title">Tell us about your project.</h2>
<p class="contact-sub">We take on a limited number of commissions each year to ensure every project receives our full attention.</p>
<p class="contact-email">hello@studiokato.com</p>
</div>
<form class="contact-form">
<div class="form-row">
<input type="text" placeholder="Your name" class="form-input" />
<input type="email" placeholder="Email address" class="form-input" />
</div>
<select class="form-input form-select">
<option value="" disabled selected>Project type</option>
<option>Residential</option>
<option>Commercial</option>
<option>Cultural / Public</option>
<option>Interior Design</option>
<option>Urban Planning</option>
</select>
<textarea class="form-input form-textarea" placeholder="Describe your vision โ scale, location, timeline, aspirationsโฆ" rows="5"></textarea>
<button type="submit" class="btn-submit">Send Enquiry</button>
</form>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="footer-inner">
<span class="footer-brand">Studio Kato</span>
<div class="footer-offices">
<span>Tokyo HQ</span>
<span>London Office</span>
<span>Sรฃo Paulo Studio</span>
</div>
<p class="footer-copy">ยฉ 2026 Studio Kato. All rights reserved.</p>
</div>
</footer>
<script type="module" src="script.js"></script>
</body>
</html>Architecture Firm
An award-worthy architecture firm website. Full-bleed imagery, horizontal scroll project gallery, editorial typography, and the restraint of a firm that lets the work speak.
Sections
- Nav โ Minimal wordmark left, links right, thin bottom border
- Hero โ Full-viewport image with overlaid studio name + year founded
- Philosophy โ Large serif quote, small descriptor text
- Projects โ Horizontal pinned scroll gallery (GSAP ScrollTrigger horizontal)
- About โ Split layout: text left, image right, counter stats
- Awards โ Clean list with year, award name, project
- Contact โ Single-field โTell us about your projectโ minimal form
Key interactions
- Horizontal project gallery pinned with GSAP
scrub - Image reveal on scroll via
clip-pathwipe - Cursor that enlarges on hover over project images (โViewโ)
- Lenis smooth scroll for the editorial pacing feel