A browser-based generative music sequencer with a radial visualization, Web Audio synthesis, and AI-powered layer creation via Claude.
- Radial step sequencer -- canvas-based ring visualization with per-layer colour coding, edit mode for dragging parameters, breathing animations on mutation
- Three generator algorithms -- Euclidean (Bjorklund), step-sequencer, and probabilistic density patterns
- Synthesizer voices -- oscillator-based (ADSR + filter), sample playback, and drum synth, each with a chainable effects system (delay, reverb, distortion)
- AI layer generation -- describe a layer in natural language via the command palette; Claude generates pattern configs and synthesizer modules on the fly
- Modulation matrix -- map external inputs (phone accelerometer, WebSocket, BroadcastChannel) to any parameter with curve shaping and exponential smoothing
- Mobile controller -- open
/controller.htmlon a phone to send tilt/shake data over WebSocket or same-device BroadcastChannel - Scene management -- multiple scenes with independent BPM, scale/key, chord progressions; localStorage persistence
- Preset system -- save, load, import/export JSON presets
| Layer | Tech |
|---|---|
| Frontend | Vanilla ES modules, Canvas 2D, Web Audio API |
| Backend | Express + TypeScript, WebSocket (ws) |
| AI | Claude Agent SDK (subscription mode) with BYOK fallback |
| Build | Vite (dev + prod), @vitejs/plugin-basic-ssl for local HTTPS |
| Tests | Vitest |
# Install dependencies
npm install
# Set your Anthropic API key (optional -- enables AI features)
cp .env.example .env
# edit .env with your key
# Start dev server (HTTPS on localhost:3000)
npm run devOpen https://localhost:3000 in your browser. Accept the self-signed certificate warning.
Open https://<your-local-ip>:3000/controller.html on a phone connected to the same network. Grant motion sensor permission when prompted.
| Key | Action |
|---|---|
| Space | Play / Stop |
| 1-9 | Select layer |
| M | Mute selected layer |
| X | Toggle modulation matrix |
| Cmd+K | Command palette (AI generation) |
npm run dev # Start dev server
npm run build # Production build
npm run preview # Preview production build
npm test # Run tests
npm run test:watch # Watch modesrc/
core/ # event bus, loop engine, scene manager, generators, modulation
audio/ # Web Audio voices, effects, sample library
ui/ # canvas renderer, transport, sidebar, command palette
generators/ # euclidean, step-sequencer, probabilistic
net/ # WebSocket client, input receiver, API wrappers
presets/ # built-in preset templates
modules/ # AI-generated synthesizer modules (runtime)
public/ # mobile controller
server.ts # Express + WS + Claude Agent SDK backend
MIT