Hero

adidas
4DFWD
—

Next.js
Website.

TextBlock

Overview

An interactive React game built for the adidas flagship store in London, UK.

The game revolves around a series of challenges - draw a shape, tap & hold, or perform an exercise. In between each challenge the user is shown information about the product and campaign videos.

Under the hood the game utilises several of React's core APIs, along with the GSAP animation library.

React Development
Animation and Interaction
Vercel Integration

ProjectFeatures

Highlights5

Idle screen

A GSAP animation that plays until a user interacts with the screen. The user can tap & hold to start the game.

Shape drawer and gestures

Drawing and gesture challenges display as the user plays through the game. A shape recogniser is used with Paper JS to determine whether the user has drawn the correct shape.

Inactivity screen

A message displays after a period of inactivity and the game resets. This is done with Javascript by tracking touch events and using setTimeout to show the message when a threshold is hit.