Soundless Beatbox
A playful rhythm-builder where users create “silent beats” by placing drum hits on a step sequencer grid and watching animated visual cues instead of hearing audio. Includes multiple instrument rows, tempo control, pattern save/load via localStorage, and a performance mode that plays the loop full-screen with reactive color pulses. The UI is split cleanly into SequencerGrid, TransportControls, PatternLibrary, and VisualizerPanel components for parallel implementation.
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 a minimal app background/text style.
by system
Implement src/App.tsx with a responsive split layout for SequencerGrid, TransportControls, PatternLibrary, and VisualizerPanel.
by system
Create src/types/sequencer.ts with types for instruments, steps, patterns, and transport state.
by system
Install and export the shadcn/ui Button component for use across controls.
by system
Install the shadcn/ui Slider component for tempo control.
by system
Install the shadcn/ui Dialog component for save/load and confirmations.
by system
Install the shadcn/ui Input component for pattern naming.
by system
Install the shadcn/ui Tabs component to switch between Library and Performance settings.
by system
Implement src/state/useSequencer.ts to hold pattern grid, tempo, playhead, and play/pause actions.
by system
Implement src/hooks/useInterval.ts for stable timer-based stepping in React.
by system
Implement src/utils/timing.ts to convert BPM and steps-per-bar into tick interval milliseconds.
by system
Add src/data/instruments.ts exporting a small set of instrument rows (e.g., Kick/Snare/Hat/Clap).
by system
Create src/components/SequencerGrid.tsx rendering a grid container with instrument labels and step columns.
by system
Create src/components/StepCell.tsx as a clickable cell with active/hover/playhead visual states.
by system
Connect StepCell to useSequencer to toggle hits on click/keyboard.
by system
Update SequencerGrid to visually indicate the current step column while playing.
by system
Add per-instrument mute buttons in SequencerGrid that affect visual triggering only.
by system
Implement a clear/reset function in useSequencer and expose it to the UI.
by system
Create src/components/TransportControls.tsx with Play/Pause, Stop, Clear, and BPM slider.
by system
Add a numeric BPM display/edit field tied to the Slider value with clamping.
by system
Add a small control in TransportControls to switch pattern length (e.g., 8/16/32 steps).
by system
Implement src/utils/patternStorage.ts to save/load/list/delete patterns in localStorage.
by system
Create src/components/PatternLibrary.tsx with a list area and actions toolbar.
by system
Implement a Dialog in PatternLibrary to name and save the current pattern to localStorage.
by system
Wire PatternLibrary list items to load a selected pattern into useSequencer.
by system
Add delete controls per saved pattern with a confirmation Dialog.
by system
Create src/components/VisualizerPanel.tsx that renders reactive color pulses based on current step hits.
by system
Create src/pages/PerformanceMode.tsx as a full-screen visualizer route with minimal controls.
by system
Add src/router.tsx using react-router-dom and wire App to navigate between Sequencer and Performance mode.
by system