Jeep Compass

View demo
Jeep Compass

Interactive showcase for the Jeep Compass launch. A 4-slide Swiper carousel with animated hotspot callouts per slide, plus device shake to trigger a reveal transition via DeviceMotion API.

Overview

FormatPage Grabber
PlatformDesktop + Mobile + Tablet
EngineSwiper + Shake.js
AgencyUndertone

Interactive full-screen showcase for the Jeep Compass launch. A 4-slide touch carousel lets users swipe through the vehicle from different angles (exterior chrome, black roof, leather interior, and a configurator CTA), each slide carrying animated hotspot callouts that reveal spec details. Shaking the device triggers a transition via the DeviceMotion API, playing into Jeep's rugged brand positioning.

The shake is the centerpiece interaction. The DeviceMotion API detects acceleration above a threshold and fires a custom 'shake' event that advances the creative.

How It Works

~2s

Launch

Page Grabber expands. Header animates in with Jeep logo, Compass badge, and tab navigation bar. Slide 1 loads with feature hotspots hidden.

Interactive

Explore

Swiper carousel enables touch-swipe between 4 vehicle views. Each slide reveals 3 animated hotspot callouts: background tints, spec text, and detail imagery.

Event-driven

Shake

On mobile, shaking the device (acceleration > 15 threshold) triggers a custom event that advances or reveals the next feature set.

End State

CTA

Tab navigation lets users jump directly to any slide. Final slide includes build-and-price CTA tracked through the ad platform.

Engineering

Device Shake Detection

Shake.js listens to DeviceMotion events and calculates velocity from accelerometer delta. When velocity exceeds threshold (15), a custom 'shake' event fires. 1000ms debounce prevents rapid re-triggering.

Swiper Carousel

4-slide touch carousel with hardware-accelerated CSS transforms. Each slide has independent hotspot elements that animate in sequence after the slide transition completes.

Adaptive Navigation

Desktop renders a tabbed nav bar with 4 clickable regions. Tablet gets a resized variant with separate asset files. Mobile relies on swipe gestures and shake interaction.

Per-Slide Hotspots

Each slide contains 3 feature callout boxes (slideBox1, slideBox2, slideBox3) with independent background tints and text overlays. GreenSock staggers their entrance after slide transition.

Engineering Decisions

The brief called for a 'discovery' moment. Physical shake creates a visceral connection between the user and the vehicle reveal: more memorable than a button tap for an automotive launch.

Swiper provides hardware-accelerated transforms, momentum scrolling, and tested touch event handling out of the box. Building a custom carousel would have tripled QA across devices.

The tab navigation has precise hit areas per vehicle feature. Scaling a single asset breaks tap targets on tablet. Separate rendered PNGs per breakpoint guarantee accurate interaction zones.

Each vehicle angle highlights different features. Slide 1 shows chrome accents, Slide 2 shows interior leather. A shared hotspot layer would need complex position recalculation on every swipe.

Project stack

More projects