Stop The Shame

gulp  javascript  angular  pug  stylus

StopTheShame.info is an interactive, informational, and eye opening experience. This was a VML pro bono project for First Call in Kansas City, an alcohol/drug prevention and recovery group. The striking videos produced for this project were shortlisted for Cannes Lions.

A small piece of the experience can be seen below:

Built as an Angular SPA using ngAnimate to take advantage of native CSS animations reacting to Angular’s directives and data binding. Pug and Stylus were used together for development speed and consistent form across markup and styles. Gulp was utilized to build the project.

Screenshot the Stop The Shame experience asking the user if they think addiction is a choice or a disease.
We pulled in content from JSON to more easily manage templates and copy updates.
Screenshot of the video selection overlay in the Stop The Shame experience.
CSS animations were done primarily on properties like transforms to take advantage of hardware accelerated rendering.

Although we could have built out this project without the overhead of a framework like Angular, the more we thought about the experience the more it really felt like an SPA. We were able to utilize Angular’s templating, dependency injection, data binding, and even make use of modules like ngAnimate to greatly increase development speed given an extremely short timeline.