Strudel Flow

A visual drum machine and pattern sequencer built with Strudel.cc, React Flow, and styled using Tailwind CSS and shadcn/ui. Create complex musical patterns by connecting instrument nodes to effect nodes with a drag-and-drop interface.

Live Demo

Table of Contents

• Getting Started
• Tech Stack
• Node Types
• Usage Guide
• Pattern Syntax
• Development
• Contributing

Getting Started

To get started, follow these steps:

1. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

2. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

Tech Stack

• Audio Engine: Strudel.cc - Web-based live coding environment

• React Flow Components: The project uses React Flow Components to build nodes. These components are designed to help you quickly get up to speed on projects.

• shadcn CLI: The project uses the shadcn CLI to manage UI components. This tool builds on top of Tailwind CSS and shadcn/ui components, making it easy to add and customize UI elements.

• State Management with Zustand: The application uses Zustand for state management, providing a simple and efficient way to manage the state of nodes, edges, and other workflow-related data.

Node Types

🎵 Instruments

• Pad Node - Grid-based step sequencer with scales and modifiers
• Beat Machine - Classic drum machine with multiple instrument tracks
• Arpeggiator - Pattern-based arpeggiated sequences with visual feedback
• Chord Node - Interactive chord player with scale selection
• Polyrhythm - Multiple overlapping rhythmic patterns
• Custom Node - Direct Strudel pattern input

🎛️ Synths

• Drum Sounds - Sample-based drum sound selection
• Sample Select - Custom sample playback and selection

🎚️ Audio Effects

• Gain - Volume control and amplification
• PostGain - Secondary gain stage
• Distortion - Saturation and harmonic distortion
• LPF - Low-pass filtering with cutoff control
• Pan - Stereo positioning and width
• Phaser - Sweeping phase modulation effect
• Crush - Bit-crushing and sample rate reduction
• Jux - Alternating left/right channel effects
• FM - Frequency modulation synthesis
• Room - Realistic acoustic space simulation with size, fade, and filtering controls

⏱️ Time Effects

• Fast - Speed multiplication (×2, ×3, ×4)
• Slow - Speed division (÷2, ÷3, ÷4)
• Late - Pattern delay and offset timing
• Attack - Note attack time control
• Release - Note release time control
• Sustain - Note sustain level control
• Reverse - Reverse pattern playback
• Palindrome - Bidirectional pattern playback
• Mask - Probabilistic pattern masking
• Ply - Pattern subdivision and multiplication

Usage Guide

Creating Patterns

1. Basic Pattern:

   • Add a drum machine or pad node
   • Click buttons to activate steps
   • Adjust tempo with BPM control

2. Complex Patterns:

   • Use Shift+click to select multiple notes for grouping
   • Apply row modifiers for per-step effects
   • Chain multiple nodes for layered sounds

Connecting Nodes

• Source to Effect: Drag from sound source to effect node
• Effect Chaining: Connect multiple effects in series
• Multiple Sources: Connect multiple sources to the same effect

Pattern Modifiers

Each step can have modifiers applied:

• Normal: Standard playback
• Fast (×2, ×3, ×4): Speed multiplication
• Slow (/2, /3, /4): Speed division
• Replicate (!2, !3, !4): Note repetition
• Elongate (@2, @3, @4): Note duration extension

Performance Controls

• Global Play/Pause: Press spacebar to pause/resume all active patterns
• Group Controls: Pause/resume connected node groups independently
• Live Pattern Editing: Modify patterns while playing with real-time updates
• Pattern Preview: View generated Strudel code for each node

Keyboard Shortcuts

• Spacebar: Global play/pause toggle
• Shift + Click: Multi-select grid cells for grouping (in Pad nodes)
• Right-click: Context menu for pattern modifiers

Development

Project Structure

src/
├── components/          # React components
│   ├── nodes/          # Flow node components
│   │   ├── instruments/ # Instrument node implementations
│   │   ├── effects/    # Effect node implementations
│   │   └── synths/     # Synthesizer node implementations
│   ├── ui/             # shadcn/ui components
│   ├── workflow/       # Flow editor components
│   └── edges/          # Custom edge components
├── data/               # Static data and configurations
├── hooks/              # Custom React hooks
├── lib/                # Utility libraries and core logic
├── store/              # Zustand state management
└── types/              # TypeScript type definitions

Acknowledgments

• Strudel.cc
• tweakcn
• React Flow
• shadcn/ui

---

Contact Us

We’re here to help! If you have any questions, feedback, instrument recommendations, or just want to share your project with us, feel free to reach out:

• Contact Form: Use the contact form on our website.
• Email: Drop us an email at [email protected].
• Discord: Join our Discord server to connect with the community and get support.