Back to Projects

Magic Hats

Interactive PWA for HBO Max showcase

Overview

Progressive Web App developed for HBO Max in collaboration with brdg.co. An interactive carousel showcasing 23 iconic hats and headwear from film and television — from Cersei's crown to Gandalf's wizard hat — with rich trivia, quotes, and sequenced animations.

Role

Lead Developer

Timeline

June – August 2020

Team Size

2 developers

Deployment

Kiosk / Web

Tech Stack
Angular 8 TypeScript PWA SCSS Service Workers RxJS Google Analytics
Client

HBO Max

Type

Entertainment

Key Features

Animated Carousel

Auto-advancing slideshow with sequenced fly-in animations and smooth fade transitions between 23 featured hats

Offline Support

Service worker with prefetch and lazy-load asset groups for reliable offline operation

Rich Content

Each hat features trivia, memorable quotes, actor/character info, release dates, and HBO Max streaming availability

Touch Optimized

Full-viewport layout with large touch targets, designed for iPad kiosks in public exhibition settings

Overview

Magic Hats was a collaborative project with brdg.co for HBO Max, creating an interactive digital showcase of 23 iconic hats and headwear from film and television. The app served as both a standalone web experience and a kiosk installation, promoting HBO Max content through a polished, animated carousel.

The Challenge

HBO Max needed a promotional experience that would:

  • Showcase iconic headwear across their content library in an engaging format
  • Run reliably on kiosk hardware without constant maintenance
  • Work smoothly offline in high-traffic public environments
  • Track user engagement with analytics

Solution

I built a Progressive Web App in Angular 8 featuring an auto-advancing carousel with carefully choreographed animations. Each hat entry includes the character, actor, show, release date, trivia, and a memorable quote.

Animation System

The slideshow uses a sequenced animation approach — hat images fly in from the right over 1.5 seconds, followed by a delayed info panel reveal at 2.5 seconds, creating a cinematic presentation effect. Slides auto-advance every ~11 seconds with smooth fade-out transitions between entries.

Flexible Image Positioning

Each hat has custom offset parameters (top_offset, left_offset) that dynamically control CSS object-position, allowing precise framing of each image without manual cropping or pre-processing.

PWA Architecture

  • Two-tier caching strategy: App shell prefetched immediately; images and assets lazy-loaded via Angular Service Worker
  • Full image preloading: All 23 hat images preloaded via <link rel="preload"> for seamless transitions
  • Installable: Configured as a standalone app for kiosk deployment
  • AOT compilation with build optimization for fast startup

Analytics

Google Analytics event tracking on every navigation interaction — capturing which hats users engaged with and whether they used manual navigation or let the carousel auto-advance.

The collection of 23 hats spans Warner Bros. and HBO properties including:

  • Cersei’s Crown — Game of Thrones
  • Gandalf’s Wizard Hat — The Lord of the Rings
  • Man In Black’s Hat — Westworld
  • Rorschach’s Fedora — Watchmen
  • Wonder Woman’s Tiara — Wonder Woman
  • Trinity’s Motorcycle Helmet — The Matrix
  • Jason Voorhees’ Mask — Friday the 13th
  • Bogart’s Fedora — Casablanca

Results

The Magic Hats experience provided an engaging, on-brand showcase for HBO Max content. The polished animations and offline-first architecture ensured a smooth experience across both web and kiosk deployments.