Building a Geological Clock with Claude Code: Single HTML + Three.js

Owen Thomas, a product designer with basic HTML/CSS skills, built eona.earth — a geological clock that maps Earth's 4.5 billion year history onto a 12-hour clock face synced to local time. The project was built entirely using Claude Code (Pro plan) and is shipped as a single HTML file with vanilla JS, Three.js for WebGL, and a custom fragment shader — no build step.
Key Details from the Build
- Claude Code usage: Mostly used Sonnet for implementation, switched to Opus 4.6 for complex work or when stuck. Initially tried Opus 4.7 but found it over-engineered (e.g., running 4 noise passes per pixel at 60fps).
- Custom WebGL shader renders the globe with paleogeographic continent data. Procedural clouds and atmospheric haze evolve as you move through geological time.
- Colour palette was designed in Gemini (free plan, Thinking mode) to create a system for 14 phases of Earth's evolution. Opus 4.6 then built an interactive palette editor (unprompted) for adjusting colours, surfaces, and clouds — available at eona.earth/colour-lab.html.
- Interaction: Drag a scrubber handle to move through 4.5 billion years manually. Toggle layers on/off via top-right controls.
- Time mappings: 12:06 — Moon forms, 2:45 — first life, 11:39 — dinosaurs go extinct, humans appear in the last 3 seconds.
- Continental drift: Post-cryogenic snowball Earth rendered using paleogeographic continent data (shape-tweened map series).
Workflow & Constraints
Owen worked evenings over 2 weeks, staying within Pro plan limits by being intentional: short sessions, off-peak hours, working outside Claude where possible, and using context files. The source code is on GitHub at github.com/owen-thomas/eona-earth.
Planned Features
- Keyboard navigation to jump between events
- Scrub without globe spinning (to observe continental drift)
- Future Earth projection covering the planet's remaining lifespan (second 12-hour period)
- Physical build using Waveshare round display + Raspberry Pi 4
- Sound design
- Watch/mobile/desktop app
📖 Read the full source: r/ClaudeAI
👀 See Also

Argus: Open-Source VS Code Extension for Real-Time Claude Code Observability
Argus visualizes Claude Code agent steps in real-time inside VS Code, showing timeline, dependency graph, and cost/loop detection to debug token-wasting behavior.

Decision Passport: An Audit Layer for AI Agent Execution Governance
The Claude Code leak highlights a gap in AI agent governance. Decision Passport addresses this with append-only execution records, portable proof bundles, and offline verification for tamper-evident audit trails.

Jentic Mini: Self-Hosted API and Action Execution Layer for OpenClaw
Jentic Mini is a self-hosted API and action execution layer that sits between AI agents and external APIs, storing credentials in an encrypted vault and providing scoped toolkits with individually revocable keys. It automatically imports 10,000+ OpenAPI specs and Arazzo workflow sources when credentials are added.

Docent: An AI Assistant for Paper Analysis Built with Claude Code
A developer created Docent, an AI assistant that reads uploaded papers, presents them, answers questions, and assesses understanding using Claude Code. The project is available on GitHub under MIT License with a demo on Vercel.