Soundless Beatbox
A playful on-screen drum pad sequencer that lets users create simple rhythms using only visual and haptic-style feedback (flashing pads, animated waveforms, and optional click sounds). Users can place steps on a 16-step grid, adjust tempo and swing, and swap between a few “kits” made from geometric animations; patterns can be saved, duplicated, and exported/imported as JSON via localStorage. The UI is split cleanly into components: transport controls, step grid, kit/pad palette, pattern library, and a minimal “performance” mode that hides everything except the pads and big play/stop.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @tailwindcss/vite && npm i shadcn@latest && npx shadcn@latest init
by system
Configure Tailwind content/theme and add Tailwind directives to src/index.css.
by system
Add src/lib/utils.ts with cn() helper and ensure shadcn paths/aliases compile.
by system
Build the base split UI shell in src/App.tsx with regions for controls, grid, kits, and library.
by system
Create src/types/sequencer.ts with Pattern, Step, Kit, and TransportState types.
by system
Create src/data/kits.ts exporting a few geometric-animation kit definitions.
by system
Create src/lib/pattern.ts with createEmptyPattern(), clonePattern(), and sanitizePattern().
by system
Create src/lib/storage.ts for localStorage save/load/export/import JSON utilities.
by system
Create src/lib/click.ts that generates an optional click sound using WebAudio (no assets).
by system
Create src/lib/clock.ts implementing a 16-step scheduler with tempo and swing.
by system
Create src/state/SequencerContext.tsx to hold pattern, kit, transport, and settings state.
by system
Wrap the app in SequencerProvider in src/main.tsx.
by system
Create src/components/TransportControls.tsx with play/stop and current step indicator.
by system
Create src/components/TempoSwingControls.tsx with sliders/inputs for BPM and swing.
by system
Create src/components/SoundToggle.tsx for enabling/disabling click sounds.
by system
Create src/components/PerformanceModeToggle.tsx to enter/exit minimal performance mode.
by system
Create src/components/StepGrid.tsx rendering a 16-step by pad-row grid with Tailwind styling.
by system
Create src/components/StepCell.tsx handling click/tap to toggle a single step.
by system
Update src/components/StepGrid.tsx to visually highlight the active step during playback.
by system
Create src/components/PadVisual.tsx that renders kit-specific geometric animations on trigger.
by system
Create src/components/KitPalette.tsx to list available kits and select the active kit.
by system
Create src/components/PadPalette.tsx showing pads in the current kit with preview triggers.
by system
Connect clock ticks to trigger PadVisual flashes/animations when steps are active.
by system
Create src/components/PatternLibrary.tsx listing saved patterns with select/delete actions.
by system
Create src/components/PatternSaveButton.tsx to save/update the current pattern to localStorage.
by system
Create src/components/PatternDuplicateButton.tsx to clone the current pattern into the library.
by system
Create src/components/PatternImportExportDialog.tsx for JSON export/import via textarea.
by system
Create src/lib/shortcuts.ts and wire in App to handle space play/stop and arrows step nav.
by system
Create src/components/PerformanceModeView.tsx showing only big pads and play/stop.
by system
Refine Tailwind styles across existing components for mobile/desktop responsiveness in place.
by system