Soundless Beatbox
A playful rhythm composer where users build 1–4 bar drum loops using emoji-based percussion tiles on a step sequencer grid, then "play" the loop with visual metronome pulses and animated hit indicators (no audio required). Users can save multiple patterns to localStorage, remix by shifting/swapping tracks, and export a shareable text code that recreates the beat when pasted into the app.
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 -d
by system
Configure src/index.css with Tailwind directives and a minimal app theme background.
by system
Add core UI components (button, input, textarea, card, dialog, dropdown-menu, tabs, toast) via shadcn.
by system
Create src/lib/types.ts with types for instruments, grid steps, patterns, and app state.
by system
Add src/lib/instruments.ts exporting default emoji percussion tracks with ids, names, and colors.
by system
Create src/lib/grid.ts for creating empty patterns, toggling steps, and clamping bars/steps.
by system
Create src/lib/remix.ts with pure functions to shift a track, swap tracks, and randomize lightly.
by system
Create src/lib/codec.ts to encode/decode patterns to a compact shareable text code.
by system
Create src/lib/storage.ts for saving/loading pattern library with versioning and safe parsing.
by system
Implement src/App.tsx with header, main composer area, and footer help text.
by system
Create src/pages/ComposerPage.tsx composing all feature components without business logic.
by system
Add src/main.tsx using a minimal in-app view switch (no react-router) between Composer and Library.
by system
Implement src/components/SequencerGrid.tsx rendering tracks x steps with clickable tiles.
by system
Create src/components/StepTile.tsx as a memoized cell showing emoji hit state and hover styles.
by system
Create src/components/BarLengthControl.tsx to switch between 1–4 bars and resize pattern.
by system
Create src/components/TempoControl.tsx for BPM slider/input used by the visual playback timer.
by system
Create src/components/TransportControls.tsx with Play/Pause/Stop buttons and current step display.
by system
Create src/hooks/usePlayback.ts managing isPlaying, currentStep, and interval timing from BPM.
by system
Create src/components/MetronomePulse.tsx showing an animated pulse on each beat/step tick.
by system
Create src/components/HitRowIndicators.tsx to animate per-track hit flashes when steps trigger.
by system
Add src/hooks/usePatternState.ts to own the active pattern grid and expose toggle/update actions.
by system
Create src/components/PatternNameEditor.tsx to edit the active pattern name with debounce.
by system
Create src/components/PatternLibraryPanel.tsx listing saved patterns with load/rename/delete.
by system
Create src/hooks/usePatternLibrary.ts integrating storage helpers to persist multiple patterns.
by system
Create src/components/SavePatternButton.tsx to save/update the current pattern into the library.
by system
Create src/components/RemixControls.tsx with buttons for shift left/right and swap tracks.
by system
Create src/components/ExportCodeDialog.tsx to show generated share code and copy to clipboard.
by system
Create src/components/ImportCodeDialog.tsx to paste a code and load it into the active pattern.
by system
Wire src/components/AppToaster.tsx and show toasts for save/export/import success/failure.
by system