When the Sea Remembered

A web application that digitally “restores” coastal species that were once abundant in Burrard Inlet but have since declined. Users can explore historical ecology and understand human impacts.

Comment

Inspiration

This project is inspired by both the United Nations Sustainable Development Goal 14: Life Below Water and by the landscape design project Flow Park, which explored inclusive design, stormwater management, and urban biodiversity in Vancouver’s Oakridge neighbourhood.

We wanted to extend that same ecological thinking into the digital realm: How can interactive storytelling make people remember what urban development has erased and reflect on our shared responsibility to restore it?

What it does

  • Visualize the lost shoreline of False Creek and the marine species displaced by pollution and urbanization
  • Provide educational opportunities for users to explore the scene, hover to reveal hidden silhouettes of fish and seals, and click to learn their stories
  • Use interactive animations to simulate species disappearance, habitat degradation, and potential restoration
  • Enable AI-generated dialogues using Gemini API, allowing users to ask questions about species or habitats

How we built it

  • Frontend: React.js, HTML, CSS, SVG/Canvas for interactive animations
  • Backend / Server: Node.js, Express
  • AI Integration: Gemini API for natural language responses
  • Data: Historical ecology research, catch records, survey CSV/JSON
  • Deployment: Render

Challenges we ran into

  • Balancing the visual storytelling with technical efficiency under time constraints

Accomplishments that we're proud of

  • Integrated the Gemini API to enhance interactivity and dynamic content generation
  • Learned React and built the entire interactive experience within 24 hours
  • Created custom SVG illustrations to visualize False Creek’s lost marine species
  • Successfully combined design, data, and storytelling into a cohesive user experience

What we learned

  • How to connect sustainable design principles with digital storytelling
  • How React and Vite support modular, efficient creative development

What's next for When the Sea Remembered

  • Expanding the dataset with more local species and historical shoreline data
  • Adding ambient soundscapes and timeline interactivity
  • Partnering with local ecological or museum initiatives to turn the prototype into a public exhibit

Built With

Share this project:

Updates