Claude Codeで地質時計を構築：シングルHTML＋Three.js

Owen Thomas（プロダクトデザイナー、基本的なHTML/CSSスキル）が、eona.earthを構築しました。これは、地球46億年の歴史を、ローカルタイムに同期した12時間の時計盤にマッピングした地質時計です。このプロジェクトはClaude Code（Proプラン）のみを使用して構築され、単一のHTMLファイルとして、vanilla JS、Three.js（WebGL用）、カスタムフラグメントシェーダーとともに配布されています。ビルドステップはありません。

構築の主要ポイント

• Claude Codeの使用法: 実装には主にSonnetを使用し、複雑な作業や行き詰まった場合にはOpus 4.6に切り替え。最初はOpus 4.7を試しましたが、過剰設計（例：ピクセルあたり4パスのノイズ処理を60fpsで実行）と判明。
• カスタムWebGLシェーダーは、古地理学的な大陸データを用いて地球をレンダリング。手続き型の雲や大気のかすみが、地質時代の進行に合わせて変化します。
• カラーパレットはGemini（無料プラン、Thinkingモード）で設計され、地球の進化の14のフェーズに対応するシステムを構築。その後Opus 4.6が、色、表面、雲を調整するためのインタラクティブなパレットエディター（プロンプトなしで）を構築し、eona.earth/colour-lab.htmlで利用可能。
• インタラクション: スクラバーハンドルをドラッグして46億年を手動で移動。レイヤーのオン/オフは右上のコントロールで切り替え。
• 時間マッピング: 12:06 — 月の形成、2:45 — 最初の生命、11:39 — 恐竜の絶滅、人類は最後の3秒間に出現。
• 大陸移動: 低温期後のスノーボールアースを、古地理学的な大陸データ（形状補間された地図シリーズ）を用いてレンダリング。

ワークフローと制約

Owenは2週間にわたって夜間に作業し、意図的に短いセッション、オフピーク時間、可能な限りClaude外での作業、コンテキストファイルの使用により、Proプランの制限内に留めました。ソースコードはGitHubのgithub.com/owen-thomas/eona-earthにあります。

計画中の機能

• キーボードナビゲーションでイベント間をジャンプ
• 地球の回転なしでスクラブ（大陸移動を観察するため）
• 地球の残りの寿命（2番目の12時間期間）をカバーする未来の地球投影
• WaveshareラウンドディスプレイとRaspberry Pi 4を使用した物理的なビルド
• サウンドデザイン
• 腕時計/モバイル/デスクトップアプリ