ChronoFlow Web-Based Modular Synthesizer & Generative Music Machine

ChronoFlow is a browser-based modular synthesizer with 57 module types, hierarchical patching, send/return effect buses, a real-time audio analysis API for visuals integration, and generative sequencing tools designed for ambient music.

▶ Launch ChronoFlow

Quick Start

1. Open ChronoFlow in a modern browser (Chrome, Firefox, Edge).
2. Click anywhere to enable audio (required by browsers).
3. Load a demo patch from the Patch Manager in the left sidebar — try 🌊 Submerged Cathedral or 🔔 Glass Rain.
4. Add modules by dragging from the Node Palette or right-clicking the canvas.
5. Connect by dragging from an output port (right side) to an input port (left side).
6. Tweak knobs by clicking and dragging up/down.

Interface Guide

Layout

• Header: Undo/Redo, Search (⌘K), Piano toggle, Audio status
• Left Sidebar: Node Palette, Recording Panel, MIDI, Patch Manager
• Canvas: The graph editor where you build patches
• Bottom: Piano keyboard (toggle with P)

Knobs

Click and drag vertically. Hold Shift for fine control. Double-click to reset to default.

Signal Indicators

Each node shows a small LED that glows green (signal present) or orange (loud). Output nodes show a level meter.

Module Reference (57 Types)

🎵 Sources

🎛️ Modulators

⏱️ Sequencing

🔧 CV / Logic

🏗️ Structure

🔊 Processing

✨ Effects

🔀 Routing

Demo Patches

Connections & Signal Types

Drag from any output port (right side of node) to any input port (left side). Modulation inputs (CV) appear as small purple dots on the top of nodes. All signal types are compatible — ChronoFlow is permissive like real modular synths.

Send/Return Buses

Send/Return enables parallel effects processing — the studio standard for ambient music production.

How It Works

1. Place a Send node in your signal chain. It passes audio through while tapping a percentage to a named bus.
2. Place a Return node set to the same bus name. It receives all audio sent to that bus.
3. Connect the Return to your shared effect (e.g., Shimmer Reverb).
4. Multiple Sends can feed the same bus — one reverb serves your entire mix.

Bus Names

Available: A, B, C, D, reverb, delay. The name is just a label — any Send and Return with the same name are connected.

Keyboard Shortcuts

Key	Action
⌘K / Ctrl+K	Command Palette (search everything)
P	Toggle piano keyboard
⌘Z	Undo
⌘⇧Z	Redo
Delete / Backspace	Delete selected nodes
A–K (piano row)	Play notes on piano keyboard

Visuals Integration API

ChronoFlow includes a real-time Audio Analysis Bus that external JavaScript can subscribe to for driving visuals (Three.js, p5.js, Canvas, WebGL, etc.).

import { audioAnalysisBus } from 'chronoflow/engine';

// Subscribe to full spectrum data at 60fps
audioAnalysisBus.onSpectrum((data) => {
  // data.bands.bass     → 0-1 bass energy
  // data.bands.treble   → 0-1 treble energy
  // data.centroid        → spectral brightness (Hz)
  // data.loudness        → 0-1 RMS loudness
  // data.beat            → boolean beat detected
  // data.beatStrength    → 0-1 beat intensity
  // data.envelope        → smoothed amplitude
  // data.frequencies     → Float32Array FFT data
  // data.waveform        → Float32Array oscilloscope data

  updateVisualization(data);
});

// Or subscribe to specific features:
audioAnalysisBus.onBeat(({ beat, strength }) => {
  if (beat) triggerParticleExplosion(strength);
});

audioAnalysisBus.onBands((bands) => {
  setBackgroundColor(bands.bass, bands.mid, bands.treble);
});

// Configuration
audioAnalysisBus.setFFTSize(4096);        // Higher frequency resolution
audioAnalysisBus.setFrameRate(30);         // Lower rate if 60fps not needed
audioAnalysisBus.setBeatSensitivity(1.3);  // Lower = more sensitive

Headless Engine SDK

Use ChronoFlow's audio engine without the UI — embed it in any web project.

import { ChronoFlowEngine } from 'chronoflow/engine';

const engine = new ChronoFlowEngine({
  masterVolume: 0.7,
  autoConnect: true,  // connects to AudioContext.destination
});

await engine.init();
engine.loadPatch(myPatchJSON);

// Tweak parameters at runtime
engine.setParam('delay-1', 'mix', 0.6);
engine.setParam('shimmer-1', 'shimmer', 0.8);

// Play notes
engine.noteOn(60, 100);  // MIDI note 60, velocity 100
engine.noteOff(60);

// Route to your own audio graph
engine.disconnectFromDestination();
engine.routeTo(myGainNode);

// Event callbacks
engine.on({
  onParamChanged: (nodeId, param, value) => { ... },
  onPatchLoaded: (patch) => { ... },
});

Ambient Music Tips

Building Drones

Start with a Drone Oscillator in fifths or octaves mode. Set drift to 0.3–0.5 and spread to 15–25 cents. Route through a lowpass filter with a very slow LFO (0.03–0.1 Hz) on the cutoff. Send 50–70% to a Shimmer Reverb bus.

Generative Melodies

Use Turing Machine → Slew Limiter → Quantizer (pentatonic scale). Feed the quantized CV to a Karplus-Strong or Oscillator's frequency mod input. Clock the Turing Machine from an Euclidean rhythm for irregular timing.

Frozen Textures

Feed any interesting audio into a Spectral Freeze. Enable freeze, set blur to 0.6–0.9, and adjust brightness to taste. The shift parameter moves the frozen spectrum up/down in pitch — try +7 semitones (a fifth) for harmonic interest.

Tape Character

Replace clean delays with Tape Delay. Set degradation to 0.5+ so each repeat gets darker. Increase wow/flutter for pitch instability. Chain into Shimmer Reverb for infinite dissolving echoes.

Parallel Effects with Send/Return

Instead of putting reverb inline (which makes everything wet), use Send/Return. Each sound source gets its own send amount to the reverb bus. This keeps the mix clean while still having deep, shared reverb.

Long-Form Evolution

Use Smooth Random nodes to slowly modulate filter cutoffs, reverb mix, and delay feedback. Set rate to 0.02–0.08 Hz for changes that happen over 15–60 seconds. Use Scene Chain for structural progression over minutes.