Go Back

Regeneration: Black Cinema

Summary

A website to document and explore the rich history of Black participation in American cinema.

Regeneration: Black Cinema, 1898 - 1971

What We Did

Creative Concepts | User Experience (UX) | Motion Design | Visual Design | Technical Architecture | Web Development

The Challenge

The Academy Museum of Motion Pictures' exhibition, Regeneration: Black Cinema 1898-1971, explores the rich history of Black participation in US cinema from its beginnings to just beyond the civil rights movement. Inspired by and named after an independent all-Black-cast movie from 1923, Regeneration seeks to revive lost or forgotten films, filmmakers, and performers for a contemporary audience.

Our brief was to create a responsive website and in-gallery Augmented Reality (AR) experiences to amplify the visitor experience, and document the rich history of Black participation in American cinema beyond what could fit within the physical walls of the museum.

Concepts

Our main objective was to provide a digital space to enhance both the visitor in-person and online experiences. We wanted to use the digital space as a way for the museum’s global audience to access information and immerse themselves in the history of Black cinema.

We engaged Erwin Hines to work with us as Creative Director, and had to work closely with the exhibition and digital curators, and the team at Pentagram, who were designing the exhibition catalog in parallel.

Since many of the exhibition's films and photographs are lost to history, the content for both the exhibition catalog and the website was text-heavy, making the typography the most important factor of our UI concepts. The typography had to be unified but also appropriate to the medium.

Early concept development
Regeneration Concept
Regeneration Concept
Regeneration Concept
Regeneration Concept

Early concept development

The Experience

The Regeneration website acts as the show’s permanent digital home, delivering rich content to both exhibition visitors and those engaging with the site remotely. The site contains original articles and essays, an educational timeline and interactive storytelling tools, and a robust database, capturing the breadth and depth of the films, filmmakers, and production companies featured in the exhibition. As Regeneration travels to new venues, the site will be updated to reflect the new iterations of the show, preserving the complete historical record of the exhibition.  

The website offers up content in unique ways, allowing visitors to learn at their own pace and make their own meaning.

Regeneration Website Theme Scroll
Regeneration Website Theme Slide Out
Regeneration Map
Regeneration Map View

From a technical perspective, this site was built with multiple 3D webGL canvases layered amongst traditional markup. Using Three.js and custom shader transformations, images and text are animated in uncommon ways. The background noise and homepage hero are rendered below the rest of the site's content while images throughout the rest of the site are rendered on canvases that cohabitate with the rest of the markup — with some content appearing above and some below. It was important to us that these images felt like any other element on the site. To accomplish this layering, each image is rendered on its own canvas element, reflecting the output of an offscreen webGL renderer. While animations are taking place, an image of the animation is snapped and painted on each canvas at every frame.

0:00

Motion test

Awards

w3 Gold Award 2022
w3 Silver 2022