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. Table of Contents Getting Started To get started, follow these steps: Install dependencies: npm install # or yarn install # or pnpm install # or bun install 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 - Grid-based step sequencer with scales and modifiers Beat Machine - Classic drum machine with multiple instrument tracks - Classic drum machine with multiple instrument tracks Arpeggiator - Pattern-based arpeggiated sequences with visual feedback - Pattern-based arpeggiated sequences with visual feedback Chord Node - Interactive chord player with scale selection - Interactive chord player with scale selection Polyrhythm - Multiple overlapping rhythmic patterns - Multiple overlapping rhythmic patterns Custom Node - Direct Strudel pattern input 🎛️ Synths Drum Sounds - Sample-based drum sound selection - Sample-based drum sound selection Sample Select - Custom sample playback and selection 🎚️ Audio Effects Gain - Volume control and amplification - Volume control and amplification PostGain - Secondary gain stage - Secondary gain stage Distortion - Saturation and harmonic distortion - Saturation and harmonic distortion LPF - Low-pass filtering with cutoff control - Low-pass filtering with cutoff control Pan - Stereo positioning and width - Stereo positioning and width Phaser - Sweeping phase modulation effect - Sweeping phase modulation effect Crush - Bit-crushing and sample rate reduction - Bit-crushing and sample rate reduction Jux - Alternating left/right channel effects - Alternating left/right channel effects FM - Frequency modulation synthesis - Frequency modulation synthesis Room - Realistic acoustic space simulation with size, fade, and filtering controls ⏱️ Time Effects Fast - Speed multiplication (×2, ×3, ×4) - Speed multiplication (×2, ×3, ×4) Slow - Speed division (÷2, ÷3, ÷4) - Speed division (÷2, ÷3, ÷4) Late - Pattern delay and offset timing - Pattern delay and offset timing Attack - Note attack time control - Note attack time control Release - Note release time control - Note release time control Sustain - Note sustain level control - Note sustain level control Reverse - Reverse pattern playback - Reverse pattern playback Palindrome - Bidirectional pattern playback - Bidirectional pattern playback Mask - Probabilistic pattern masking - Probabilistic pattern masking Ply - Pattern subdivision and multiplication Usage Guide Creating Patterns Basic Pattern: Add a drum machine or pad node Click buttons to activate steps Adjust tempo with BPM control 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 : Drag from sound source to effect node Effect Chaining : Connect multiple effects in series : 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 : Standard playback Fast (×2, ×3, ×4) : Speed multiplication : Speed multiplication Slow (/2, /3, /4) : Speed division : Speed division Replicate (!2, !3, !4) : Note repetition : Note repetition Elongate (@2, @3, @4): Note duration extension Performance Controls Global Play/Pause : Press spacebar to pause/resume all active patterns : Press spacebar to pause/resume all active patterns Group Controls : Pause/resume connected node groups independently : Pause/resume connected node groups independently Live Pattern Editing : Modify patterns while playing with real-time updates : Modify patterns while playing with real-time updates Pattern Preview: View generated Strudel code for each node Keyboard Shortcuts Spacebar : Global play/pause toggle : Global play/pause toggle Shift + Click : Multi-select grid cells for grouping (in Pad nodes) : 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 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: