Sound Snack Lab
A playful micro soundboard + beat builder where users drag-and-drop "snacks" (chips, soda fizz, candy pop, cookie crunch) onto a 16-step grid to create looping rhythms and quirky sound collages. Include a small library of built-in synthesized sounds (no uploads required), per-snack volume/pan controls, tempo control, and one-click randomize/mutate for quick inspiration. Projects can be saved/loaded from localStorage with shareable export/import as JSON, and a simple "performance" mode shows an animated grid while it plays.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @radix-ui/react-dialog @radix-ui/react-slider @radix-ui/react-tabs lucide-react class-variance-authority clsx tailwind-merge && npx shadcn@latest init
by system
Configure Tailwind `content` globs and add `@tailwind` directives in `src/index.css`.
by system
Create `src/lib/utils.ts` with `cn()` helper for class merging.
by system
Implement `src/App.tsx` with header, main area, and responsive two-column layout using Tailwind.
by system
Create `src/lib/types.ts` for SnackId, StepGrid, Pattern, and Project schemas.
by system
Create `src/lib/snacks.ts` defining built-in snacks (chips, soda, candy, cookie) with default color/icon/params.
by system
Create `src/audio/engine.ts` exposing AudioContext creation, master gain, and safe resume-on-gesture.
by system
Create `src/audio/voices.ts` implementing simple synthesized one-shot sounds per snack using WebAudio nodes.
by system
Create `src/audio/scheduler.ts` that runs a 16-step loop with BPM control and step callbacks.
by system
Create `src/state/transport.ts` for playing state, bpm, currentStep, and start/stop actions.
by system
Create `src/state/pattern.ts` to hold 16-step grid data and step toggle/set actions.
by system
Create `src/state/mix.ts` to store per-snack volume and pan plus update actions.
by system
Create `src/audio/playback.ts` connecting scheduler ticks to pattern triggers and voice playback.
by system
Create `src/components/TransportBar.tsx` with Play/Stop and BPM slider/input.
by system
Create `src/components/SnackPalette.tsx` showing draggable snack tiles with icons and colors.
by system
Create `src/components/StepCell.tsx` for a clickable step with active/current styling.
by system
Create `src/components/StepGrid.tsx` rendering 16 columns per snack row and handling click toggles.
by system
Add HTML5 drag-and-drop handlers in `src/components/StepGrid.tsx` to drop a snack onto a step to activate it.
by system
Create `src/components/SnackRowHeader.tsx` with snack label and mini mute/solo placeholders.
by system
Create `src/components/SnackControls.tsx` with shadcn Slider controls for per-snack volume and pan.
by system
Create `src/components/MixPanel.tsx` to list snacks with `SnackControls` and row headers.
by system
Create `src/lib/randomize.ts` to generate a new pattern with snack-specific densities.
by system
Create `src/lib/mutate.ts` to lightly alter an existing pattern (flip a few steps, shift, or swap).
by system
Create `src/components/InspireBar.tsx` with Randomize and Mutate buttons wired to pattern actions.
by system
Create `src/lib/serialize.ts` to export/import full projects (pattern, bpm, mix) as JSON.
by system
Create `src/lib/storage.ts` to save/load the current project and a named list to localStorage.
by system
Create `src/components/ProjectDialog.tsx` using shadcn Dialog for save, load, rename, and delete.
by system
Create `src/components/JsonIoDialog.tsx` to copy/export JSON and paste/import with validation.
by system
Create `src/components/PerformanceMode.tsx` that shows a large animated grid synced to `currentStep`.
by system
Add a toggle in `src/App.tsx` to switch between editor view and performance mode while preserving playback.
by system