Soundless Beatbox
A playful rhythm-composer where users build short “silent beats” by placing tap patterns on a 16-step grid (kick/snare/hat/clap), then preview them using simple Web Audio tones and a visual metronome. Includes a library of saved patterns in localStorage, quick random beat generation with adjustable complexity, and an export view that renders the beat as a shareable ASCII/emoji timeline card. The UI is split into clear components: step sequencer grid, transport controls (BPM/play/loop), sound settings, pattern library, and export/share panel.
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 content paths and add @tailwind directives + CSS variables in src/index.css.
by system
Create the root App layout shell with header/main panels using shadcn/ui in src/App.tsx.
by system
Add step/pattern/track TypeScript types and constants (tracks + 16 steps) in src/lib/types.ts.
by system
Implement helpers to clone/toggle steps and normalize patterns in src/lib/pattern.ts.
by system
Add a complexity-based random pattern generator in src/lib/random.ts.
by system
Create load/save/delete/list functions for patterns in src/lib/storage.ts.
by system
Implement a minimal Web Audio tone/noise engine for kick/snare/hat/clap in src/lib/audio.ts.
by system
Create a useTransport hook to manage BPM, play/stop, step index, and looping in src/hooks/useTransport.ts.
by system
Create a useAudioPreview hook that triggers sounds on active steps during transport in src/hooks/useAudioPreview.ts.
by system
Create a useBeatState hook to hold current pattern, selected track, and dirty state in src/hooks/useBeatState.ts.
by system
Build a clickable StepCell with active/current-step styling in src/components/StepCell.tsx.
by system
Render one instrument row of 16 StepCell items in src/components/TrackRow.tsx.
by system
Assemble the 4-track 16-step grid and wire toggling in src/components/SequencerGrid.tsx.
by system
Add a visual playhead/metronome bar synced to current step in src/components/Metronome.tsx.
by system
Create Play/Pause, Stop, Loop toggle, and BPM slider UI in src/components/TransportControls.tsx.
by system
Add a numeric BPM input with clamping and debounced updates in src/components/BpmInput.tsx.
by system
Create volume/mute controls per instrument (and master) in src/components/SoundSettings.tsx.
by system
Implement a save-pattern dialog with name input using shadcn/ui in src/components/SavePatternDialog.tsx.
by system
Render saved patterns list with load and delete actions in src/components/PatternLibrary.tsx.
by system
Create a single saved-pattern row component with buttons in src/components/PatternListItem.tsx.
by system
Wire saving/loading the current pattern to localStorage via the storage layer in src/App.tsx.
by system
Add Randomize button and complexity slider UI in src/components/RandomizeControls.tsx.
by system
Wire Randomize controls to replace the current pattern using src/lib/random.ts in src/App.tsx.
by system
Create a function that renders a pattern into an ASCII/emoji timeline card string in src/lib/export.ts.
by system
Build an export/share panel that displays the generated card and a copy button in src/components/ExportPanel.tsx.
by system
Add a safe copy-to-clipboard helper with fallback in src/lib/clipboard.ts.
by system
Add space-to-play/pause and arrow-step navigation handlers in src/hooks/useShortcuts.ts.
by system
Add simple empty/loading/none-saved placeholders for panels in relevant components.
by system
Refine Tailwind layout for mobile/desktop panel stacking and spacing in src/App.tsx.
by system