Blizzard: World of Warcraft

Overview

FormatSparkFlow + Page Grabber

PlatformDesktop + Mobile

EngineGreenSock

AgencyUndertone

Interactive campaign for Blizzard's World of Warcraft expansion. The creative drops users into a parallax world map where hotspots reveal new zones, raid bosses, and class features. A character class carousel lets players explore what's new for their main, and the cinematic trailer plays inline.

This was one of the gaming-vertical campaigns where the audience expected visual polish on par with the game itself. The ad had to feel like a piece of the Warcraft universe, not a banner.

How It Works

~2s

Open

Ad expands. Background environment layers load with depth parallax. Atmospheric particle sprites begin looping.

~4s

Character Reveals

Key characters animate in with staggered GreenSock entrances: scale, opacity, and position tweened per character with offset timing.

Interactive

Explore

Hotspot regions pulse on the map. Tapping/clicking a hotspot reveals a tooltip with region lore and a deep link to the game's pre-order page.

End State

CTA

Pre-order button and expansion logo remain anchored. Click tracking fires through the ad platform SDK on every interaction.

Engineering

Parallax Depth System

Environment artwork split into foreground, midground, and background layers. Each shifts at a different rate on mouse move or device tilt, creating a diorama-style depth effect.

Staggered Reveals

GreenSock.staggerFrom animates characters in sequence. Each character has a unique entrance vector (direction, scale, opacity) timed to land in compositional order.

Interactive Hotspots

Positioned absolutely over the parallax scene. Each hotspot manages its own show/hide state, tooltip rendering, and click-through URL. Hotspots suppress parallax movement while active.

Dual Format Rendering

Same codebase renders in SparkFlow (in-page, scrollable) and Page Grabber (full-page takeover). Viewport dimensions and close behavior switch based on format flag set by the ad server.

Engineering Decisions

Gaming audiences expect interactivity. A passive animation feels like TV: hotspots give the user agency and increase time-spent-in-unit, which drives viewability metrics.

The Warcraft art style is built on depth: foreground characters, midground structures, background landscapes. Parallax preserves that depth language in the ad format.

Consistent cross-browser rendering was non-negotiable. Canvas particle systems looked different in every browser. Pre-rendered sprite frames guarantee the exact visual the art director approved.

Maintaining two codebases doubles QA effort. A format flag that switches viewport calculations and close behavior is one conditional: not two repos.