I would like to introduce a work in progress called Cascade. It is a live-coding parasite to Cascading Style Sheets (CSS). It runs in the browser, interpreting HTML elements to midi signals, depending on the element’s styles and positions. This 7min video explains every important aspect of Cascade. I am however still in the development process and the branch I am working on right now will associate background colors to instruments (midi channels) instead of border styles.

Cascade interprets exactly the content of a web page. That means you can either prepare a page, change it live with the browser dev tools, or run prepared JavaScript scripts or CSS animations. Right now, I didn’t use it as much as I wish, because I am focused on the development, but I plan to focus on both performance and autonomous sound / visual pieces.

I am very interested in your feedback for both the sound / style association choices, and the interface choices.

Documentation // More videos // Source code


oh this is devilishly fun. what was your inspiration?

1 Like

The project inherits from a couple of experiments I have done before: for the CSS transformation influence on sound, Grovity for the microtiming rithmic writing, and Digimp, where I tried to tie together musical and visual improvisation. Work from other also inspired me: Godfried Toussaint’s Euclidean Algorithm for rhytmic generation, Orca for the idea of MIDI output instead of generating the sound in-app and all the live-coding scene. Finally tons of various visual inspirations, musical writing and the CSS spec itself.