The Vertical Breath

완성 코드에서 복원한 제작 단계

아래 지시는 원본 프롬프트가 아니라 예제 프로젝트의 완성 코드 구조를 바탕으로 다시 작성한 재현 프롬프트입니다.

1. 01

   실루엣을 만드는 건축 규칙 정의하기

   복잡한 타워를 외부 모델 없이 반복 가능한 수치와 배열로 설명합니다.

   입력

   • components/BurjKhalifaData.ts

   출력

   • components/Foundation.tsx
   • components/Core.tsx

   재현 프롬프트

   BurjKhalifaData.ts에 전체 높이, 코어와 첨탑 높이, 세 날개의 120도 축, 기본 날개 길이와 폭을 정의해줘. Foundation은 매트와 파일 군을 만들고, Core는 같은 치수를 읽어 육각 중심부와 Y자 날개가 수직으로 자라게 해줘.

   확인

   기본 날개 치수를 바꾸면 기초 크기와 코어의 세 날개 비례가 함께 달라집니다.

2. 02

   세트백을 티어 데이터로 생성하기

   층마다 임의로 메시를 배치하지 않고 세 날개의 서로 다른 후퇴 시점이 나선형 윤곽을 만들게 합니다.

   입력

   • components/BurjKhalifaData.ts

   출력

   • components/Setbacks.tsx
   • components/Cladding.tsx
   • components/Illumination.tsx

   재현 프롬프트

   24개의 tier 높이와 100, 85, 70, 55, 40, 25퍼센트 면적 레벨을 사용해줘. A, B, C 날개의 세트백 높이를 서로 다르게 계산하고 lower, mid, upper phase로 나눈 뒤, 각 컴포넌트가 자기 phase의 티어만 읽어 지연된 smoothstep 스케일로 조립하게 해줘. 중부와 상부에는 유리, 멀리언과 야간 창문 재질을 추가해줘.

   확인

   높이가 올라갈수록 C, B, A 날개가 서로 다른 시점에 짧아지고 각 티어 내부 폭은 일정하게 유지됩니다.

3. 03

   첨탑으로 건설 과정 닫기

   마지막 구간을 전체 실루엣이 완성되는 분명한 절정으로 만듭니다.

   입력

   • components/BurjKhalifaData.ts

   출력

   • components/Spire.tsx

   재현 프롬프트

   SPIRE phase에서 여러 원통 세그먼트와 안테나를 위에서 제자리로 내려오게 하고 스케일을 빠르게 키워줘. 완성 뒤에는 세 개의 항공 비콘이 서로 다른 위상으로 점멸하고 밤의 진행률만큼 발광이 강해지게 해줘.

   확인

   마지막 14.3퍼센트 스크롤 구간에서 첨탑이 결합되고 세 비콘의 점멸 시점이 서로 어긋납니다.

4. 04

   여섯 공정을 하나의 수직 카메라 동선으로 묶기

   높은 건물을 한 화면에 축소해 두는 대신 현재 공정과 완성된 전체 형태를 차례로 보여줍니다.

   입력

   • components/Foundation.tsx
   • components/Core.tsx
   • components/Setbacks.tsx
   • components/Cladding.tsx
   • components/Illumination.tsx
   • components/Spire.tsx

   출력

   • components/Building.tsx
   • components/Experience.tsx

   재현 프롬프트

   여섯 공정 컴포넌트를 Building의 한 group 안에 높이 순서로 조립해줘. 스크롤 85.7퍼센트까지는 그룹을 아래로 이동하면서 90도 회전시키고, 마지막에는 전체 높이의 중앙으로 되돌려줘. Experience의 직교 카메라는 공정 중에는 천천히 줌아웃하고 첨탑 구간에서 전체 실루엣까지 빠르게 물러나게 해줘.

   확인

   공정 중에는 현재 높이가 화면 중심을 지나고, 마지막에는 기초부터 첨탑까지 한 프레임에 들어옵니다.

5. 05

   스크롤에 하루의 빛 연결하기

   건물의 성장과 시간의 경과를 같은 변화로 느끼게 합니다.

   입력

   • hooks/useDayNight.ts
   • hooks/useTheme.ts
   • components/Building.tsx

   출력

   • components/DayNightCycle.tsx
   • components/Experience.tsx

   재현 프롬프트

   scroll.offset을 아침, 낮, 오후, 석양, 해질녘, 밤 구간으로 나누고 DayNightCycle에서 하늘색과 태양 및 달의 위치, 주변광을 보간해줘. getDayNightState의 nightIntensity와 windowGlowIntensity는 건물 재질과 보조 조명에 공유하고, useTheme에는 같은 진행률을 보내 HTML 카피의 색도 배경에 맞게 바꿔줘.

   확인

   스크롤 후반으로 갈수록 하늘이 어두워지고 달과 창문 조명이 나타나며 오버레이의 대비도 함께 바뀝니다.

6. 06

   3D 공정 위에 잡지형 해설 배치하기

   형태 변화만으로 알기 어려운 공정의 의미를 읽을 수 있는 이야기로 보완합니다.

   입력

   • components/TextReveal.tsx
   • components/ImageReveal.tsx

   출력

   • components/Overlay.tsx

   재현 프롬프트

   Overlay에 Foundation, Core, Setbacks, Cladding, Illumination, Spire의 제목, 설명, 기술 메모, 측정값과 로컬 이미지를 배열로 정의해줘. 각 섹션은 좌우를 번갈아 배치하고 IntersectionObserver 기반 TextReveal과 ImageReveal로 화면에 들어올 때만 드러나게 해줘. Illumination에는 두 페이지 높이를 배정해 밤 전환을 충분히 보여줘.

   확인

   여섯 설명이 1, 1, 1, 1, 2, 1 화면 높이로 이어지고 텍스트와 이미지가 해당 구간에 들어올 때 나타납니다.

7. 07

   캔버스와 출판 레이어 결합하기

   3D 데모를 한 편의 건축 저널처럼 읽히는 완성된 페이지로 만듭니다.

   입력

   • components/Experience.tsx
   • components/Overlay.tsx

   출력

   • App.tsx

   재현 프롬프트

   App의 orthographic Canvas 안에 7페이지 ScrollControls를 만들고 Experience와 Scroll html의 Overlay를 같은 진행률 아래 배치해줘. 높은 luminanceThreshold로 밝은 영역의 Bloom을 제한하고, 캔버스 밖에는 프로젝트 제목과 호수 정보, 인용문이 담긴 고정 헤더와 푸터를 올려줘.

   확인

   한 번의 스크롤로 3D 공정과 해당 해설이 함께 진행되고 헤더와 푸터는 화면 가장자리에 고정됩니다.