Block Party

Minecraft requires little introduction. The game and the community built around it is a global phenomena. It is the second most popular video game in history, just behind Tetris. So when Microsoft purchased it and the accompanied development studio Mojang it made big news. But that was in 2014. For both the Minecraft and Microsoft brand it is important to continue communicating developments within this evolving collaboration. An internal news division and team, Microsoft Story Labs, keyed in on this and began production on an interactive news piece. The story would focus on a Minecraft public space program called Block by Block, which uses Minecraft as tool to engage poor communities in urban design and to help fund public space projects.

Three.js Interactive Intro
TThe site loads to a WebGL interactive introduction, that is responsive to user’s movements within the site.
Mobile version scales while retaining animations and parallax effects.

We wanted to find a way to incorporate Minecraft’s unique 3d voxel based aesthetic into a long form story. From a technical perspective it was challenging. We wanted the 3d assets to mimic Minecraft and for readers to get a sense of depth as they scrolled the page. Finally, by combining WebGL and CSS3d (and getting them to play well together) we were able to achieve the effect we were looking for.

The website incorporates Minecraft 3d characters, typography, and textures all designed to bring the reader into the Minecraft universe.

Drop Caps
3d dropcap renders made to match style of terrain blocks in Minecraft.
Parallax scrolling and 3d environment designed to mimic overhead scroll video games.

We recreated a 3d model of a neighborhood street in Hanoi and imported some actual designs from students who used Minecraft to reimagine public spaces in Vietnam. Additional “easter eggs” were added throughout the site to reward the more careful and engaged user.