Responses by Liz Quann, producer and Chris Arasin, developer, Bluecadet
Background: Bluecadet and educational nonprofit Outrider collaborated with Alex Wellerstein, the creator of Nuke Map, on Bomb Blasts, an interactive map tool that personalizes the devastating impact of nuclear weapons and encourages the public to learn more and take action.
Navigational structure: The site navigation was constructed to streamline the information that Outrider wanted to present. The landing page gives users a clear understanding of the main interaction, and walks them through the impact of a nuclear detonation. Once users understand the interactions, we introduce the parameters that they can tweak and explore. On mobile, we display a lot less information and tuck a lot of the variables into a couple of drawers.
Challenges: Keeping the site online and functioning properly as it went viral—well over one million people visited the site within the first week of launch.
Technical features: The Outrider site front end is built using Gatsby, a new React-based static site generator. It gave us the power of a React application, but with server-side rendering, code-splitting and asset prefetching. This was paired with a Drupal back-end for editing the long-form essays that make up the rest of the site. From the Drupal admin interface, the editors can trigger a rebuild of the static site, which is hosted on Netlify.
We also used Mapbox’s map, map style editor and geocoding API. Using an iterative approach, we built a rough, but feature-complete, prototype. We were then able to experiment with different map styles, user interface elements and visual treatments for the blast. Each layer in the initial blast is drawn with a pre-rendered image sequence, which is sized based on the selected bomb payload. After the initial blast, a GLSL shader is used to create the slow continuous motion.