Hero

adidas 4DFWD.
React Web App [Next.js].

/(^a)/i

Text

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

Grid

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.

Leaderboard

When the game is completed the users score is added to a leaderboard. The leaderboard is synced to a live database in Vercel Postgres.

Full playthrough

Here's the game played from start to finish.

List

Built with

React
GSAP
Paper JS
Vercel

Grid

adidas 4DFWD.
React Web App [Next.js].

Overview