Audi

Overview

FormatInterscroller (Brand Reveal)

PlatformDesktop + Mobile

EngineGreenSock + Canvas

AgencyUndertone

Interscroller brand reveal for the Audi A8. As the user scrolls through editorial content, the ad viewport reveals a full-bleed dark canvas with an animated constellation particle network and the A8 hero image. The "SCROLL TO CONTINUE READING" prompt at the bottom signals a clean re-entry into the article.

Audi demands precision. The particle animation and vehicle reveal had to feel as engineered as the car itself, every node connection, every fade, every pixel.

How It Works

Scroll-driven

Scroll Entry

As the user scrolls past the editorial content above, the interscroller viewport begins to reveal. The ad canvas fills the screen with a dark background.

~1.5s

Particle Build

Animated constellation nodes and connecting lines render across the canvas, creating a technology-forward network graphic. Nodes pulse and connections draw progressively.

~2s

Vehicle Reveal

The Audi A8 front-view hero fades in center-frame. Audi four-rings logo and "One giant leap for machine kind" headline animate above the vehicle.

Scroll-driven

CTA + Exit

"Explore the all-new Audi A8 >" CTA appears below the vehicle. "SCROLL TO CONTINUE READING" prompt at the bottom lets users exit the ad and return to the article without interruption.

Engineering

Interscroller Viewport

The ad sits inline within article flow. CSS clip-path and scroll-position listeners create the "window" effect. Content scrolls over the ad, revealing it progressively rather than inserting it abruptly.

Particle Constellation

Animated network of nodes and edges rendered on canvas. Each node has randomized position, pulse timing, and connection logic. The effect evokes Audi's technology-forward brand positioning.

Scroll-Driven Reveal

GreenSock ScrollTrigger maps scroll position to animation progress. The vehicle, headline, and CTA entrance are tied to viewport intersection, not time. The user controls the pacing.

Brand Dark Mode

Audi's brand standard uses a dark background with high-contrast vehicle photography. All typography uses Audi Type font with exact weight specifications.

Engineering Decisions

Interscrollers live inline with editorial content. The user scrolls naturally and the ad reveals without interrupting flow. Takeovers and overlays break reading momentum. Interscrollers earn attention.

The constellation effect requires dynamic node positioning and edge rendering. CSS animations can't compute per-frame line connections between randomized nodes, so canvas gives pixel-level control.

The brand reveal is a moment, not an exploration. One powerful front-view image with the A8's signature grille and matrix LED headlights delivers more impact than a swipeable gallery.

Audi's design language is dark. Vehicle photography pops against black. White backgrounds are for press releases, not immersive product experiences.