Alicia Keys

Roles: Development, Animations, JavaScript, Responsive

The very first Mouthwash x Antinomy collaboration.

In the Summer of 2021, LA-based creative studio Mouthwash contacted us to collaborate on Alicia Keys’ new website.

We were tasked with building a fluid, design-forward frontend and an easy-to-update CMS that could be added to regularly.

 

Official website of renowned artist, Alicia Keys.

The website includes a record gallery, shows & appearances page, and more — all given an editorial refresh that feels in line with Keys’ artistry.

Customizable layouts

New content is regularly added to the site’s CMS, so we built a flexible layout editor that accounts for images, text length and video to keep the site looking seamless.

Challenge of animating blur

A central design feature includes blurred images, which can be found throughout the site. One challenge was recreating these effects without sacrificing performance.

Animating blur on the web can get costly, so we implemented Prismic’s Image CDN to generate alternative, blurred versions of the images in the CMS.

Technologies

The site was developed using Nuxt.js (Vue.js), GSAP for animations and Prismic as headless CMS.

Credits

Design by Mouthwash.
Custom typeface by Dinamo.
Development by Antinomy.

Discover more projects

Alicia Keys

Roles: Development, Animations, JavaScript, Responsive