MengTo/kage

Kage

교토 산속 사찰을 배경으로 한 5개 챕터로 구성된 인터랙티브 야간 산책으로, Three.js로 실시간 렌더링되고 시네마틱한 생성 이미지가 겹겹이 쌓인 작품입니다.

하는 일

• 페이지 스크롤에 따라 라이브 WebGL 카메라가 산속 사찰을 통과하며 이동합니다.
• 절차적(procedural) 건축물, 등불 빛, 안개, 비, 흩날리는 나뭇잎, 주홍색 달, 절제된 블룸(bloom) 파이프라인을 결합합니다.
• 편집적인 타이포그래피, 생성된 씬 플레이트(scene plate), 알파를 보존하는 WebP 전경 요소를 3D 월드 위에 겹겹이 쌓고, 섹션별 페이드 및 블러 전환을 적용합니다.
• 챕터 내비게이션, 반응형 모바일 레이아웃, reduced-motion 동작, 정밀 포인터 기기를 위한 커스텀 커서를 포함합니다.

제작 방식

Kage는 의도적으로 작게 유지된 정적 사이트입니다. index.html에는 문서 구조, CSS, 절차적 씬 구성, 스크롤 연출, 인터랙션 로직이 모두 담겨 있습니다. 벤더링된(vendored) Three.js r149 빌드가 패키지 매니저나 빌드 단계 없이 WebGL 렌더링을 제공합니다.

사찰, 토리이(일본 신사 입구의 전통 문), 등불, 달, 지형, 비, 나뭇잎, 안개, 후처리 효과는 모두 런타임에 구성됩니다. 최적화된 WebP 씬 플레이트와 전경 컷아웃은 일반 HTML 레이어에 배치되어, 카메라 경로와 조명을 라이브로 유지하면서 페이지에 콜라주 같은 깊이감을 부여합니다.

빌드 또는 리믹스하기

PROMPT.md에 담긴 이식 가능한 구현 브리프는 이 경험을 재구축하거나 재해석하는 데 필요한 씬 구조, 레이아웃 시스템, 모션 언어, 품질 제약 조건을 설명합니다.

로컬에서 실행하기

저장소 루트에서 다음을 실행합니다:

python3 -m http.server 4173 --bind 127.0.0.1

그런 다음 http://127.0.0.1:4173/ 에 접속합니다.

빌드 단계, 환경 변수, 분석 스크립트, 런타임 네트워크 의존성은 없습니다. Python은 로컬에서 정적 파일을 서빙하는 데만 사용되며, 동등한 정적 서버라면 무엇이든 동작합니다.

프로젝트 구조

kage/
├── index.html
├── PROMPT.md
├── README.md
├── assets/
│   └── kage-preview.webp
└── secret-pathways-assets/
    ├── fonts.css
    ├── three.min.js
    ├── generated/
    └── foreground/png/

디자인 및 출처 표기

Kage는 일본 사찰 건축과 밤의 정원에서 영감을 받은 독창적이고 독립적인 디자인 스터디입니다. 특정 사찰, 문화 기관, 관광 기관과는 제휴 관계가 아닙니다.

시네마틱한 씬 플레이트와 전경 아트워크는 이 프로젝트를 위해 GPT Image 2로 생성한 뒤, 라이브 Three.js 씬과 함께 아트 디렉션 및 합성되었습니다. 벤더링된 Three.js r149 빌드는 MIT 라이선스 고지와 저작권 표기를 유지합니다.

더 많은 프로젝트

같은 방식의 다른 단일 파일 실험들 — 빌드 단계 없이, 프레임워크 없이, 모든 것이 하나의 HTML 문서에 담겨 있습니다.

• Complete Shelf — 7권의 인터랙티브 천으로 제본된 하드커버 책으로 구성된 독창적인 Three.js 라이브러리. · source
• Sketchbook — 싱가포르를 담은 페이지 넘김 스케치북: 드래그로 페이지를 넘기고, 돋보기를 드래그해 살펴볼 수 있습니다. · source
• Agent Skills — 이 페이지들을 만드는 데 사용된 재사용 가능한 스킬 라이브러리로, Kage에서 추출한 낙엽 및 포인터 트레일 기법을 포함합니다.