A Pure Person

Web Development

July 2020 - September 2020


Product design, front-end development


Javascript, HTML, CSS, Sass, GatsbyJS, CurtainsJS, Web Audio API

The Idea

The Lin Qiang & Guests production team wanted a website to accompany the release of their album. Priorities for the site included:

  1. A minimal design very close to the digital and physical album cover
  2. A type of audio-visual interactivity for each track

Inspirations included Holodec.world’s very cool website by creative digital design and development agency Bureau Cool. The way the album was designed, however, begged a simpler design for the interactivity.

Looking at the fairly minimal design, I proposed a type of audio visualization with the image associated with each track.

Rippling image

Research, Tools, and Processes

While I hadn’t executed an interactive creative concept like this, I was very excited to dive in. Research and requirements led me to Web Audio API + CurtainsJS.

I initialized the project with Gatsby.js thinking we would have more pages to work with, but as the album cover design was finalized, I stripped the structure of the site down to match.

Combing through documentation for both Web Audio and CurtainsJS, I learned how to create a simple plane, loaded image textures, create audio analyzer nodes and accessed audio data. I connected audio data to the simple plane animation effects using audio frequencies and mouse delta values.

The team wanted to use the website animation effect for the visual of the streamers, so I also helped the team create screen recordings for “streamers”, or audio previews to be posted on Instagram and Youtube.

Towards the end of the project, I tested and optimized the site for accessibility and improved performance with code-splitting and lazy loading.

Square Streamers

The Site

For the soft launch and teaser, the team requested that only certain tracks be available before October 15th, the hard launch of the album.

The project is currently live at apureperson.com.