Soundless Beatbox
A playful rhythm composer where users build drum loops by clicking a 16-step grid, assigning each row to a percussion sound (kick, snare, hi-hat, clap) using Web Audio, and controlling tempo/swing with a transport bar. Include pattern slots to save/load loops to localStorage, a simple “randomize with constraints” generator (e.g., keep kick on 1/9), and a mini performance mode that highlights steps fullscreen for tapping. The app is a single React SPA with clear components: StepGrid, TransportControls, SoundRack, PatternLibrary, and GeneratorPanel, styled with Tailwind and shadcn/ui.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init
by system
Configure tailwind.config and src/index.css with Tailwind directives and shadcn base styles.
by system
Create src/App.tsx with a responsive layout and placeholder sections for all panels.
by system
Create src/lib/types.ts for Step, Pattern, TrackId, and app state types.
by system
Create src/lib/pattern.ts with functions to create empty patterns, clone, and toggle steps.
by system
Create src/lib/format.ts for bpm/swing display helpers and clamping.
by system
Create src/audio/engine.ts exporting a singleton WebAudio context manager and init/resume helpers.
by system
Create src/audio/voices.ts implementing kick, snare, hihat, clap using Web Audio nodes.
by system
Create src/audio/useTransport.ts hook that schedules 16-step playback with bpm and swing.
by system
Create src/components/SoundRack.tsx listing tracks with mute/solo and per-track volume sliders.
by system
Create src/components/TrackRow.tsx for a single instrument row header UI (name, mute, volume).
by system
Create src/components/StepGrid.tsx rendering a 4x16 clickable grid with active/playing styling.
by system
Create src/components/StepCell.tsx for a single grid cell with keyboard-accessible toggle.
by system
Create src/components/TransportControls.tsx with play/stop, bpm slider, swing slider, and step indicator.
by system
Wire TransportControls play/stop to start/stop the scheduler and resume audio context on first play.
by system
Connect transport currentStep to StepGrid to highlight the active column during playback.
by system
Create src/audio/trigger.ts to map TrackId to voice trigger functions with per-track gain.
by system
Update useTransport to call trigger() for each active step in the current column.
by system
Create src/state/useAppState.ts hook to own pattern, transport settings, and track mix state.
by system
Update src/App.tsx to compose StepGrid, SoundRack, TransportControls, PatternLibrary, and GeneratorPanel using useAppState.
by system
Create src/components/PatternLibrary.tsx showing pattern slots with save/load/clear actions.
by system
Create src/lib/storage.ts to load/save pattern slots to localStorage with versioning.
by system
Wire PatternLibrary buttons to storage helpers and app pattern state.
by system
Create src/components/GeneratorPanel.tsx with constraint toggles and a Generate button.
by system
Create src/lib/generate.ts implementing constrained random pattern generation (e.g., kick on 1/9).
by system
Wire GeneratorPanel Generate to replace current pattern using generate.ts and current constraints.
by system
Create src/components/PerformanceMode.tsx fullscreen overlay that shows the 16-step progress and tap areas.
by system
Add a button in TransportControls to enter/exit PerformanceMode and keep transport running.
by system
Implement tapping in PerformanceMode to trigger selected instrument hits in time without editing the grid.
by system
Add minimal shadcn/ui components (Button, Slider, Switch, Dialog) usage and consistent Tailwind styling across panels.
by system