Projects

public / 2021

Real Stories Inspire

Interactive story experience for Saudi Aramco.

An interactive storytelling experience created to showcase inspiring real stories from Saudi people through polished visuals, animation, interaction and intuitive navigation.

Showcase

Ali Story Interaction

Project Context

Real Stories Inspire was an interactive storytelling experience created for Saudi Aramco to showcase inspiring real stories from Saudi people.

The experience combined polished visuals, animation, interactive elements and intuitive navigation. It was designed with future content in mind, so the structure needed to be versatile, modular and readable beyond the initial Goodboy Digital team. Goodboy produced a handful of the stories, while remaining stories were intended to be handled by a third-party team.

The team consisted of four key people: a designer, two developers and a producer. The project moved through multiple development cycles, one per story. I was the lead developer, responsible for overseeing the development work and keeping the code fast, reliable and reusable.

The original interactive experience is no longer represented online in the same form, as the currently available version appears to have moved toward video-based presentation.

Stories

  • The Man Who Sowed Tomorrow
  • The Seamstress Who Sewed the Future
  • The Writer Who Caught the Clouds

Object-Oriented And ECS Architecture

The experience used object-oriented programming alongside an entity-component-system style architecture. This helped keep interactive behaviour, rendering and scene logic modular across multiple stories.

The approach made it easier to reuse shared systems, assemble story-specific components and keep the wider experience maintainable as more content was added.

Marrying 3D And 2D

Scenes reacted to mouse and touch position by moving and rotating in a way that created depth and parallax.

Under the hood, each scene was represented as a 3D game object containing other 3D objects. The positioning of 2D elements, including Spine animations and PNG assets, was then mapped into that scene structure. The depth position of each object affected the amount of parallax applied, producing a richer layered presentation while still using 2D artwork.

Artist-Curated Scene Reveal

Manually authored brush-stroke transitions did not produce the desired visual result, so I added debug tooling that allowed the project to create a canvas for drawing with mouse input.

That tool made it possible to record and play back artist-created brush strokes. The resulting transition data was stored in JSON and used in the production build, with configurable options such as step, speed, alpha and texture.

Technical Aspects

  • Object-oriented and entity-component-system architecture
  • Modular story framework for future content expansion
  • 3D scene object mapped to 2D Spine and PNG elements
  • Mouse and touch driven parallax interaction
  • Artist-curated brush-stroke scene reveal tooling
  • Canvas-recorded transition playback from JSON data

Challenges

  • The experience needed to support multiple story releases across separate development cycles.
  • The structure had to be modular enough for future content and readable enough for third-party developers to extend.
  • The scenes needed to combine rich animation, interaction and visual polish while remaining reliable in the browser.

Contributions

  • Led development across a small team of four, working with a designer, another developer and a producer.
  • Oversaw the technical structure so the code stayed fast, reliable, reusable and understandable for external teams.
  • Built interactive story systems that supported multiple stories with shared architecture.
  • Worked on the 3D and 2D scene composition used to create depth, parallax and animated presentation.
  • Added debug tooling that allowed artists to record brush-stroke reveal paths for production playback.