Show HN: Strudel Flow, a pattern sequencer built with Strudel and React Flow

Summary

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 ...