Soundless Beatbox
A playful rhythm composer where users build "silent beats" by toggling steps on a 16-step grid across multiple tracks (kick, snare, hat, clap), with instant playback using the Web Audio API and a visual metronome. Include preset patterns, swing/tempo controls, and a simple "share" feature that encodes the pattern into a URL plus optional localStorage saving for personal libraries. The UI is split into clear components (transport controls, track grid, preset manager, and pattern export/import) and stays fully client-side.
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 a basic app theme.
by system
Build src/App.tsx with header/main layout and placeholder sections for transport, grid, presets, and share.
by system
Add src/types/pattern.ts defining TrackId, Pattern (4x16), and helper constants (steps/tracks).
by system
Create src/state/usePattern.ts to store current pattern and expose toggleStep/clear/fill utilities.
by system
Create src/state/useTransport.ts to store isPlaying, bpm, swing, and currentStep.
by system
Implement src/audio/engine.ts to manage AudioContext, master gain, and per-voice synth/noise nodes.
by system
Implement src/audio/scheduler.ts for 16-step scheduling with lookahead timing and swing offset.
by system
Create src/audio/usePlayback.ts to connect transport/pattern state to scheduler start/stop and step callbacks.
by system
Build src/components/Metronome.tsx that highlights the current 16th step.
by system
Build src/components/TransportControls.tsx with Play/Stop, BPM slider/input, Swing slider, and Clear button.
by system
Build src/components/TrackGrid.tsx that renders tracks and steps from the Pattern type.
by system
Build src/components/StepCell.tsx as a clickable/toggleable step cell with active/current styling.
by system
Build src/components/TrackRow.tsx to render one track label plus 16 StepCell instances.
by system
Connect TrackGrid/TrackRow/StepCell to usePattern toggleStep and transport currentStep highlight.
by system
Add src/hooks/useHotkeys.ts to support space play/stop and C to clear.
by system
Create src/presets/builtinPresets.ts exporting a small list of named preset patterns.
by system
Build src/components/PresetManager.tsx to list built-in presets and load one into current pattern.
by system
Add a randomize button and helper in usePattern to generate a simple randomized beat.
by system
Implement src/share/codec.ts to encode/decode pattern+bpm+swing into a compact URL-safe string.
by system
Build src/components/SharePanel.tsx with a copy-to-clipboard URL and an import field to load encoded patterns.
by system
Add src/share/useUrlPattern.ts to read pattern from location on startup and update URL when pattern changes.
by system
Implement src/storage/library.ts to save/load/delete named patterns in localStorage.
by system
Build src/components/LibraryPanel.tsx to save current pattern with name and manage saved entries.
by system
Update PresetManager to show built-ins and saved patterns with consistent load behavior.
by system
Add needed shadcn/ui components (Button, Slider, Input, Card, Tabs) via generated files and use them in UI.
by system
Refine Tailwind styling so the grid and controls work well on narrow screens.
by system
Add user-gesture AudioContext resume handling and a master mute/volume control.
by system
Add guards for invalid decoded URLs/localStorage entries and provide simple inline error messages.
by system
Update src/README.md with usage instructions, sharing format notes, and keyboard shortcuts.
by system