Hellblade - Senua’s Sacrifice

Breathing new life into the official site to support the enhanced version of this staggeringly beautiful 2017 classic.

www.hellblade.com

Ninja Theory

Project Overview

To celebrate the enhanced release of Hellblade: Senua’s Sacrifice on Xbox Series X, S and PC Staak we asked by our good friends Ninja Theory to give the game's official site a suitable enhancement of its own.

The character of Senua is so iconic and the game itself has always been a best in class example of its use of facial motion capture. With this in mind we wanted to align to this and create immersion in the website experience by using depth maps to bring the original 2D art to life.

The luminance values in our depth map allowed us to animated the 2D image to give the impression it existed in 3D space, we then tracked this 3D map to the movement of the users cursor giving the impression that Senua’s face was following them.

To add further immersion and breath life into the site we used a WebGL particle system to animate fire embers which flickered and glowed into existence which in turn were overlaid on slowly animating atmospheric smoke.

Using a combination of React Three Fibre and custom shaders we then also utilised WebGL to create a spine like structure to hold the Development Blog articles, taking a fairly basic content type but giving it a unique twist.

The final ingredient was incorporating an immersive soundscape over the experience, this was managed using the Howler.js audio library. Taken directly from the in-game audio track, these worrying internal thoughts and murmurs of Senua’s developing psychosis really helps ground the user in the world of Senua.

The site was developed using NextJS as the frontend integrated with a headless Wordpress API backend. This was then deployed on Azure using a Azure Dev Ops pipeline to build the docker images before pushing to Azure Container Registry to be deployed across Azure App Services.

Tech stack

  • Azure
  • Docker
  • Howlerjs
  • Next.js
  • React Three Fiber
  • Tailwind
  • WebGL
  • Wordpress