Cascade is a live-coding environment
It runs in the web browser, parasitizing CSS to play MIDI signals

Code on Gitlab video channel

/!\ This project is currently under development


Cascade is a live-coding parasite to Cascading Style Sheets




The following commands can be executed in your browser devtool console:


This table associates graphic and sound characteristics. Some properties are vague on purpose (positions) because they can be impacted by many CSS rules: top, right, bottom, left, margin, transform, flex

CSS Sound Comments
background color bpm Only body’s background color luminosity will set the piece’s bpm. e.g. yellow= 150 bpm MidnightBlue = 81 bpm.
horizontal position delay Time delay within the time period: if the element 10% from the left, it be delayed 10% after the time.
vertical position note The midi note pitch. Higher = louder.
width / height ratio beat distribution The width / height ratio sets the number of beats and the number of steps, following Godfried Toussaint’s euclidean rhythm distribution. E.g a ratio 8:13 will play 0 1 1 0 1 1 0 1, 1:2 will play 1 0. The ratio ignores the orientation, in this sense 4:3 = 3:4 ; The greatest of the two ratio numbers is always used for the number of steps, and the smallest for the number of beats.
background color channel The background-color of an element will define the MIDI channel (instrument): Cascade comes by default with 10 color CSS variables you can overwrite, those variable numbers (e.g.:--c3) will set the instrument to MIDI channel 3. Any other color will be interpreted as the closest one defined by a variable.
Surface Velocity (volume) The surface of an element (with × height) will affect the volume of the associated instrument. The bigger the louder.
Opacity Probability The opacity value will affect the chance an element will have be played. E.g. opacity:0.5; will play the element randomly 1 over 2 times.
More to come…

Dinstinctive features

MIDI setup

Cascade acts like a midi controller, it does not make any sound of its own. For that reason, you will need a digital audio workstation (DAW) or MIDI hardware, or anything else that can play sounds from a MIDI input. If you don’t know where to start, I recommend LMMS, a cross-platform, open-source digital audio workstation. To create MIDI instruments, follow those few steps :

Video tutorial

Note on CSS properties

Only few CSS properies are interfaced with sound, the other properties are ignored. The chosen CSS properties were picked because of the following reasons:


Contributions are welcome, let’s talk about your feedback and ideas in the issues.