Beat Bento
A playful micro music maker that lets you build short drum-and-synth loops on a 4x8 grid, then export/share them as a compact “recipe” code. Users can pick a sound kit, adjust tempo/swing, mute/solo tracks, and generate variations (e.g., shift hits, randomize within rules) while keeping everything client-side with localStorage for saved loops. The UI is split into clear components (Grid Sequencer, Transport Controls, Sound Kit Picker, Variation Tools, Saved Loops Library) so multiple agents can implement in parallel.
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 in tailwind.config.ts and src/index.css with shadcn defaults.
by system
Install shadcn components (button, card, slider, tabs, toggle, select, dialog, tooltip, dropdown-menu, separator, input, textarea) into src/components/ui.
by system
Create src/lib/types.ts defining StepGrid, Track, Pattern, Kit, and SavedLoop types.
by system
Implement src/App.tsx with a responsive two-column layout for sequencer/controls and library.
by system
Create src/components/HeaderBar.tsx with title and recipe import/export actions.
by system
Create src/lib/useBeatBentoStore.ts implementing a single React hook for pattern/kit/transport state.
by system
Add tempo and swing fields plus setters/selectors in src/lib/useBeatBentoStore.ts.
by system
Add per-track mute/solo state and logic in src/lib/useBeatBentoStore.ts.
by system
Create src/lib/audio/engine.ts with WebAudio context creation, scheduling loop, and step callbacks.
by system
Create src/lib/audio/drums.ts with kick/snare/hat synth voices (no samples).
by system
Create src/lib/audio/synth.ts with a basic mono synth voice for a pitched track.
by system
Create src/lib/kits.ts exporting a few kits mapping tracks to drum/synth parameters.
by system
Create src/lib/useAudioTransport.ts hooking store transport state to audio engine start/stop and scheduling.
by system
Build src/components/TransportControls.tsx for play/stop, BPM slider, swing slider, and clear pattern.
by system
Build src/components/SoundKitPicker.tsx using shadcn Select to choose from built-in kits.
by system
Build src/components/GridSequencer.tsx rendering a 4x8 clickable grid with active step highlight.
by system
Implement step toggle and pointer drag painting in src/components/GridSequencer.tsx.
by system
Add current step column indicator synced from transport in src/components/GridSequencer.tsx.
by system
Build src/components/TrackHeaders.tsx with per-track labels plus mute/solo buttons.
by system
Build src/components/VariationTools.tsx with buttons for shift, rotate, randomize, and humanize.
by system
Create src/lib/variations/shiftRotate.ts implementing deterministic shift and rotate operations on the grid.
by system
Create src/lib/variations/randomize.ts implementing rule-based random fill with density controls.
by system
Create src/lib/variations/humanize.ts to apply micro-timing/velocity offsets stored per-step.
by system
Create src/lib/recipeCodec.ts to encode/decode pattern+kit+tempo into a compact share code.
by system
Create src/components/ExportRecipeDialog.tsx showing recipe code with copy-to-clipboard.
by system
Create src/components/ImportRecipeDialog.tsx to paste a recipe code and load it into the store.
by system
Create src/lib/storage.ts with localStorage CRUD for saved loops and migration/versioning.
by system
Create src/components/SavedLoopsLibrary.tsx listing saved loops with load, rename, delete, and save-current actions.
by system
Create src/lib/useShortcuts.ts to bind Space play/stop, C clear, and number keys for kit selection.
by system