Beat-Map Mixer
A playful rhythm-and-visuals toy where users build short “beat maps” by placing hits on a 16-step grid across 4 lanes, then press Play to hear synthesized sounds and watch a matching animated pattern. It includes a small sound palette (kick/snare/hihat/synth), tempo control, swing toggle, and preset slots saved to localStorage. The UI is split into clear components: step sequencer grid, transport/tempo controls, sound picker, visualizer canvas, and preset manager for saving/loading/sharing via export/import JSON.
Create src/types/sequencer.ts defining LaneId, SoundId, StepIndex, GridState, and PresetShape.
by system
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 && npm i tone
by system
Configure tailwind.config.ts content paths and add Tailwind directives to src/index.css.
by system
Add src/lib/utils.ts with cn() helper and update tsconfig paths if needed.
by system
Build a simple responsive layout in src/App.tsx with regions for controls, grid, visualizer, and presets.
by system
Implement src/hooks/useGridState.ts to initialize, toggle steps, clear, and set grid state immutably.
by system
Implement src/hooks/useTransportState.ts for isPlaying, bpm, swing, and currentStep.
by system
Implement src/hooks/useAudioEngine.ts using Tone.js to schedule 16-step playback from grid state.
by system
Create src/audio/sounds.ts defining the available sounds (kick/snare/hihat/synth) and their Tone instruments.
by system
Add a one-time user gesture handler to call Tone.start() before first playback in src/hooks/useAudioEngine.ts.
by system
Create src/components/sequencer/StepButton.tsx as a clickable step cell with active/current styling.
by system
Create src/components/sequencer/SequencerLane.tsx to render 16 StepButton cells for one lane.
by system
Create src/components/sequencer/SequencerGrid.tsx to render 4 lanes, lane labels, and pass toggle handlers.
by system
Update SequencerGrid to visually indicate the currently playing step index from transport state.
by system
Create src/components/controls/TransportControls.tsx with Play/Stop and Clear buttons.
by system
Create src/components/controls/TempoControl.tsx with a bpm slider/input and min/max constraints.
by system
Create src/components/controls/SwingToggle.tsx to enable/disable swing and reflect state.
by system
Create src/components/controls/SoundPicker.tsx to assign a SoundId to each lane via a select.
by system
Implement src/hooks/useLaneSounds.ts to store and update lane-to-sound assignments.
by system
Update useAudioEngine.ts to trigger the correct instrument per lane using lane sound assignments.
by system
Create src/components/visualizer/VisualizerCanvas.tsx rendering a canvas and exposing a draw API via props.
by system
Implement src/hooks/useVisualizer.ts to animate based on currentStep and recent hits.
by system
Update useVisualizer.ts to flash lane-colored shapes when a step with a hit is played.
by system
Create src/storage/presets.ts to load/save preset slots to localStorage with versioning.
by system
Create src/components/presets/PresetManager.tsx with 4 slots and Save/Load actions.
by system
Create src/components/presets/ExportPresetDialog.tsx to copy preset JSON to clipboard.
by system
Create src/components/presets/ImportPresetDialog.tsx to paste JSON and validate then load/save.
by system
Implement conversion helpers in src/storage/presets.ts for grid, bpm, swing, and lane sounds.
by system
Connect PresetManager to grid/transport/lane-sounds state in src/App.tsx and apply load/save.
by system
Apply Tailwind styling across components for spacing, typography, and responsive stacking.
by system