Soundless Beatbox
A playful rhythm composer where users build silent beat patterns on a grid (kick/snare/hat/clap) and watch them come alive as animated pulses, bouncing shapes, and intensity bars—no audio required. Include a pattern library (save/load to localStorage), tempo control, swing toggle, and a “remix” button that generates a variation while preserving the groove. The app is split into clear components: step-sequencer grid, transport controls, visualizer canvas, and pattern manager with shadcn/ui dialogs.
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 Tailwind content paths and add Tailwind directives to src/index.css.
by system
Add src/lib/utils.ts with cn() helper and ensure path alias works in vite/tsconfig.
by system
Implement a basic responsive layout in src/App.tsx with header and four main sections.
by system
Create src/types/sequencer.ts defining Track, Step, Pattern, and TransportState types.
by system
Add src/data/defaultPattern.ts exporting a starter 16-step pattern for kick/snare/hat/clap.
by system
Create src/lib/tempo.ts for BPM-to-interval calculations and swing timing helpers.
by system
Create src/lib/remix.ts that generates a groove-preserving variation of a pattern.
by system
Create src/lib/storage.ts to save/load/list/delete patterns in localStorage safely.
by system
Create src/hooks/useSequencerState.ts managing pattern, bpm, swing, playing, and currentStep.
by system
Create src/hooks/useTransport.ts to advance currentStep on an interval respecting bpm and swing.
by system
Create src/components/StepGrid.tsx rendering the 4x16 grid with clickable step toggles.
by system
Add Tailwind-based visual states in StepGrid cells for active/inactive and current step.
by system
Update StepGrid to show left-side labels/icons for kick/snare/hat/clap.
by system
Add basic keyboard controls in StepGrid (space play/pause, arrows move step focus, enter toggle).
by system
Create src/components/TransportControls.tsx with Play/Pause, Stop, BPM slider/input, and Swing toggle.
by system
Connect TransportControls props to the shared sequencer state (play, stop, bpm, swing).
by system
Add a Remix button to TransportControls using shadcn/ui Button.
by system
Wire Remix to replace the current pattern with a remixed variation while preserving density/accent feel.
by system
Create src/components/VisualizerCanvas.tsx drawing animated pulses/shapes based on active steps and currentStep.
by system
Implement requestAnimationFrame loop in VisualizerCanvas with clean start/stop and resize handling.
by system
Create src/components/IntensityBars.tsx showing per-track activity/intensity for the current step window.
by system
Create src/components/PatternManager.tsx listing saved patterns with load and delete actions.
by system
Add a shadcn/ui Dialog in PatternManager to name and save the current pattern to localStorage.
by system
Add a shadcn/ui Dialog in PatternManager to confirm loading a selected saved pattern.
by system
Add a shadcn/ui AlertDialog in PatternManager to confirm deletion of a saved pattern.
by system
Ensure pattern save/load normalizes schema versions and validates step counts/tracks.
by system
Add shadcn/ui toast provider and show toasts for save/load/delete/remix actions.
by system
Compose StepGrid, TransportControls, VisualizerCanvas, IntensityBars, and PatternManager in App with shared state.
by system
Add ARIA labels, focus outlines, and reduced-motion support across interactive components.
by system