Ein geologisches Uhrwerk mit Claude Code erstellen: Single HTML + Three.js

Owen Thomas, ein Produktdesigner mit grundlegenden HTML/CSS-Kenntnissen, hat eona.earth entwickelt – eine geologische Uhr, die die 4,5 Milliarden Jahre Geschichte der Erde auf ein 12-Stunden-Zifferblatt überträgt, synchron zur lokalen Zeit. Das Projekt wurde vollständig mit Claude Code (Pro-Plan) erstellt und als einzige HTML-Datei mit Vanilla JS, Three.js für WebGL und einem benutzerdefinierten Fragment-Shader ausgeliefert – ohne Build-Schritt.
Wichtige Details zum Bau
- Verwendung von Claude Code: Hauptsächlich Sonnet für die Implementierung, bei komplexen Aufgaben oder wenn es nicht weiterging, Wechsel zu Opus 4.6. Zunächst wurde Opus 4.7 ausprobiert, aber es erwies sich als überambitioniert (z. B. vier Rauschdurchgänge pro Pixel bei 60fps).
- Benutzerdefinierter WebGL-Shader: Rendert den Globus mit paläogeografischen Kontinentaldaten. Prozedurale Wolken und atmosphärischer Dunst verändern sich während der geologischen Zeitreise.
- Farbpalette: Wurde in Gemini (kostenloser Plan, Denkmodus) entworfen, um ein System für 14 Phasen der Erdentwicklung zu schaffen. Opus 4.6 baute dann (unaufgefordert) einen interaktiven Paletteneditor zum Anpassen von Farben, Oberflächen und Wolken – verfügbar unter eona.earth/colour-lab.html.
- Interaktion: Ziehen Sie einen Schieberegler, um sich manuell durch 4,5 Milliarden Jahre zu bewegen. Schalten Sie Ebenen über die Steuerung oben rechts ein/aus.
- Zeitzuordnungen: 12:06 – Mond entsteht, 2:45 – erstes Leben, 11:39 – Dinosaurier sterben aus, Menschen erscheinen in den letzten 3 Sekunden.
- Kontinentaldrift: Nach der kryogenen Schneeball-Erde mit paläogeografischen Kontinentaldaten (Form-getwenterte Kartenserien) dargestellt.
Arbeitsablauf und Einschränkungen
Owen arbeitete abends über 2 Wochen und hielt sich innerhalb der Pro-Plan-Grenzen, indem er bewusst vorging: kurze Sitzungen, außerhalb der Hauptzeiten, Arbeiten außerhalb von Claude, wo möglich, und Verwendung von Kontextdateien. Der Quellcode ist auf GitHub unter github.com/owen-thomas/eona-earth verfügbar.
Geplante Funktionen
- Navigation per Tastatur zum Springen zwischen Ereignissen
- Schrubben ohne Drehung des Globus (um Kontinentaldrift zu beobachten)
- Projektion der Zukunft der Erde für die verbleibende Lebensdauer des Planeten (zweiter 12-Stunden-Zeitraum)
- Physischer Bau mit Waveshare-Runddisplay + Raspberry Pi 4
- Sound-Design
- Uhr-/Mobil-/Desktop-App
📖 Vollständige Quelle lesen: r/ClaudeAI
👀 Siehe auch

Vektoris Speicherarchitektur: Prinzipien aus Claudes geleaktem System
Vektori implementiert einen dreischichtigen hierarchischen Satzgraphen für KI-Erinnerung, inspiriert von durchgesickerten Prinzipien aus Claudes Architektur. Das System verwendet strenge Qualitätsfilter, skeptisches Abrufen mit einer Mindestpunktzahl von 0,3 und bewahrt Korrekturverläufe über Sitzungen hinweg.

Vibeyard: Open-Source-Dashboard, das Claude-Sitzungen aus PRs, Issues und Kanban-Karten startet
Vibeyard ist ein quelloffener (MIT) Home-Screen mit ziehbaren Widgets für PRs, Issues, Kanban und Claude-Sitzungen. Klicke auf eine Karte, um eine vorkontextualisierte Claude-Code-Sitzung für Überprüfung, Fehlerbehebungsplanung oder Wiederaufnahme zu starten.

Prefex: Ein lokaler Proxy für Claude-Code, der Prompt-Caching und Sitzungsspeicherung automatisiert
Prefex ist ein lokaler Proxy, der zwischen Claude Code und der API von Anthropic sitzt und automatisch den Header einfügt, der für die Beta-Prompt-Caching-Funktion von Anthropic erforderlich ist. Er implementiert auch Sitzungsspeicher, um das erneute Senden des gesamten Konversationsverlaufs zu vermeiden, und enthält einen Modell-Router zur Kostenoptimierung.

Repowise: Vorberechneter Codebase-Kontext für Claude Code halbiert Token-Nutzung und Aufgabenzeit
Repowise indexiert Ihre Codebasis in vier Ebenen (Abhängigkeitsgraph, Git-Signale, Doc-Wiki, ADRs) und stellt Claude Code acht MCP-Tools zur Verfügung, wodurch eine 30-Dateien-Archäologiesitzung auf 5 MCP-Aufrufe und 2 Minuten reduziert wird.