Oceatics: a free virtual saltwater aquarium in your browser
Oceatics (oceatics.com) is a living reef tank rendered in real time in your web browser. There is nothing to download or install: open the page and a saltwater aquarium is running, complete with the sound of bubbles and a low air-pump hum. Everything in the tank, from every fish to every grain of sound, is generated by code. The app ships zero model files, zero textures and zero audio samples; the main application bundle is about 400 KB compressed, and everything you see is built from it in your browser.
What Oceatics is
Oceatics is a simulated reef aquarium, not a video and not a looping animation. Nothing in it repeats, because nothing in it was recorded. A behavior simulation runs at a fixed 30 ticks per second and decides where every animal goes; the renderer draws the result at up to 60 frames per second. Watch a single yellow tang for a minute and it will never retrace the same path, because its target drifts continuously and it reacts to the rocks, the sand, the other fish, your taps on the glass, and any food in the water.
It is free, it has no accounts, no advertising and no analytics, and after the first visit it runs with the network switched off. People use it as a desk companion, a waiting-room screen, a classroom prop, and a wall display on a spare monitor or TV.
The tank is a physical object
Most virtual aquariums put a camera underwater. Oceatics does the opposite: you are standing in a dim room looking into a glass box that sits on a cabinet stand. The glass has a dark frame and real thickness. The sand bed is a height field with dunes, piled higher against the panes the way sand really banks up in a tank. A painted backdrop poster covers the rear glass. Two undergravel-filter lift tubes stand in the rear corners with charcoal cartridges inside them, and the bubble columns rise inside those tubes rather than floating loose in the water, because that is where an air line actually goes.
The camera is deliberately limited. You can orbit roughly 86 degrees each way, which walks you around the three viewing sides of the tank, and you can tilt a little up and down. You cannot fly through the glass or swim inside, because the illusion the app is protecting is the one where you are a person in a room with an aquarium.
The livestock: 128 fish, seven species
The tank is stocked with 128 individual fish across seven species, chosen to be a plausible mixed reef community rather than a random assortment:
- Blue-green chromis (90): the shoal. Small, fast, iridescent, and the reason the tank reads as alive from across the room.
- Pajama cardinalfish (22): a slower, looser school that hangs almost motionless until food lands.
- Royal gramma (6): purple in front, gold behind, shy, and drawn to cover near the rocks.
- Yellow tang (3): constant grazers that patrol the whole length of the tank.
- Ocellaris clownfish (3): tethered to a swaying anemone built from 110 individual tentacles.
- Blue tang (2): the largest fish in the box and the slowest to spook.
- Yellow watchman goby (2): bottom dwellers that stay on the sand and take the crumbs everyone else missed.
Every fish is a lofted procedural body with membrane fins and real eyes, between roughly 7,600 and 11,000 triangles each, painted at runtime with a generated skin. Shift-click or right-click any animal to get a card with its name and one true fact about the species.
How the fish decide where to go
Schooling species run a classic three-rule flocking model, separation, alignment and cohesion, over a spatial hash so that 90 chromis can each consider only their close neighbors instead of all 89 others. The rules go back to Craig Reynolds' 1987 boids work, which is still the clearest description of why simple local rules produce a convincing shoal.
The larger fish do not school. They steer toward a target that drifts continuously as a sum of slow sine waves, with per-species variants: the clownfish stay tethered near their anemone, the royal grammas hug cover, the gobies stay pinned to the sand. Every animal collides against the same world: rock ellipsoids, the sand height field, and the other fish, including fish from other schools.
Two things break the calm. Tapping the glass sends a startle pulse along the entire sight line of your tap through the tank, so a fish cannot hide from you by being deeper in the box; schools bend away from that line and the wanderers bolt from the point you touched. Dropping food inverts it: the same steering that avoided the tap now converges on the flakes.
The cleanup crew and the algae cycle
A real tank grows algae, so this one does too. Patches of green film spread across the back glass over time. Turbo snails crawl the glass, lock onto a patch, and mow it in passes aimed at whatever is still growing, carving trails exactly as wide as their bodies. Nassarius snails plough the sand and climb the rocks. An emerald crab walks the bottom on eight hinged legs with a proper alternating tripod gait and animated claws, collecting food that sank past everybody else.
The rule the algae obeys is the one that makes it feel real: a patch is never quietly deleted. It disappears only when its cells have actually been eaten, one snail pass at a time, and any patch the snails abandon slowly grows back. If you never feed the tank, the crew still has a job.
Water, light and sound
The water surface is real geometry, not a scrolling texture. Food landing, a fish brushing the surface, and every bubble that pops all launch damped radial wave trains that interfere with each other, and the surface carries a true planar mirror reflection of the tank below it. Light comes through as caustic patterns on the sand and rocks, computed from ripple interference, with god rays slanting down through the water.
The sound is synthesized in the browser with the Web Audio API. There are no audio files. A 50 Hz pump hum with a 7 Hz diaphragm vibration sits underneath, and individual bubble blips are scheduled in time with the bubble streams you can actually see, through a generated impulse-response reverb. The mute button is wired as the air pump switch: mute it and the bubbles stop leaving the airstones, though bubbles already rising finish their trip to the surface.
Controls
- Left-click the glass: the fish startle and scatter away from your tap.
- Shift-click or right-click a fish or critter: a species info card.
- Space, or the flake button: feed the tank. There is no cooldown.
- Drag: orbit the three viewing sides of the tank.
- F: fullscreen. Esc: the title, controls and credits screen.
- The speaker button: mute, which stops the air pump as well as the sound.
Ambient display mode
Leave the aquarium alone for four seconds and the controls and the mouse cursor fade out, leaving nothing but the tank. Combined with fullscreen this turns any spare screen into an aquarium: a monitor on a shelf, a TV in a waiting room, a classroom projector. The next movement or tap brings the controls back, and a tap that only woke the interface does not also startle the fish.
How it was built and tested
Oceatics is rendered with a tree-shaken build of Babylon.js and runs on WebGL2. It is written as two strictly separated layers: a pure simulation with no rendering code in it at all, and a thin adapter that turns simulation state into meshes and materials. The practical benefit is testability. The simulation layer is covered by 28 automated tests that run without a browser, and they assert the things that are easy to break by accident: that a wandering fish stays inside the tank and inside the rocks for 10,000 consecutive steps, that clownfish stay tethered to their anemone, that bottom feeders chase grounded food while mid-water fish ignore it, that the sand height field is continuous enough for a snail to crawl over without popping.
Several details in the tank exist because the obvious version looked wrong in testing. Bubbles were originally free in the water column; they read as fake until they were clamped inside the bore of the lift tubes, which is where an undergravel filter actually puts them. The startle response first pushed only fish near the tapped pane, which meant a fish deeper in the tank could sit calmly while its neighbor bolted, so it was rebuilt to push along the whole line of sight of the tap. Continuous noise layers were tried in the soundscape and removed: over a few minutes they stop sounding like water and start sounding like a loop. Algae used to be removed once it was mostly eaten, which produced patches that vanished under a snail's nose, so the rule became that a patch survives until its cells are genuinely gone.
Performance is watched at runtime. The target is 60 frames per second; a watchdog notices sustained frame rates below 45 and degrades in a deliberate order, first halving the refresh rate of the mirror reflection, then lowering the device pixel ratio, because a slightly softer reflection is far less noticeable than a stuttering fish.
Cost, privacy and offline use
Oceatics is free and has no paid tier. There are no accounts, no ads, no analytics and no tracking cookies. The only thing stored on your device is a single browser preference recording whether you muted the sound; the full detail is in the privacy policy. Because there are no asset files to fetch, the service worker can cache the entire application, so after one visit the aquarium works with no network at all and can be installed as a progressive web app.
If it earns a place on your screen you can tip the aquarist at ko-fi.com/advancing. That is the entire business model.
Common questions
Is Oceatics really free?
Yes, completely, with no account and no advertising. Tipping is optional and changes nothing about the app.
Does it work on a phone or tablet?
Yes, in any current mobile browser with WebGL2. Tap the glass to startle the fish, use the flake button to feed, and drag to orbit. The species info card is opened with a shift-click or a right-click, so that one gesture is desktop only for now. On weaker hardware the quality watchdog trades reflection detail for frame rate rather than dropping frames.
Can I use it as a screensaver or on a TV?
That is the intended use of display mode. Go fullscreen, stop touching it, and after four seconds every control disappears.
Are the fish and facts accurate?
The species are real reef aquarium livestock and each info card states a true fact about the animal, with the references listed below. The tank itself is a stylized version of a mixed reef, not a husbandry simulator: it does not model water chemistry, disease, or aggression.
Sources and further reading
The rendering, audio and behavior techniques used here are all publicly documented, and the species facts come from published references:
- Craig Reynolds, Boids: background and update, the original flocking model behind the schooling behavior.
- Babylon.js documentation, the WebGL engine the tank is rendered with.
- MDN: Web Audio API, the synthesis and scheduling model used for the pump, bubbles and reverb.
- MDN: Progressive web apps, the offline and installability behavior.
- Perlin noise, the basis of the sand dunes, rock shapes and drifting swim targets.
- Ocellaris clownfish, for the anemone symbiosis described on the clownfish card.
- Yellow tang, for the grazing behavior and the pale nighttime coloration.
- Pistol shrimp (Alpheidae), for the burrow partnership on the watchman goby card.
About the author
Oceatics is written and maintained by Jason August at Advancing Development. He builds small self-contained web software, and Oceatics is the product of that approach taken to its limit: a complete 3D aquarium with no downloadable assets, where the fish geometry, the coral and rockwork, the backdrop poster, the caustics and the entire soundscape are all produced by code at load time. The design decisions described above, from bubble containment inside the lift tubes to the order in which quality is degraded under load, came out of building and watching this tank rather than from a specification.
More on the project is on the about page, and you can reach the developer through the contact page.