Microsoft Story Labs

I have had the privilege of working as a developer for a few of Microsoft's full page articles within Story Labs. They have done an excellent job curating stories that show the people behind the product and how it all comes together.

Roles

  • Web Development
  • Animation

Partner

Makeshift Studios

Speeds and Feeds

This heroic story of the Microsoft IT department saving the day for the release of Gears of War 4 uses small groups of rock and rubble to split clean sections of story. We used a slight parallax effect to make it feel like you're falling through the debris.

Various statistics and visual aids throughout the story were also given a bit of animation attention.

Securing the Cloud

Security is incredibly important, and Microsoft has a great piece about their approach to cloud security. This story has a minimal amount of animation and transition but was still a lot of fun to build. The darker visual style was a treat to work with.

Block Party

This is a lovely story about a program from the United Nations and Mojang, the makers of Minecraft, that uses the power of Minecraft and designs sourced from local residents to improve public spaces around the world. Our goal was to attempt to visually build a 3D Minecraft environment as the backdrop for the story. It was equally fun and frustrating and in the end I think it worked out great.

We were able to make use of CSS 3d transformations and perspective to make it appear as if the site was built with textured blocks. The perspective changes as the user scrolls down the page, along with webGL features and even a few pigs and chickens.

A fair amount of optimizations were used to make sure that hidden faces were not taxing the browser as the scrolling happens. Also a single plane can be used with the game's cleverly repeatable textures to appear as multiple blocks.

Related Work

☝️