Soundless DJ
A playful “silent music” mixer where users build a track using only animated patterns: pick up to 8 loop cards (pulse, waves, dots, glitch, bounce), assign each a tempo and intensity, and watch the canvas visualize the combined rhythm. The app includes a timeline grid, start/stop/loop controls, preset packs, and the ability to save/share mixes via localStorage export/import JSON—all entirely client-side in a single React + Vite SPA with Tailwind and shadcn/ui.
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 -d
by system
Configure src/index.css with Tailwind directives and a minimal CSS reset.
by system
Create src/lib/utils.ts with cn() helper (clsx + tailwind-merge).
by system
Create src/types/mix.ts for LoopType, LoopCard, MixState, and PresetPack types.
by system
Create src/data/loops.ts exporting available loop types (pulse, waves, dots, glitch, bounce) with default params.
by system
Create src/data/presets.ts exporting a few preset packs as MixState JSON.
by system
Create src/lib/storage.ts for saveMix/loadMix/listMixes/deleteMix/exportMix/importMix helpers.
by system
Create src/state/mixReducer.ts implementing pure actions (add/remove/update/reorder/start/stop/load).
by system
Create src/state/MixContext.tsx providing state/dispatch with a reducer and initial state.
by system
Create src/components/AppShell.tsx with header/main layout using Tailwind.
by system
Create src/components/TopBar.tsx with app title and primary action buttons area.
by system
Create src/components/TransportControls.tsx with Start/Stop and Loop toggle (shadcn Button/Switch).
by system
Create src/components/MasterTempo.tsx with a BPM slider/input that dispatches state updates.
by system
Create src/components/MasterIntensity.tsx with a global intensity slider that scales visuals.
by system
Create src/components/LoopPicker.tsx showing selectable loop cards from the catalog (max 8).
by system
Create src/components/LoopCardItem.tsx rendering a chosen loop with tempo/intensity controls and remove button.
by system
Create src/components/LoopRack.tsx listing selected loops and enforcing the 8-loop limit.
by system
Create src/components/LoopReorderButtons.tsx for move up/down actions per loop.
by system
Create src/components/TimelineGrid.tsx rendering a simple beat grid aligned to master BPM.
by system
Create src/components/Playhead.tsx that animates position across the timeline while playing.
by system
Create src/components/VisualizerCanvas.tsx with a <canvas> and requestAnimationFrame loop.
by system
Create src/hooks/useCanvasSize.ts to handle DPR scaling and resize updates.
by system
Create src/hooks/useBeatClock.ts to compute beat/phase from BPM, playback state, and time.
by system
Create src/visuals/patternPulse.ts exporting a draw function driven by phase/intensity.
by system
Create src/visuals/patternWaves.ts exporting a draw function driven by phase/intensity.
by system
Create src/visuals/patternDots.ts exporting a draw function driven by phase/intensity.
by system
Create src/visuals/patternGlitch.ts exporting a draw function driven by phase/intensity.
by system
Create src/visuals/patternBounce.ts exporting a draw function driven by phase/intensity.
by system
Create src/visuals/mixRenderer.ts to blend multiple active pattern draw calls into one frame.
by system
Create src/components/PresetPacksDialog.tsx to browse packs and load one into state.
by system