Lost Cities

Lost Cities

Interactive Coral Documentary

Year

2019

Agency

Belle & Wissell, Co.

Client

Links

Role

Senior Developer at Belle & Wissell, Co.

Team

  • Gabe Kean, Principal
  • Sarah Trueblood, Studio Producer
  • Claudia de Almeida, Design Director
  • Edward Tang, Technology Director
  • Edrea Lita, Art Director
  • Natalie Karbelnig, Content Lead
  • Isabella Vasquez, Designer

Tags

  • Non-Profit
  • Website
  • Responsive
  • 3D
  • Generative
  • Soundscape
  • Conservation
  • Education
  • Front-End Development
  • CMS Development

Languages/Libraries

  • JavaScript
  • ES6
  • three.js
  • WebGL
  • React
  • Webpack
  • HTML
  • Sass
  • CSS
  • Craft CMS

Awards/Press

Lost Cities

Interactive Documentary

Lost Cities in an interactive video documentary that tells the story of coral—what they are, their significance within our planet's ecosystems, and the crisis they face. The online experience lets visitors take a non-linear journey through 13 short films, dig deeper into topics of interest, and discover actionable steps they can take to help coral species.

The story is narrated by renowned coral scientist Dr. Ruth Gates and are the final recordings taken of her voice before her death in 2018. Lost Cities pays a tribute to her inspiring message and lifelong commitment to saving coral reefs worldwide.

Lost Cities

Generative Experience

Moving through Lost Cities evokes the living ecosystems under the sea with a shifting, changing digital environment—floating particles, undulating currents, and an ever new, underwater-inspired soundscape composed by Jesse Solomon Clark.

Prototyping

Early prototype studies used three.js, GLSL shaders, and gradient noise to attempt to mimic a living, undulating, underwater ecosystem. Phyllotaxis patterns were used as the basis of the spiral that ultimately became the website's primary navigation.