Pelagica 2025
Resources: Pelagica (open beta) | GitHub Repo
Implementation: Python (Dash) backend with custom JavaScript-driven animations, parallax assets (designed in GIMP), and rembg-processed imagery; data integrated from SeaLifeBase, FishBase, GBIF, and Wikimedia Commons; deployed on Fly.io (Docker).
Pelagica is an interactive visualization that lets users explore aquatic biodiversity by depth, size, and taxonomy. Its goal is to make 69,000 species and their marine/lake/river habitats feel more approachable by combining depth descent animation with images, sound, and information.
Users can search or randomly select a species to see it placed at its habitat depth trough a descend/ascend animation, with images, info panels, sounds, and scale comparisons. A navigation bridge allows exploring by depth, size, and taxonomy. Filters, ambient sound, and favourites lists enhance the experience.
The app is built with a combination of Python/Dash for the app framework and JavaScript for interactive elements and animations. It brings together several open data sources, including Wikimedia Commons for species blurbs and images, SeaLifeBase and FishBase for biological records, and GBIF for taxonomic data. To prepare images, I used rembg, a background-removal tool, so that species could be placed cleanly into the layered seascape.
The animation system is based on parallax scrolling: I designed nine tall images in GIMP, each with different heights and moving at different speeds to create a sense of depth. On top of that, depth-dependent CSS and HTML animations, all steered by JavaScript code, add animations like caustics, glitter, and bioluminescence that shift as you descend.
Pelagica is currently hosted on Fly.io.
From concept to latest version:
