• 

  AquaLink: a 3D life-support digital twin for a public aquarium.

• 

  Public view: six habitats, marine life and visitors in one shared 3D atrium.

• 

  Click a species and the camera follows it through the glass.

• 

  Operations view: the same building opened up, with pumps, filters, valves and live (simulated) flow.

• 

  Pump C-2 trips: Tanks B and C lose circulation, grouped into one incident.

• 

  Backup pump C-3 takes over automatically at 60% of its rated output.

• 

  Root cause confirmed, with backup coverage and recommended actions.

• 

  From alert to action: assign, tick checklist steps and record notes.

• 

  Shift handover generated from the live incident state.

• 

  Authorised restart: circulation returns and green rings sweep the loop.

• 

  A second scenario: sand filter F-1 blockage degrades Tanks A, D, E and F.

• 

  Text-only view: every essential reading as accessible tables.

• 

  Analytics: small-multiple trends per tank.

• 

  The atrium, rendered in the browser with Three.js. All data is simulated.

AquaLink

Every tank. Every connection. One clear next action.

Inspiration

A public aquarium is more than beautiful marine exhibits. Behind the scenes, technicians manage interconnected pumps, filters, sensors, and circulation systems that keep aquatic habitats running.

When one pump fails, the challenge isn't simply detecting the fault. It's understanding which tanks are affected, whether backup systems can help, and what needs to happen next.

We built AquaLink to reduce that mental workload and turn scattered operational information into clear, actionable decisions.

What it does

AquaLink is an interactive 3D aquarium digital twin and incident-response platform designed for aquarium life-support technicians.

Users can explore a realistic public aquarium, reveal its hidden infrastructure, inspect equipment connections, and simulate failures.

When circulation pump C-2 fails, AquaLink traces the affected network, identifies Tanks B and C, calculates reduced circulation, and visualizes backup support from C-3.

Instead of disconnected alerts, technicians receive one contextual incident with prioritized maintenance tasks, equipment information, and a shift-handover summary.

The platform also includes an additional filtration failure scenario, accessible keyboard controls, and a text-based alternative to the 3D environment.

How we built it

We developed AquaLink using Next.js, React, TypeScript, Three.js, React Three Fiber, Tailwind CSS, and Zustand.

The 3D aquarium uses procedural geometry, custom rendering techniques, animated marine life, realistic water effects, and interactive equipment models.

A graph-based dependency system connects pumps, filters, pipes, and habitats. A deterministic simulation engine calculates equipment states, fault propagation, backup activation, and circulation levels.

The same application state powers the 3D visualization, operational dashboards, incident workflows, and maintenance reports.

Challenges I ran into

Our biggest challenges were building a visually convincing aquarium without sacrificing browser performance, creating believable equipment connections, and keeping the simulation consistent across different views.

We also had to make complex engineering information understandable without overwhelming users with unnecessary alerts and technical details.

Accomplishments that we're proud of

• Created an interactive 3D aquarium with six interconnected habitats.
• Implemented two simulated equipment-failure scenarios with dependency-based impact analysis.
• Connected incidents directly to technician tasks and shift handovers.
• Built accessible alternatives to essential 3D interactions.
• Developed a reproducible simulation with automated verification tests.

What we learned

We learned that a digital twin becomes significantly more useful when its visual environment, underlying simulation, and operational workflows are connected.

We also learned how important accessibility, performance optimization, and clear information hierarchy are when designing tools for high-responsibility environments.

What's next for AquaLink

We want to integrate real sensor data, improve hydraulic simulation accuracy, introduce collaborative maintenance workflows, and validate the platform with aquarium life-support professionals.

Currently, AquaLink is a working prototype using simulated data, not a system connected to real aquarium equipment.

AI-assisted development tools were used during implementation and iteration. The project repository documents the implementation and known limitations.

GitHub: https://github.com/bilal-feroz/AquaLink

Built With

• css3
• glsl
• html5
• javascript
• lucide-react
• next.js
• node.js
• playwright
• react
• react-three-fiber
• tailwind-css
• three.js
• typescript
• webgl
• zustand