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

✍️ OpenClawRadar📅 Veröffentlicht: 5. Mai 2026🔗 Source
Ein geologisches Uhrwerk mit Claude Code erstellen: Single HTML + Three.js
Ad

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.
Ad

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

Ad

👀 Siehe auch

Vektoris Speicherarchitektur: Prinzipien aus Claudes geleaktem System
Werkzeuge

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.

OpenClawRadar
Vibeyard: Open-Source-Dashboard, das Claude-Sitzungen aus PRs, Issues und Kanban-Karten startet
Werkzeuge

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.

OpenClawRadar
Prefex: Ein lokaler Proxy für Claude-Code, der Prompt-Caching und Sitzungsspeicherung automatisiert
Werkzeuge

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.

OpenClawRadar
Repowise: Vorberechneter Codebase-Kontext für Claude Code halbiert Token-Nutzung und Aufgabenzeit
Werkzeuge

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.

OpenClawRadar