Soundless Beatbox
A playful on-screen beat maker where users build looping rhythms by toggling a 16-step grid across drum/synth tracks, with each track using simple Web Audio oscillator/noise sounds and per-track volume/mute. Provide a small library of preset patterns, a tempo control, swing toggle, and a “random groove” generator that keeps rhythm constraints (e.g., kicks on downbeats, snares on 2/4). Patterns can be named, saved to localStorage, exported/imported as a compact text code, and played with a minimal visualizer that highlights the current step.
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 -d
by system
Configure src/index.css with Tailwind directives and basic CSS variables for shadcn/ui.
by system
Add src/lib/utils.ts with cn() helper and ensure imports compile.
by system
Implement src/App.tsx with a header, main container, and footer shell.
by system
Create src/types/pattern.ts defining TrackId, StepGrid, Pattern, and serialization payload types.
by system
Create src/data/tracks.ts listing track metadata (id, label, color, sound kind) used across UI/audio.
by system
Create src/data/presets.ts exporting a small array of preset Pattern objects.
by system
Build src/components/StepCell.tsx as a clickable 16-step cell with on/off styling.
by system
Build src/components/TrackRow.tsx rendering one track label plus 16 StepCell toggles.
by system
Build src/components/SequencerGrid.tsx rendering all TrackRow components and exposing onToggleStep.
by system
Build src/components/TransportBar.tsx with Play/Pause, Stop, tempo slider, and swing toggle.
by system
Build src/components/TrackMixerRow.tsx with volume slider and mute toggle for one track.
by system
Build src/components/MixerPanel.tsx rendering TrackMixerRow for all tracks.
by system
Build src/components/PlayheadOverlay.tsx that highlights the currently playing step across the grid.
by system
Create src/audio/engine.ts to manage AudioContext lifecycle and master gain.
by system
Create src/audio/sources.ts with reusable oscillator and noise burst node builders.
by system
Create src/audio/voices.ts mapping track ids to simple synth/noise sound functions.
by system
Create src/audio/scheduler.ts implementing 16-step scheduling, tempo timing, and swing offset.
by system
Create src/hooks/useSequencerPlayer.ts to connect pattern state to the scheduler and emit currentStep.
by system
Create src/hooks/useSequencerState.ts to hold pattern grid, tempo, swing, playing, and mixer state.
by system
Create src/pages/BeatboxPage.tsx composing TransportBar, SequencerGrid, MixerPanel, and playhead wiring.
by system
Update src/main.tsx to render BeatboxPage inside App layout (no router needed).
by system
Build src/components/PresetPicker.tsx to select a preset and load it into the sequencer.
by system
Create src/generate/randomGroove.ts that produces a constrained Pattern (kicks on downbeats, snares on 2/4, etc.).
by system
Add a Random Groove button to TransportBar (or a small toolbar) that applies randomGroove() to state.
by system
Create src/storage/patternStore.ts to save/load named patterns and last-used state via localStorage.
by system
Build src/components/SavePatternDialog.tsx to name and save the current pattern to localStorage.
by system
Build src/components/SavedPatterns.tsx to list, load, rename, and delete saved patterns.
by system
Create src/codec/patternCode.ts to encode/decode patterns as a compact text code.
by system
Build src/components/CodeImportExport.tsx with textarea + copy/paste buttons to export/import codes.
by system