Bright Notion

Featured Project

DOM-as-audio-visualiser for an independent music publisher

Project Shots

Editing environment

About the project

Bright Notion are an independent music publisher, who needed a small website to promote the artists they represent and define themselves in the industry.

The main feature of the website is the DOM-as-audio-visualiser, something I’ve long dreamt of doing in any guise that someone would let me. By sampling the audible audio spectrum of a given song, I was able to generate an array of numbers which I dispatched to a Vuex store to be used at leisure throughout the application.

I initially started by animating choice bits of title text as appropriate, however I’ve long been inspired by Simeon Grigg’s ingenious cookery website, which used Sanity’s Portable Text to enrich the cookery experience for users with dynamic measurements. Since coming across it, I’ve been far more attentive in looking for opportunities to exploit Portable Text for fun opportunities of my own...

In this case, I realised it would be possible to make some simple text annotations – one, named "PartyMode", a simple boolean which rendered any text selected as music-responsive, and another which accepted a reference to a specific piece of music, hereby acting as another trigger to play the song, and facilitating the dancing text within a paragraph context.