Soundless Beatbox
A playful rhythm maker where users build short beat patterns using visual blocks (kick/snare/hat/clap) on a grid, then “perform” them with optional Web Audio playback or silent animation-only mode. The app includes a pattern library with save/load via localStorage, a tempo control, step-by-step playback indicator, and an export feature that copies a shareable text code for a beat. Clear component boundaries: grid sequencer, instrument palette, transport controls, preset manager, and share/export modal.
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
Create src/index.css with Tailwind directives and basic CSS variables for shadcn/ui.
by system
Add src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Add shadcn/ui components needed (button, slider, switch, dialog, tabs, dropdown-menu, toast).
by system
Create src/types/sequencer.ts with Instrument, Step, Pattern, and Transport state types.
by system
Add src/data/instruments.ts defining kick/snare/hat/clap metadata (label, color, key).
by system
Add src/data/presets.ts with a few built-in patterns for the library.
by system
Implement src/lib/shareCode.ts to encode/decode patterns to a compact shareable text code.
by system
Implement src/lib/storage.ts for saving/loading/deleting patterns with safe JSON parsing.
by system
Implement src/lib/audioEngine.ts with Web Audio click sounds per instrument and lazy AudioContext init.
by system
Implement src/lib/transport.ts to compute step intervals from BPM and drive a step callback via setInterval.
by system
Implement src/App.tsx layout shell with header, main grid area, and right-side panels.
by system
Create src/hooks/useSequencerState.ts to hold pattern grid, bpm, playing, currentStep, and mode.
by system
Create src/components/InstrumentPalette.tsx to show instrument legend with colors and names.
by system
Create src/components/StepCell.tsx as a clickable block with active and playhead visual states.
by system
Create src/components/SequencerGrid.tsx rendering instrument rows x steps and wiring cell toggles.
by system
Create src/components/StepRuler.tsx to label beats/bars above the grid (e.g., 1-16 with bar marks).
by system
Create src/components/TransportControls.tsx with Play/Pause, Stop, and Clear buttons.
by system
Create src/components/TempoControl.tsx with shadcn Slider and numeric BPM display/edit.
by system
Create src/components/PlaybackModeToggle.tsx to switch between Audio and Silent animation modes.
by system
Wire playhead step updates in src/hooks/useSequencerState.ts using transport timer and cleanup.
by system
Trigger audioEngine hits on each step when in Audio mode inside the playhead tick handler.
by system
Create src/components/PresetManager.tsx to list presets, select one, and show saved patterns section.
by system
Create src/components/SavePatternDialog.tsx to name and save the current pattern to localStorage.
by system
Add load and delete handlers in PresetManager using storage wrapper without touching grid internals.
by system
Create src/components/ShareExportModal.tsx using Dialog with code display and copy button.
by system
Implement src/lib/clipboard.ts to copy text and throw a friendly error on failure.
by system
Add an import input in ShareExportModal to decode a share code and load it into state.
by system
Add src/components/ToasterHost.tsx and show toasts for save/load/copy/import success or errors.
by system