Client Project: First Harmonic

Audio-visual website for early stage investor group

At the beginning of the year, I was contacted by longtime collaborator The Rivalry to jump in and help make a homepage for a client of theirs: First Harmonic. The company is a small team of former operators in the tech sector focused on go to market strategies for early stage startups. As the name implies, the company’s vision and roots lie in the sonic space — hoping to work with companies at that first harmonic and giving them a leg up to higher order sounds.

This was the vision that was presented to me with a logo mark and some other design explorations about how to visualize this. Despite initially being averse to sound on websites, the client came around when I put together a polyphonic prototype where a note echoed for every vertical line intersection that was passed by the mouse or finger on touch. The rippling visual effect, which is actually just vertical lines connected to springs, resonates with the echo of that specific note. The bottom-left corner represents the lowest order C and the top-right corner is the highest order B. All notes lie on the C major scale giving the sound space cohesive structure. The lines are drawn in SVG using none other than the library I maintain, Two.js and relies on masking, vertex manipulation, and layering unique to the library to get the final look and feel.

The end result is a tiny bit of music theory packed into a simple interaction with vector fluid lines and a layered grain. I find it subtle, but compelling to sit with it for a few minutes and explore the space. Hear the space. See the space,

—Jono