Strudel Sequencer

Live Demo: https://strudel-sequencer.netlify.app/

A step sequencer built with React and Strudel (TidalCycles for the web). Strudel brings the power of TidalCycles live coding to the browser.

Features

• Multi-track step sequencer with visual playhead and auto-scroll
• Organized sample library with color-coded categories
• Real-time tempo control (BPM, bars, beats per bar)
• Keyboard shortcuts (Spacebar: play/pause, Escape: clear tool)
• Dark theme with glassmorphism effects

Tech Stack

• React 19 + Vite
• TailwindCSS 4
• Framer Motion (animations)
• Strudel (@strudel/core, @strudel/mini, @strudel/webaudio)
• Lucide React (icons)
• @number-flow/react (animated number input)

Getting Started

npm install
npm run dev          # Start dev server at localhost:5173
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint
npm run format       # Format with Prettier

Usage

1. Click "Enter Studio" to initialize the audio engine
2. Select a sample from the sidebar
3. Click grid cells to add samples to steps
4. Press Spacebar or click PLAY to start playback
5. Adjust tempo with BPM, Bars, and Beats/BAR controls
6. Add tracks with + button, remove by hovering and clicking trash icon

Project Structure

src/
  app/              # Main application component
  audio/            # Audio engine (Strudel integration)
    engine/         # Audio initialization and engine
    scheduler/      # Pattern scheduling logic
    helpers/        # Timing, sample loading, and library management
  components/       # React components (atomic design)
    atoms/          # Basic UI elements (Button, StepCell, etc.)
    molecules/      # Composite components (SampleButton, PlaybackButton, etc.)
    organisms/      # Complex sections (ControlBar, SequencerGrid, Sidebar)
    pages/          # Page-level components (IntroScreen, SequencerPage)
  context/         # New context providers and hooks
    hooks/          # Context-specific hooks
  hooks/            # Custom React hooks (audio, playback, keyboard, etc.)
  styles/           # TailwindCSS layers (base, components, utilities)
  utils/            # Utility functions (grid, sample management)
  types/            # Constants and type definitions

Architecture

• Atomic Design: Components organized by complexity
• Custom Hooks: State management (sequencer, playback, audio)
• Separation of Concerns: Audio, UI, and state clearly separated
• No External State Library: Pure React hooks

Browser Support

Requires Web Audio API (Chrome, Firefox, Safari latest versions)

Credits

This project is built with these amazing open-source libraries:

• Strudel - TidalCycles for the web, bringing live-coding power to the browser
• React - A JavaScript library for building user interfaces
• Framer Motion - Production-ready animation library
• @number-flow/react - Animated number input component
• Lucide React - Beautiful, consistent SVG icon library
• TailwindCSS - Utility-first CSS framework

License

MIT