Soundless Beatbox
A playful rhythm builder where users create drum patterns on a 16-step grid using visual "mouth-sound" syllables (e.g., "pff", "tsk", "buh") instead of audio, then watch the beat animate in sync. It includes multiple saved patterns in localStorage, adjustable tempo and swing, and a shareable "pattern card" view that exports the grid as an image. The UI is split into clear components (step sequencer grid, transport controls, pattern library, and export/share panel) so multiple agents can implement 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 html-to-image && npx shadcn@latest init
by system
Configure Tailwind in src/index.css with @tailwind directives and set a minimal base theme.
by system
Implement the main 2-column responsive layout in src/App.tsx with placeholders for each panel.
by system
Add core TypeScript types (Step, Track, Pattern, Transport) in src/lib/types.ts.
by system
Create src/lib/syllables.ts exporting available mouth-sound syllables and display labels.
by system
Implement empty pattern factory and cloning helpers in src/lib/patternUtils.ts.
by system
Add BPM-to-ms and swing timing helpers in src/lib/timing.ts.
by system
Implement load/save/list/delete pattern functions in src/lib/storage.ts.
by system
Create src/lib/useAppState.ts as a single-hook state container for pattern + transport + selection.
by system
Build src/components/TransportControls.tsx with play/pause, stop, BPM slider, and swing slider.
by system
Implement src/lib/usePlaybackClock.ts to advance step index on an interval using BPM and swing.
by system
Create src/components/StepGrid.tsx rendering a 16-step grid for multiple tracks with active step highlight.
by system
Create src/components/StepCell.tsx as a clickable toggle cell with selected/active visual states.
by system
Create src/components/TrackHeader.tsx showing track name and current syllable.
by system
Build src/components/SyllablePicker.tsx to choose a syllable for the selected track.
by system
Wire StepGrid clicks to update pattern state (toggle step, select track) in src/components/StepGrid.tsx.
by system
Add CSS/Tailwind animations for the currently playing column highlight in src/components/StepGrid.tsx.
by system
Create src/components/PatternLibrary.tsx listing saved patterns with load, rename, and delete actions.
by system
Add a save button and handler that persists the current pattern to localStorage in PatternLibrary.
by system
Add a 'New Pattern' action that creates a fresh default pattern in PatternLibrary.
by system
Implement a small shadcn dialog in src/components/RenamePatternDialog.tsx used by PatternLibrary.
by system
Implement src/components/ConfirmDeleteDialog.tsx and use it before deleting a saved pattern.
by system
Create src/components/PatternHeader.tsx to show current pattern name and last-saved status.
by system
Build src/components/ExportPanel.tsx with preview area, export PNG button, and copy/share controls.
by system
Create src/components/PatternCard.tsx as a print-friendly visual card of the grid + metadata.
by system
Implement PNG export from PatternCard using html-to-image in src/lib/exportImage.ts.
by system
Wire ExportPanel to call exportImage and trigger a download in src/components/ExportPanel.tsx.
by system
Implement encode/decode pattern-to-querystring helpers in src/lib/shareEncoding.ts.
by system
On app init, parse URL query and load shared pattern into state in src/App.tsx.
by system
Add 'Copy Link' functionality in ExportPanel that writes the encoded URL to clipboard.
by system