Soundless Beatbox
A playful “silent music” pattern maker where users build beat loops by clicking a 16-step grid of percussion icons (kick/snare/hat/clap), then play it back with Web Audio-generated tones and simple visual pulse animations. Includes tempo control, swing toggle, per-track volume/mute, and a randomize button to spark ideas; patterns can be saved, named, and exported/imported as JSON via localStorage. The UI is split into clear components (StepGrid, TransportControls, TrackMixer, PresetManager, Visualizer) so multiple agents can build features in parallel.
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
Update src/index.css with Tailwind directives and basic app theme variables.
by system
Add shadcn/ui components: button, card, slider, switch, tabs, tooltip, dialog, input, label, separator.
by system
Create src/types.ts with Pattern, TrackId, StepIndex, TrackState, TransportState, and Preset types.
by system
Create src/lib/pattern.ts for emptyPattern(), toggleStep(), randomizePattern(), and pattern validation.
by system
Create src/lib/storage.ts for localStorage load/save of presets with schema/versioning.
by system
Create src/audio/engine.ts implementing Web Audio context init, simple drum synths, and per-track gain nodes.
by system
Create src/audio/useScheduler.ts to drive 16-step playback using tempo, swing, and a lookahead timer.
by system
Create src/state/AppState.tsx with a React context managing pattern, transport, mixer, and presets.
by system
Create src/state/defaults.ts defining Kick/Snare/Hat/Clap defaults (icons, colors, base volumes).
by system
Create src/components/AppShell.tsx for header/main layout and responsive spacing.
by system
Create src/components/StepGrid.tsx rendering a 4x16 grid per track with click-to-toggle steps.
by system
Create src/components/StepCell.tsx for a single step button with active/playing visual states.
by system
Create src/components/TrackRow.tsx to render a track label/icon plus its 16 StepCells.
by system
Create src/components/TransportControls.tsx with Play/Pause, Stop, tempo slider, and swing toggle.
by system
Update src/components/TransportControls.tsx to dispatch tempo changes into global state.
by system
Update src/components/TransportControls.tsx to toggle swing and reflect enabled state.
by system
Update src/components/TransportControls.tsx to start/stop scheduler and reset step position.
by system
Create src/components/TrackMixer.tsx with per-track volume sliders and mute toggles.
by system
Update src/components/TrackMixer.tsx to write volume/mute to global state.
by system
Update src/audio/engine.ts to apply per-track volume/mute via gain nodes.
by system
Create src/components/RandomizeButton.tsx to randomize current pattern with a single click.
by system
Create src/components/PresetManager.tsx with save name input, save button, and preset list.
by system
Update src/components/PresetManager.tsx to persist named patterns to localStorage via storage utils.
by system
Update src/components/PresetManager.tsx to load presets into state and delete from storage.
by system
Create src/components/ExportImportDialog.tsx to export current preset JSON and import JSON text.
by system
Update src/components/ExportImportDialog.tsx to validate imported JSON and show inline errors.
by system
Create src/components/Visualizer.tsx showing current step pulse and per-track hit flashes.
by system
Update src/audio/useScheduler.ts to publish current step and hits for StepGrid/Visualizer highlights.
by system
Update src/App.tsx to assemble AppShell, StepGrid, TransportControls, TrackMixer, PresetManager, Visualizer, and Randomize.
by system