Beat Bento
A playful micro-music maker where users build short loops by dragging “sound tiles” (kick, snare, hats, bass, synth) into a 16-step grid and hitting play with Web Audio. Include a small set of preset kits, per-track mute/volume, tempo control, and a simple visualizer that reacts to the mix. Users can save/load loops to localStorage and export a pattern as a shareable JSON string (no audio export) for quick swapping and remixing.
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
Build src/App.tsx with a single-page layout shell (header/main/footer) and placeholder panels.
by system
Create src/lib/types.ts for TrackId, SoundId, StepIndex, Pattern, Kit, and app state types.
by system
Create src/lib/kits.ts exporting a few preset kits mapping sound tiles to synth/drum params.
by system
Create src/lib/storage.ts for save/load of patterns and last-used settings via localStorage.
by system
Create src/lib/share.ts to encode/decode patterns to a compact JSON string with validation.
by system
Create src/lib/audio/engine.ts that initializes AudioContext, master gain, and exposes play/stop hooks.
by system
Create src/lib/audio/scheduler.ts implementing a 16-step clock using lookahead scheduling and BPM.
by system
Create src/lib/audio/voices/drums.ts for kick/snare/hats synthesized with Web Audio nodes.
by system
Create src/lib/audio/voices/tones.ts for bass/synth voices using oscillators + envelope + filter.
by system
Create src/lib/audio/mixer.ts that creates per-track gain/mute routing into a master bus.
by system
Create src/lib/audio/analyzer.ts that wires an AnalyserNode to the master and exposes waveform/levels.
by system
Create src/lib/state/patternStore.ts with a reducer for steps, kit selection, BPM, mutes, and volumes.
by system
Create src/lib/state/AppStateProvider.tsx exposing state/actions via React context.
by system
Create src/components/TransportBar.tsx with Play/Stop and current step indicator UI.
by system
Create src/components/TempoControl.tsx using a shadcn Slider/Input to set BPM.
by system
Create src/components/KitPicker.tsx to select from preset kits and apply to current pattern.
by system
Create src/components/TrackStrip.tsx with track label, mute toggle, and volume slider.
by system
Create src/components/MixerPanel.tsx rendering TrackStrip for each track and a master readout.
by system
Create src/components/SoundTilePalette.tsx showing draggable tiles for each SoundId.
by system
Create src/components/StepCell.tsx rendering one step cell with filled/active/hover states.
by system
Create src/components/StepGrid.tsx rendering tracks x 16 steps and dispatching step toggles.
by system
Add HTML5 drag-and-drop wiring so dropping a sound tile onto a cell sets that step.
by system
Update StepGrid to highlight the currently playing step from transport state.
by system
Connect transport actions to the scheduler/engine so patterns trigger voices per step.
by system
Bind mixer UI state to per-track gain nodes and mute logic in the audio mixer.
by system
Create src/components/Visualizer.tsx drawing a simple reactive waveform/bars using canvas and AnalyserNode.
by system
Create src/components/SaveLoadPanel.tsx to save current loop, list saved loops, and load/delete them.
by system
Create src/components/SharePatternModal.tsx to export/import the shareable JSON string with copy/paste.
by system