The Hunger Games | Aydar Nuriev

Overview

The 2023 campaign for The Hunger Games: The Ballad of Songbirds & Snakes included a responsive Next.js movie site and a separate image-target WebAR experience. I worked on accessible frontend behavior and the separate camera-based AR build. The original public site is no longer online.

I worked as part of a TVGla team that included design, production, content, and engineering.

The brief

Create a responsive movie campaign site and a separate image-target WebAR experience.

What I built

I contributed accessible responsive frontend work plus the separate camera-based AR build.

The result

The original public site is no longer online; these browser captures preserve the campaign interface.

Mobile browser capture of The Hunger Games campaign homepage with the original responsive layout — Mobile browser capture · sanitized historical preservation

My engineering work

Accessibility and responsive layout work
Responsive, accessible frontend implementation
Next.js, TypeScript, GraphQL, and a separate camera-based AR companion

Next.jsTypeScriptGraphQL8thWallA-FrameThree.js

Build details

These desktop and mobile browser captures come from a sanitized local preservation of the historical homepage. The original production site is no longer live, and the preserved client build stays local-only.

ContentStructured campaign content supplied copy, artwork, and responsive media.
GraphQLThe Next.js homepage queried the page sections it needed.
Next.jsTypeScript components rendered the campaign across desktop and mobile.
WebAR companionA separate 8th Wall and A-Frame site handled camera access and image tracking.

My roleCampaign site and separate WebAR build: I contributed engineering to the Next.js campaign site and a separate 8th Wall/A-Frame image-target experience with the TVGla team.
Why two buildsKeep camera code out of the campaign site: The Next.js site served CMS-managed campaign content. The separate AR site handled camera access and image tracking, keeping those device-specific needs out of the movie site.
What remainsHistorical project capture: The original public site is no longer online. This case study uses a historical capture; original client media and source code are not republished.