Prototype 2025: Fader – Polyrhythmic Sequencer

Fader is a mobile-first generative music instrument built in the browser. It is a 4-lane polyrhythmic step sequencer that produces evolving compositions by running independent rhythmic lanes simultaneously — each at a different rate, each drawing notes from the same shared chord voicing in a shuffled, non-repeating order. The aesthetic model is the hardware modular world: Elektron DFAM, Cre8audio Subharmonicon — instruments where polyrhythmic interlock emerges from interconnected, independently-clocked subsystems.

Each lane occupies a distinct register. A bass voice runs at 8th notes with staccato articulation. An electric piano runs at 16th notes with medium sustain. A pad voice moves in half notes, slow and atmospheric. A percussive hi-hat layer fires at 16th notes with sci-fi texture. Because there is no global clock — each lane advances on its own schedule — the four voices drift in and out of phase with one another, generating patterns that feel alive rather than mechanical.

Controls

Each lane has four vertical fader sliders that control step velocity and staccato duration simultaneously, and per-step mute buttons for live variation. The interface is deliberately minimal: frosted glass panels, a max-width of 390px, and rotated range inputs repurposed as vertical sliders. It is designed to be held in one hand and played with a thumb.

Audio Engine

The scheduler runs on 25ms polling intervals with a 140ms lookahead buffer — the same model used in professional Web Audio timing implementations. Notes are pulled from a pooled, shuffled sequence of each chord's root, third, fifth, seventh, and ninth, ensuring harmonic coherence without literal repetition. The signal chain passes through a true stereo delay with independent left/right sync divisions, feedback, and tone control, followed by a convolution reverb with variable impulse response length, and a final dynamics compressor as a limiter. FX parameters are stored in a plain JS object outside React state so the audio engine reads live values without triggering unnecessary renders.

Visual System — React Three Fiber and Three.js

The background is a full-screen GLSL shader built with React Three Fiber and Three.js. Three.js is a JavaScript library that makes WebGL — the browser's low-level 3D graphics API — approachable. It handles geometry, materials, lighting, cameras, and the render loop, removing the need to write raw OpenGL-style code. React Three Fiber is a React renderer for Three.js: instead of managing the Three.js scene imperatively, you describe it as JSX components that fit naturally inside a React application. For a project like Fader, this matters because the visual layer and the audio engine are tightly coupled — note events need to trigger shader pulses, and chord changes need to shift the colour palette in real time. React Three Fiber lets that communication happen cleanly through the same state and ref system the rest of the app uses, without a separate rendering context fighting for control.

The shader itself uses layered 2D value noise with time-based distortion. Each note event fires a callback that triggers an intensity pulse with exponential decay, and simultaneously shifts the colour target toward the palette of the current chord. Colour interpolation runs at a 0.025 lerp speed — slow enough to feel continuous rather than stepped. The result is a visual field that responds to rhythm without feeling reactive in an obvious way.

Chord Library

24 pre-composed scenes provide the harmonic material. Each scene contains jazz and ambient voicings, a suggested tempo, and a full colour palette — background gradient, accent, and text colours. The sequencer cycles through scenes automatically, or can be advanced manually.