About This Project

To celebrate the 20 year anniversary of Harry Potter and the Goblet of Fire, Warner Bros. Studio Tour wanted an interactive digital experience that could capture the magic, spectacle, and world-building of the Triwizard Tournament while engaging fans both online and on-site.

Built while I was working at Amazon Brand Innovation Lab, this project combined a rich multimedia website with an AR activation designed to extend the experience into the physical world. The goal was to create something cinematic, playful, and participatory: a journey through themed content, interactive storytelling, and a personalized moment of magic inspired by the Goblet of Fire itself.

I was involved from early ideation through pitch, helping shape and present the concept directly to Warner Bros. I then led the creative technology development of the experience, collaborating closely with a designer who created the Figma layouts and 2D assets. On the technical side, I built the interactive website experience and AR flow, and also optimized and edited the 3D Goblet of Fire asset in Blender for real-time use.

The website featured multiple interactive sections including video, animated text, 2D motion elements, scroll-based transitions, material animations, and interactive content reveals. One section used an ink-style animation to unveil hidden information on click, while another introduced a tarot-inspired quiz that guided users through a set of themed questions to reveal their ideal feature. A central interactive table allowed users to explore key objects from the experience and uncover additional content through navigation and animation.

The experience extended into AR via QR code. After scanning, users entered their name and details, then launched a world-tracked AR scene where a 3D Goblet of Fire appeared in their space. A parchment animated their name in handwritten form, and users could drag it toward the goblet, triggering VFX and SFX as it was drawn into the flames. This created a personalized and memorable interaction that connected the fantasy of the film with a tactile digital gesture.

I later deployed the experience to live within Amazon’s brand store ecosystem, where it functioned as a large-scale branded destination. It was also activated as part of a live installation in several UK locations (starting at King's Cross), where visitors gathered around a life-size dragon, scanned the QR code, and entered their names into the Goblet of Fire for a chance to win rewards.

Warner Bros. was extremely happy with the final result, and the experience stood out as a strong example of how interactive storytelling, web technology, and AR can come together in a way that feels both premium and magical.

Demo:

Impact

A cinematic interactive campaign and AR activation created for a major entertainment franchise, blending storytelling, play, and personalization across web and physical space.

Technical Details

Interactive multimedia website built with React, React Three Fiber, GSAP, Lottie, and CSS.
AR experience built with AR.js.
Fully accessible and deployed as a live Amazon brand store experience.

Responsibilities

Creative Technology Leadership: Led the technical direction of the experience from concept development through production, contributing to ideation, pitch, prototyping, and final delivery.

Interactive Web Development: Built the multimedia website experience, including animated content sections, scroll interactions, 2D and text animation systems, interactive object exploration, and themed quiz mechanics.

AR Experience Development: Developed the QR-triggered AR flow, including world placement of the 3D Goblet of Fire, personalized name input, animated parchment interaction, and final drag-and-drop ritual into the goblet with sound and visual effects.

3D Asset Optimization: Edited and optimized the Goblet of Fire 3D model in Blender to ensure strong real-time performance and visual quality.

Accessibility and Deployment: Ensured the experience was fully accessible and prepared it for deployment within Amazon’s brand store environment.

Cross-Functional Collaboration: Worked closely with design and stakeholder teams, translating creative direction into a polished and technically robust user experience.

Media & Press

Harry Potter: Triwizard Tournament | Warner Bros. Studio Tour | React, R3F, AR