클로드 코드로 지질학적 시계 만들기: Three.js + WebGL

Owen Thomas는 기본 HTML/CSS 기술을 가진 제품 디자이너로, eona.earth를 만들었습니다. 이는 지구의 45억 년 역사를 현지 시간에 동기화된 12시간 시계 문자판에 매핑한 지질학적 시계입니다. 이 프로젝트는 전적으로 Claude Code(Pro 플랜)를 사용하여 구축되었으며, 바닐라 JS, Three.js(WebGL용), 커스텀 프래그먼트 셰이더와 함께 단일 HTML 파일로 제공됩니다 — 빌드 단계 없음.

빌드의 주요 세부 사항

Claude Code 사용: 대부분 구현에 Sonnet을 사용했으며, 복잡한 작업이나 막힐 때는 Opus 4.6으로 전환했습니다. 처음에는 Opus 4.7을 시도했지만 과도하게 설계된 것을 발견했습니다(예: 60fps에서 픽셀당 4개의 노이즈 패스 실행).
커스텀 WebGL 셰이더는 고지리학적 대륙 데이터로 지구본을 렌더링합니다. 절차적 구름과 대기 헤이즈는 지질학적 시간을 이동함에 따라 변화합니다.
색상 팔레트는 Gemini(무료 플랜, Thinking 모드)에서 설계되어 지구 진화의 14단계에 대한 시스템을 만들었습니다. 그런 다음 Opus 4.6이 대화형 팔레트 편집기(프롬프트 없이)를 구축하여 색상, 표면 및 구름을 조정할 수 있습니다 — eona.earth/colour-lab.html에서 이용 가능.
상호작용: 스크러버 핸들을 드래그하여 45억 년을 수동으로 이동합니다. 오른쪽 상단 컨트롤을 통해 레이어를 켜고 끌 수 있습니다.
시간 매핑: 12:06 — 달 형성, 2:45 — 첫 생명체, 11:39 — 공룡 멸종, 인간은 마지막 3초에 나타납니다.
대륙 이동: 빙하기 이후의 눈덩이 지구는 고지리학적 대륙 데이터(형태 보간된 지도 시리즈)를 사용하여 렌더링되었습니다.

워크플로 및 제약 사항

Owen은 2주 동안 저녁 시간에 작업했으며, 의도적으로 작업하여 Pro 플랜 제한 내에서 유지했습니다: 짧은 세션, 비수기 시간, 가능한 곳에서 Claude 외부 작업, 컨텍스트 파일 사용. 소스 코드는 GitHub github.com/owen-thomas/eona-earth에 있습니다.