Mastercard

Overview

FormatPage Grabber

PlatformDesktop + Mobile

EngineSwiper + GreenSock

AgencyUndertone

Full-screen ad for Mastercard's Priceless Cities campaign: a partnership with MLB to offer exclusive stadium experiences. The ad opens with an animated brand intro, then transitions to an interactive map with 9 stadium hotspots. Tapping a hotspot reveals a partner experience card with event details and a "Book Now" CTA that deep-links to the booking page.

How It Works

~3s

Brand Intro

Mastercard logo animates through multiple brand variants (full, headline, orange, red, text). Background transitions through brand color palette.

~1s

Map Reveal

Intro frame fades out. Interactive map slides in with 9 hotspot regions positioned over MLB stadium locations.

Interactive

Explore

Tapping a hotspot opens a partner experience popup: event imagery, description, terms disclosure, and "Book Now" CTA. Close button dismisses back to map.

Click-through

Book

"Book Now" fires a click-through tracked with a unique click attribution ID per hotspot (7 unique click IDs across the map).

Engineering

Interactive Hotspot Map

9 absolutely positioned hotspot divs over a map background. Each hotspot manages its own partner experience popup: show, hide, and click tracking are independent per region.

Logo State Machine

7 Mastercard logo variants (full, headline, headline_white, orange, orange-2, red, text) swap visibility based on interaction state. CSS class toggling with GreenSock fade transitions.

Partner Experience Cards

Popup cards with event imagery, terms disclosure text, and booking CTA. Each card has its own close button and unique click attribution ID for campaign analytics.

Dual-Frame Architecture

Two section elements: intro_frame and end_frame: act as discrete states. The transition between them is a full-screen crossfade, not a scroll.

Engineering Decisions

HTML image maps don't support responsive scaling or animated popups. Absolutely positioned divs resize naturally with the viewport and can contain complex child elements.

Mastercard needed to know which stadiums drove the most engagement. 7 unique click attribution IDs let them measure partner ROI per city.

The Mastercard logo has precise brand-mandated color values at each stage. CSS filters approximate but can't guarantee the exact brand hex. Pre-rendered PNGs ensure compliance.

The intro-to-map transition is a narrative beat, not a scroll. Discrete frames with animated transitions give the creative director full control over pacing.

Context

This was one of the more complex units I built at Undertone. Nine independent hotspot regions, seven logo variants, partner popups each with their own close and tracking logic. Most rich media ads have one or two interactive states. This one had closer to a dozen, and each had to work independently without breaking the others. The architecture ended up looking more like a single-page app than a typical ad build.