Soundless Mixer
A playful “music studio” that lets users build short beat loops with no audio: they compose 1–2 bar patterns on a grid (kick/snare/hat/bass/synth) and the app visualizes the groove using animated shapes, timing lines, and intensity pulses. Users can save multiple loops to localStorage, remix by randomizing one track at a time, and export a loop as a shareable JSON or a PNG snapshot of the pattern + visualization.
Create src/components/Playhead.tsx to animate a timing line across steps (no audio).
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
by system
Configure src/index.css with Tailwind directives and set a simple dark studio theme via CSS variables.
by system
Install shadcn/ui components (button, card, dialog, sheet, tabs, tooltip, dropdown-menu, toast) into src/components/ui.
by system
Create src/lib/types.ts with TrackId, StepCount, Pattern, Loop, and SerializedLoop types.
by system
Create src/lib/defaults.ts exporting a default 1-bar and 2-bar starter pattern.
by system
Create src/lib/grid.ts with step indexing helpers (toggle, clear, resize bars, velocity clamp).
by system
Create src/lib/randomize.ts to randomize a single track with density/intensity parameters.
by system
Create src/lib/storage.ts with loadLoops/saveLoops and schema/version migration.
by system
Create src/lib/exportPng.ts that captures a DOM node to PNG using a pure-client library.
by system
Implement src/App.tsx with header, main two-column layout, and footer links.
by system
Create src/pages/StudioPage.tsx composing grid, visualization, and loop controls.
by system
Add src/main.tsx wiring a minimal client-side router for Studio and Library pages.
by system
Create src/hooks/useLoopState.ts to manage current loop, selected track, and undo-safe updates.
by system
Create src/components/StepGrid.tsx rendering the track x step matrix with click-to-toggle.
by system
Create src/components/GridCell.tsx for a single step cell with intensity styling and keyboard support.
by system
Create src/components/TrackHeader.tsx showing track name, color, and per-track actions.
by system
Create src/components/TransportControls.tsx with play/pause, tempo, and bar length toggles.
by system
Create src/hooks/useTransport.ts that advances step position with requestAnimationFrame based on BPM.
by system
Create src/components/VisualizerCanvas.tsx that draws animated shapes reacting to active steps.
by system
Create src/lib/visualizer.ts to map tracks/steps/intensity to colors, pulses, and shape parameters.
by system
Create src/components/IntensityPulse.tsx for subtle per-track pulse indicators synced to the playhead.
by system
Create src/components/LoopControls.tsx with rename, clear, duplicate, and new loop actions.
by system
Create src/components/RemixPanel.tsx to randomize one selected track with density slider.
by system
Create src/pages/LibraryPage.tsx listing saved loops with load/delete/duplicate actions.
by system
Wire Studio + Library to src/lib/storage.ts for autosave and explicit save buttons.
by system
Create src/components/ExportJsonDialog.tsx to copy/download the current loop JSON.
by system
Create src/components/ImportJsonDialog.tsx to paste JSON and load it with validation.
by system
Create src/components/ExportPngDialog.tsx that captures the grid+visualizer area to a PNG.
by system
Add src/lib/toast.ts and use it across import/export/save flows for success/error feedback.
by system