An Aquairum, published into the Apple Store, that tells the time was never the plan. The plan was to explore the use of the latest AI tools to develop agent based models with the aim to use those models to display data feeds. It turned into its own unique app where the fish (the aqents) gather every minute to tell the time - Aqua Clock.
Aqua Clock began as a loose experiment, in between writing a paper on the ‘Phygital City’. It aimed to explore how to build an agent-based simulation entirely through conversational AI — no design document, no formal spec, just an open-ended dialogue and a canvas to draw on? The fish came first as the boids algorithm is a natural first step. The idea of the clock came mid break from the paper and it was so nice, the release into the The App Store came next.
Aqua Clock: where the fish tell the time Download on the App Store
What is Vibe Coding?
Vibe coding is now a common term, but the tools are moving rapidly and to keep on top of developments its good to take a fresh look at the workflows every could of months. Rather than writing code to meet a brief, its a processes of iterating through ideas, accepting suggestions, discarding others, and allowing the final artefact to emerge from the generative process itself. Its like have a computer scientish on hand, where you discuss ideas and they go off and build things.
There is no requirements document, no architecture diagram drawn in advance, no sprint backlog. There is a conversation — often exploratory, sometimes surprising — between a human an AI system with broad technical knowledge. Its a new an emerging world of developing apps and in many ways it frees up creativity.
Its all about the Boids
The project started with a classic problem in computational simulation: how do you model the collective, emergent behaviour of a group of agents following simple local rules? Craig Reynolds’ boids algorithm, first published in 1987, remains the canonical answer. Three steering rules — separation (avoid crowding neighbours), alignment (steer toward the average heading of neighbours), and cohesion (steer toward the average position of neighbours) — produce uncannily lifelike flocking behaviour from agents with no global awareness of the group.
The original goal was modest: Claude (we used both Claude and Gemini during the developement) was prompted with an open-ended invitation: let’s build a fish tank with flocking fish. What followed was a series of exchanges in which the AI generated, explained, and iteratively refined a TypeScript/React simulation rendered on an HTML5 Canvas. Ghost shrimp, snails, a crab, bubbles, and drifting plants were added over successive sessions. The result was a convincing living aquarium — aesthetically pleasing, behaviourally rich, and computationally lightweight at under 11 MB. AI systems have ‘token’ limits on use and the development of the app took a series of back and forth flows between Gemini and Claude, which we detail in the next section.
At this point, the project had no clock, just a nice living aquarium where the plants grow over time and the fish school together, as planned.
The Creative Pivot: Fish as Time Display
The idea emerged, as many good ones do, from a tangential observation mid-session. The tetra fish — small, numerous, 28 in the final implementation — could in principle be choreographed to form recognisable shapes. Seven-segment displays, the kind used in digital clocks and calculators since the 1960s, are composed of straight line segments. Fish swimming in formation along those segments could render digits legibly. Regular readers of my site over at digitalurban.org will know i have a ‘thing’ about clocks, physcial and digital.
This is the core design insight of Aqua Clock: the fish are not decorative, they are functional. Every minute, the 28 tetra fish abandon their emergent flocking behaviour and are assigned target positions along the seven-segment outlines of four digits representing HH:MM. They swim to those positions, hold formation, then dissolve back into free flocking. The transition — fish departing their natural behaviour to form the time and then dispersing — is itself a kind of performance, observable in real time.
A double-tap gesture summons the time on demand, holding the formation for seven seconds before releasing the fish. Single-tap drops food pellets the fish chase and consume. Pinch and scroll adjust water brightness. An optional ambient underwater soundscape plays in the background.
None of these features were in a specification. Each one emerged from the conversation.
The living aquarium between time displays
A Dual-AI Workflow with GitHub at the Centre
One of the core aspects of this project was its use of two distinct AI systems in alternating roles, with GitHub as the shared substrate between them.
Claude handled the heavier architectural work — the initial boids implementation, the entity system (VectorFish, GhostShrimp, Snail, Crab, Bubble, Food), the canvas rendering pipeline, and the seven-segment clock logic. Claude’s strength in this context was its ability to hold a large codebase in working context and reason about the interactions between components.
Gemini AI Studio was brought in at points where a fresh perspective was useful — reviewing code for performance issues, suggesting interaction patterns, and providing an independent read on the user experience. Critically, Gemini operated from the code as it existed in GitHub at each handoff: the repository served as a shared ground truth that neither AI system owned, and that both could read.
GitHub, in this model, is not merely version control — it is the handoff protocol. Committing code to the repository creates a durable, readable artefact that can be passed to a different AI system without loss of context. Each commit is, in effect, a message in a conversation between two AI interlocutors mediated by a human developer who understands both.
This is a pattern worth naming: multi-model vibe coding, in which different LLMs contribute distinct perspectives to a shared codebase, with version control as the neutral interchange format.
Under the Hood
The final application is built on a deliberately lightweight stack:
- React + TypeScript for component architecture and state management
- Vite as the build tool, chosen for fast hot module replacement during iterative sessions
- HTML5 Canvas API for all rendering — no WebGL, no external graphics library
- Capacitor for iOS packaging — the web application wrapped in a native iOS container, no Swift written by hand
Battery efficiency was a deliberate concern. The animation loop uses requestAnimationFrame with frame-rate throttling, and its suspends entirely via the visibilitychange API when the app is backgrounded. The bubble simulation is capped at 150 active bubbles to prevent unbounded growth at high air pump settings.
The fish themselves are roughly 50 lines of simulation logic per entity per frame — position update, velocity update, boids force accumulation, wall steering, food steering, and clock-formation steering when active. The emergent complexity of the aquarium arises from the interaction of these simple rules across 28+ fish, not from any global choreography system.
Deployment: From Browser to App Store
Capacitor, developed by Ionic, bridges web applications to native mobile platforms. The build process was:
npm run build— Vite compiles the React/TypeScript application to a static web bundlenpx cap sync ios— Capacitor copies the bundle into an Xcode project scaffold- Xcode — the compiled app is signed and submitted to Apple’s App Store Connect
The entire application logic — including all simulation code — runs in TypeScript inside a WKWebView on iOS. The app is 10.5 MB, requires iOS 15.0 or later, and is compatible with iPhone, iPad and Mac (Apple Silicon).
The absence of native Swift code in the application layer is itself a product of the vibe coding approach: when the AI generates web technology natively, and Capacitor wraps it for distribution, the boundary between “web app” and “native app” dissolves in ways that would have seemed implausible even a year ago. The development of an app to the store is so short that a rise in ‘app abandonment’ is probable, where its so easy to make an publish apps that ‘developers’ (maybe that term now needs a new name) rapidly move onto the next thing.
What Vibe Coding Reveals
Aqua Clock would not exist without vibe coding — not because the underlying techniques are beyond a skilled developer, but because no specification for it would ever have been written. The combination of a living aquarium with a fish-formation clock is an idea that emerges from the process of making, not from planning.
This is what vibe coding offers: a mode of creative-technical practice in which the act of building is also the act of discovery. The AI does not replace the developer; it accelerates iteration to a pace at which exploration becomes viable. Ideas that would require days to prototype can be tested in hours.
The dual-AI workflow introduces a further dimension: different models bring different tendencies. Using Claude and Gemini in alternating roles — with GitHub as the neutral handoff — introduces a productive form of creative friction, analogous to showing a half-finished painting to a different critic at each stage.
What remains irreducibly human in this process is aesthetic judgement: the decision that fish should form a clock, that the transition between modes should be visible and unhurried, that the aquarium should feel inhabited rather than mechanical. The AI provided the means; the human provided the meaning.
City Clock - The City where the People Tell the Time
Of course the majority of our work is concerned with cities and the concept extends in a City where the People Tell the Time - as such City Clock is under development (its almost complete) and will be incoming to the Apple Store soon…
Download it
Aqua Clock is free on the Apple App Store for iPhone, iPad, and Mac. An Android version is incoming, probably ‘developed’ during a break on a book chapter i need to complete next week…