✦ Preact Audio Pattern Sequencer

Low-latency Drum Machine & Audio Sequencer built with Preact Signals to showcase extreme zero-VDOM reactivity and direct Web Audio API bindings.

---

✨ Highlights

• 8-track, 16-step interactive audio sequencer.
• Synthesized Web Audio API drum and synth sounds—no external samples to download.
• 100% fine-grained reactivity using @preact/signals—bypassing Virtual DOM diffing entirely for playhead updates and grid interaction.
• Direct slider-to-audio-node volume and BPM bindings ensuring ultra-low latency and zero каскадный (cascading) renders.

🧱 Project Structure

The app is built as a set of standalone components focused on audio processing and UI performance:

src/
|-- main.tsx
|-- app.tsx
|-- store.ts
|-- audio.ts
|-- index.css
`-- components/
    |-- Controls.tsx
    `-- Track.tsx

store.ts orchestrates the reactive state directly via Signals. audio.ts directly consumes those signals to feed the AudioContext gain nodes.

🛠️ Tech Stack

• Preact 10 with Vite 8
• @preact/signals for all state
• Web Audio API
• TypeScript 6.0
• Tailwind CSS 4 for responsive, modern styling

🔌 Architecture

The core philosophy of this project is demonstrating the power of Preact Signals for audio latency:

• Bypassing VDOM Diffing: As the sequencer plays, the playhead visually updates across 128 cells at high BPM without ever triggering <App> or <Grid> component re-renders.
• Granular Audio Subscriptions: Adjusting the volume slider changes a signal that directly modifies the Web Audio API Gain Node, matching Vanilla JS performance with declarative code.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🧪 Build & Checks

npm run build
npm run preview

🌐 Vercel Deployment

The repository includes vercel.json for Vite static deployment:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.