Show HN: Strudel Flow, a pattern sequencer built with Strudel and React Flow
6 days ago
- #web-audio
- #react-flow
- #music-sequencer
- A visual drum machine and pattern sequencer built with Strudel.cc, React Flow, Tailwind CSS, and shadcn/ui.
- Features drag-and-drop interface for connecting instrument nodes to effect nodes.
- Install dependencies using npm, yarn, pnpm, or bun.
- Run development server with npm run dev or similar commands.
- Audio engine powered by Strudel.cc for web-based live coding.
- Uses React Flow Components for node building.
- shadcn CLI for managing UI components on top of Tailwind CSS and shadcn/ui.
- State management handled by Zustand for nodes, edges, and workflow data.
- Includes various nodes like Pad Node, Beat Machine, Arpeggiator, Chord Node, etc.
- Effect nodes include Gain, Distortion, LPF, Pan, Phaser, Crush, etc.
- Modifiers for steps include Fast, Slow, Replicate, Elongate, etc.
- Basic pattern creation involves adding nodes and activating steps.
- Complex patterns can be created with Shift+click for grouping and chaining nodes.
- Global controls include play/pause with spacebar and group controls.
- Live pattern editing and pattern preview available.
- Keyboard shortcuts: Spacebar for play/pause, Shift+Click for multi-select.
- Project structure includes components, data, hooks, lib, store, and types directories.
- Support available via contact form, email, and Discord.