What is this?

Inspired by some beautiful artwork created in 2022 by my Work & Co colleagues Manoel Amaral and August Tang (in turn inspired by the diversity of gender identity flags), it’s an interactive visual and audio art generator called Rainbow Sounds. You can use a touch screen, your computer keyboard or a MIDI keyboard to create unique color gradients based on the musical notes and chords you play. As someone who aspires to be a meaningful ally to so many of my co-workers, friends and loved ones who identify as LGBTQ+ (and as someone with auditory-visual synesthesia!), I thought it would be really powerful to explore connections between sound, color, and identity. Give it a try and please feel free to share what you come up with!

How did I build it?

Rainbow Sounds is built with React, TypeScript, Tone.js, and WebMIDI. It’s hosted on Vercel and uses Material UI for the UI components, as well as Puppeteer for capturing screen shots. The code is open source and available on GitHub.