Soundless Beatbox
A playful, keyboard-driven “silent drum machine” that lets users compose beat patterns using visual blocks instead of audio, then plays them back as animated pulses with optional haptic-style screen shakes. Users can build multiple 8–32 step loops across 4–8 tracks (kick/snare/hat/etc. as icons), tweak tempo and swing, and save/load patterns via localStorage. Includes a lightweight "challenge mode" that generates a random target groove to recreate by eye, with a step-by-step similarity score for quick mini-game replayability.
Run: npm create vite@latest . -- --template react-ts && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init && npx shadcn@latest add button slider tabs dialog dropdown-menu switch tooltip toast separator
by system
Configure src/index.css with Tailwind directives and basic app background/text variables.
by system
Implement src/App.tsx layout with header, main workspace, and footer area placeholders.
by system
Add src/lib/types.ts defining Track, Pattern, StepCount, and Challenge types.
by system
Create src/lib/tracks.ts exporting default 6–8 track definitions with names and lucide icons.
by system
Add src/lib/timing.ts for BPM-to-ms conversion and swing offset calculations.
by system
Create src/lib/storage.ts for save/load/remove pattern sets with versioning.
by system
Implement src/state/patternReducer.ts to toggle steps, set bpm/swing, tracks, and step count.
by system
Create src/state/PatternProvider.tsx exposing pattern state and dispatch via React context.
by system
Wrap the app in PatternProvider in src/main.tsx.
by system
Create src/hooks/useTransport.ts managing play/pause, current step, and scheduling via timers.
by system
Create src/hooks/useScreenShake.ts providing a CSS-class-based shake trigger with intensity.
by system
Create src/hooks/useKeyboard.ts to map key presses to step toggles and transport controls.
by system
Implement src/components/StepGrid.tsx rendering tracks x steps clickable blocks with current-step highlight.
by system
Create src/components/TrackHeader.tsx showing track icon/name and a per-track enable/mute toggle.
by system
Create src/components/StepCell.tsx as a memoized button-like cell with on/off/active visuals.
by system
Implement src/components/PulseOverlay.tsx to animate active steps as expanding rings during playback.
by system
Create src/components/TransportControls.tsx with play/pause, stop, and loop length selector.
by system
Create src/components/TempoSwingControls.tsx using shadcn Slider for BPM and swing percent.
by system
Create src/components/PatternToolbar.tsx with clear, randomize, and duplicate actions.
by system
Implement src/components/PatternLibraryDialog.tsx to list saved patterns and load/delete/rename.
by system
Add src/hooks/useAutosave.ts to persist the current pattern to localStorage on changes.
by system
Wire shadcn toast usage in src/components/ToasterHost.tsx and mount it in App.
by system
Create src/lib/challenge.ts generating a random target groove within current step/tracks constraints.
by system
Add src/lib/similarity.ts computing per-step and overall similarity between user and target patterns.
by system
Implement src/components/ChallengePanel.tsx showing target preview, start/reset, and score readout.
by system
Create src/components/TargetPreview.tsx rendering a compact read-only grid of the challenge pattern.
by system
Assemble all core components into the workspace in src/App.tsx with responsive layout.
by system
Add src/styles/animations.css (imported once) for pulse, active-step glow, and optional shake.
by system