Soundless Beatbox
A playful rhythm composer where users build “beats” using a grid of visual syllables (Ka, Ts, Dum, Pa) that animate silently and can optionally play simple Web Audio tones. The app includes pattern templates, per-row muting/solo, tempo control, and an export feature that saves/share-links patterns via URL plus localStorage for a small library of saved beats. The UI is split into clear components: sequencer grid, transport/tempo bar, sound settings, pattern library, and a mini “performance” view with fullscreen looping visuals.
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 src/index.css with Tailwind directives and set up basic CSS variables for shadcn/ui theming.
by system
Build src/App.tsx layout with header and main two-column responsive grid for sequencer and side panels.
by system
Install and expose Button, Card, Slider, Switch, Tabs, Dialog, DropdownMenu, Tooltip components via shadcn CLI.
by system
Create src/lib/types.ts with Pattern, Cell, Syllable, TrackState, and AppState TypeScript types.
by system
Create src/lib/constants.ts for syllable set (Ka, Ts, Dum, Pa), default grid size, and default tempo.
by system
Create src/lib/templates.ts exporting a few starter patterns and a function to clone/normalize patterns.
by system
Create src/lib/codec.ts to encode/decode patterns to a compact URL-safe string with versioning.
by system
Create src/lib/storage.ts to load/save a small named pattern library with schema/version guards.
by system
Create src/lib/timing.ts for step interval calculation, swing placeholder, and playhead tick helpers.
by system
Create src/lib/audio.ts implementing a minimal Web Audio tone/click per syllable with enable/disable support.
by system
Create src/state/useAppState.ts with a React hook managing pattern, transport, mute/solo, tempo, and settings.
by system
Create src/components/SequencerGrid.tsx rendering the grid structure from pattern data without interactions.
by system
Create src/components/SequencerCell.tsx for a single step cell showing syllable text and active/hover styles.
by system
Wire SequencerCell clicks to toggle active state in the pattern via useAppState actions.
by system
Create src/components/TrackRowHeader.tsx with row label and mute/solo buttons for each track.
by system
Implement mute/solo behavior in useAppState with correct precedence (solo overrides mutes).
by system
Create src/components/TransportBar.tsx with play/pause, stop, step indicator, and tempo display.
by system
Add a shadcn Slider in TransportBar to adjust BPM with bounds and debounced updates.
by system
Create src/lib/useScheduler.ts to advance playhead on an interval based on BPM and call tick callbacks.
by system
Update SequencerGrid to visually highlight the current step column during playback.
by system
Connect scheduler ticks to audio.ts so active cells emit tones when audio is enabled and track is audible.
by system
Create src/components/SoundSettings.tsx with enable audio switch and simple tone volume control.
by system
Add per-syllable tone parameters (freq/envelope) in constants and use them in audio.ts.
by system
Create src/components/TemplatePicker.tsx to list templates and apply one to the current grid.
by system
Create src/components/PatternLibrary.tsx to list saved patterns from localStorage with load/delete actions.
by system
Create src/components/SavePatternDialog.tsx to name and save the current pattern into localStorage.
by system
Create src/components/ShareLink.tsx that generates a URL with encoded pattern and copies it to clipboard.
by system
On app init, parse the URL pattern param (if present) and hydrate state, falling back to defaults/templates.
by system
Create src/components/PerformanceView.tsx showing looping animated syllable visuals with a fullscreen toggle.
by system