📌 BASALT - 건축사무소 웹사이트
🔹 프로젝트 개요
🔹 프로젝트 목적
BASALT는 레이캬비크에서 용암 벌판·검은 해변·피오르 끝자락에 집과 도서관, 파빌리온을 짓는 건축사무소입니다. 건축가는 도면과 건물로 선택받기 때문에, 사이트도 작업과 같은 절제를 따랐습니다. 굵기 하나짜리 모노스페이스 서체, 흑백 사진, 넓은 흰 여백이 전부입니다. 움직임은 첫 화면에만 둡니다. 사무소 이름이 용암 벌판 위 집 뒤에서 솟아오르고, 스크롤하면 풍경 전체가 창 하나로 접히면서 글자는 다시 지붕 뒤로 가라앉습니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
A Name Behind the House (집 뒤의 이름):
히어로 사진을 하늘과, 그 앞의 집·용암 벌판을 오려 낸 전경 두 겹으로 나눴습니다. 워드마크가 그 사이에 있어 로드 때는 지붕 뒤에서 솟아오르고, 스크롤하면 풍경 전체가 액자 창으로 줄어드는 동안 다시 아래로 숨습니다.
모든 스크롤 효과가 애니메이션 루프 하나에서 같은 값을 읽고 Lenis로 부드럽게 이어져, 히어로·티커·시차 사진이 서로 프레임을 다투지 않습니다.
Projects Read Like Drawings (도면처럼 읽히는 프로젝트):
프로젝트 목록은 이미지 격자와 번호·이름·장소·연도의 글자 목록 사이를 슬라이드 토글로 오갑니다. 목록 줄에 커서를 올리면 화살표와 함께 살짝 밀려납니다.
프로젝트 상세 6개는 큰 제목과 사양표, 짧은 글로 시작하고, 사진은 스크롤 속도의 절반으로 따라 흐릅니다.
Type in Motion (움직이는 글자):
400px 글자의 도시 이름 티커가 흐르고, 홈에서는 스크롤에 맞춰 빨라집니다. 출판 카드는 화면에 들어오며 70%에서 원래 크기로 커집니다.
장소 라벨은 호버하면 위로 밀려 ↗를 보여 주고, 바깥으로 나가는 모든 링크에 같은 화살표를 씁니다.
🔹 디자인 포인트
🔹 담당 역할