This is a submission for the June Solstice Game Jam
What I Built
The Clockwork Solstice is an interactive simulation game designed to bridge the meticulous elegance of traditional mechanical horology, watch modding, and digital aesthetics.
In high horology, tracking celestial movements is called a complication. While features like moon phases are common, tracking the Solstice is one of the rarest, most mechanically complex complications to ever be engineered into a physical watch movement. It requires an intricate train of gears, absolute mathematical reduction ratios, and perfect cosmic synchronization.
Following the core theme of transition, light, and darkness, the game features a custom Celestial Globe Toggle—a bi-tonal astronomical sphere split vertically. Clicking it physically shifts the time, mood, gameplay mechanics, and physics of the laboratory:
- The Winter Solstice (Solstice d'Hiver): Deep cosmic slate layouts, raw steel structures, and brass accents mimicking a 19th-century observatory under a clear, frozen night sky.
- The Summer Solstice (Solstice d'Été): A vibrant layout with rich magenta and deep violet gradients, neon-glowing outlines, and intense glassmorphic panels celebrating solar abundance.
Demo
I have created a comprehensive technical infographic detailing the interface, mechanical interactions, and core architecture of the simulator. You can also test the live deployment directly below!
🕹️ Play it Live on Netlify
Code
You can explore the full open-source architecture directly on GitHub:
AlexKoncept
/
the-clockwork-solstice
This project is an artistic and interactive tribute to modding and traditional mechanical watchmaking. It brings the mechanics of watchmaking to life in the form of an interactive astronomical clock governed by the dynamics of the two annual solstices.
⚙️ The Clockwork Solstice
📊 Project Infographics
🌐 English Version
An exquisite, highly interactive simulation game bridging the age-old elegance of mechanic horology, watch modding, and digital aesthetics. Crafted by Alex Koncept.
🌸 Passion & Philosophy
Born from a genuine obsession with high-precision mechanical watchmaking, watch modding, and astronomical complications, The Clockwork Solstice is designed to translate physical tactile aesthetics into digital animation. It connects the meticulous mathematical flow of gears, escapements, and calibrating springs with real-time browser dynamics and physics equations. It is a sensory celebration of time, astronomy, and digital craftsmanship.
🌓 Core Dual-Theming Architecture
At the absolute center of this ecosystem lies the Celestial Globe Selector, enabling users to instantly cycle between two radically distinct astronomic states:
-
Winter Solstice (Solstice d'Hiver): An elegant, high-contrast dark space. Deep charcoal and rich slate grays paired with vintage amber highlights (
#D4A359). Captures the quiet composure…
How I Built It
The application is built on a modern, ultra-responsive web stack designed for absolute mathematical accuracy and fluid visual micro-interactions:
-
Real Gear-Train Physics: The simulation operates with strict horological reduction laws ($1.5\times$ and $1.33\times$ ratios) acting on virtual 36, 24, and 18-tooth wheels animated seamlessly via Framer Motion (
motion/react). - Real-time Synthesized Audio: To ensure an "offline-first" lightweight architecture with zero external heavy assets, mechanical escapement clicks (the watch heartbeat) and harmonic chimes are synthesized dynamically in real-time using the native Web Audio API.
-
Glassmorphic HUD & Telemetry: Highly polished responsive panels using premium glassmorphism (
backdrop-blur-xl), variable translucent borders, and custom backing radial light spots powered by Tailwind CSS. -
Multi-Lingual Architecture: Fully synchronized English and French localizations (
en/fr) mapping technical horological terms across the entire active console.
Prize Category
🧠 Best Ode to Alan Turing
This project is a direct tribute to Alan Turing, the father of modern computing, through its structural core and underlying math:
- Algorithmic Determinism: Just as Turing envisioned state machines operating on precise logical transitions, the entire simulator runs on strict physical reduction mathematics. The interaction of the 36, 24, and 18-tooth wheels acts as a physical, mechanical execution of a logic train—a deterministic gear-based algorithm.
- The Logic of Universal Balance: The dual-state architecture (the transition from Summer to Winter Solstice) simulates a binary system ($0$ and $1$, light and shadow) governed by strict computational boundaries, directly mirroring Turing’s foundational work on systems and universal logic states.
🤖 Best Google AI Usage
To bring this intricate horological concept to life under tight time constraints, I utilized an advanced Vibe Coding workflow accelerated by Gemini AI.
Instead of manual boilerplate writing, I leveraged natural language to orchestrate the vector mathematics for the physical gear alignments and the real-time node synthesis for the Web Audio API. Gemini served as a high-tier structural architect, helping me maintain an optimized, production-ready React and TypeScript deployment with zero compilation errors on the first Netlify build.
📄 License & Credits
This project is fully open-source and licensed under the MIT License.
Developed with passion by Alex Koncept (2026) — Bending time, one gear at a time. ⏱️🌗☀️🚀
Top comments (0)