Soundless Beatbox
A playful on-screen beat maker that lets users compose short rhythmic loops using a grid step-sequencer with “silent” visual instruments (kick, snare, hats, clap) and animated feedback instead of audio. Users can create multiple patterns, adjust tempo/swing, randomize/mutate beats, and save/load their favorite loops to localStorage with shareable preset codes. The UI is split into clear components: pattern grid, transport controls, instrument lanes, animations/visualizer, and a preset library panel—all in a single React + Vite SPA styled with Tailwind and shadcn/ui.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i lucide-react clsx tailwind-merge class-variance-authority && npx shadcn@latest init && npx shadcn@latest add button card tabs slider switch tooltip dialog dropdown-menu input textarea separator sheet scroll-area
by system
Configure Tailwind content paths and add @tailwind directives in src/index.css.
by system
Create src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Create src/types/sequencer.ts with Instrument, Step, Pattern, Preset, and Transport types.
by system
Implement src/App.tsx with a responsive two-panel layout (sequencer + preset library).
by system
Create src/components/HeaderBar.tsx for app title and small top actions container.
by system
Create src/components/TransportControls.tsx with Play/Pause, Stop, and step-position display.
by system
Create src/components/TempoControl.tsx using shadcn Slider to edit BPM.
by system
Create src/components/SwingControl.tsx using shadcn Slider to edit swing amount.
by system
Create src/components/StepGrid.tsx rendering a fixed-length step matrix with clickable cells.
by system
Create src/components/InstrumentLaneHeader.tsx showing instrument name, color, and lane actions.
by system
Create src/components/InstrumentLanes.tsx composing multiple lanes and passing grid props.
by system
Create src/components/StepCell.tsx for a single step with active/current visual states.
by system
Add src/components/PlayheadOverlay.tsx to visually mark the current playing column.
by system
Create src/hooks/useSequencer.ts managing patterns, active pattern, BPM/swing, and grid toggles.
by system
Create src/hooks/useTransport.ts to advance steps with requestAnimationFrame/setInterval and swing timing.
by system
Create src/components/PatternTabs.tsx using shadcn Tabs for switching between patterns.
by system
Create src/components/PatternActions.tsx for add/duplicate/delete pattern controls.
by system
Create src/components/RandomizeButton.tsx to fill the active pattern with randomized steps.
by system
Create src/components/MutateButton.tsx to slightly tweak steps based on a mutation rate.
by system
Create src/components/ClearButton.tsx to clear all steps in the active pattern.
by system
Create src/components/Visualizer.tsx showing animated pulses per instrument when steps fire.
by system
Create src/lib/instruments.ts defining instrument list, colors, and animation parameters.
by system
Create src/lib/visualTriggers.ts to convert current-step hits into visualizer events.
by system
Create src/lib/presetCodec.ts to serialize/deserialize patterns + settings into a shareable string.
by system
Create src/lib/presetStore.ts to save/load/delete presets in localStorage with versioning.
by system
Create src/components/PresetLibrary.tsx listing saved presets with load/delete actions.
by system
Create src/components/SavePresetDialog.tsx using shadcn Dialog to name and save the current loop.
by system
Create src/components/LoadCodeDialog.tsx to paste a preset code and apply it to the sequencer.
by system
Create src/components/ShareCodeField.tsx showing the current preset code with copy-to-clipboard.
by system