Soundless Beatboard
A playful, silent rhythm composer where users build looping beat patterns on a grid (kick/snare/hat/clap/etc.) and see the music as animated shapes and pulses—no audio required. Include controls for tempo, swing, loop length, and pattern randomize/mutate, plus a "performance" view that visualizes the current bar with shadcn/ui sliders and toggles. Patterns can be saved, duplicated, exported/imported as JSON, and stored in localStorage with a simple library view for quick 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 && npx shadcn@latest add button card dialog dropdown-menu input label separator slider switch tabs textarea toast tooltip
by system
Configure tailwind.config.ts and src/index.css with Tailwind directives and shadcn/ui theme tokens.
by system
Implement App.tsx layout with header and main content container using shadcn/ui components.
by system
Set up react-router in main.tsx with routes for Composer, Performance, and Library pages.
by system
Create src/lib/types.ts with Track, Step, Pattern, and Transport type definitions.
by system
Create src/lib/pattern.ts with helpers for createEmptyPattern, toggleStep, clonePattern, resizeSteps, and randomize/mutate.
by system
Create src/lib/transport.ts with BPM, swing timing, and step-advance scheduling helpers.
by system
Create src/lib/storage.ts with loadLibrary, saveLibrary, upsertPattern, deletePattern, and safe JSON parsing.
by system
Create src/lib/store.tsx with a React context + reducer managing current pattern, transport, and library state.
by system
Add src/lib/defaults.ts exporting a few starter patterns and default transport settings.
by system
Add a src/components/ToasterHost.tsx wrapper and mount it in App.tsx for user feedback.
by system
Create src/components/TransportControls.tsx with shadcn Slider/Switch for BPM, swing, loop length, and play/pause.
by system
Create src/components/RandomizeControls.tsx with buttons for randomize, mutate, and clear pattern.
by system
Create src/components/TrackList.tsx listing instruments (kick/snare/hat/clap/etc.) with color badges and enable toggles.
by system
Create src/components/StepGrid.tsx rendering the pattern grid with clickable steps and bar/beat separators.
by system
Add basic keyboard navigation and toggle (arrows/space) to StepGrid.tsx.
by system
Create src/components/Playhead.tsx that highlights the current step column based on transport tick.
by system
Create src/pages/ComposerPage.tsx composing TransportControls, RandomizeControls, TrackList, StepGrid, and Playhead.
by system
Create src/components/visuals/VisualStage.tsx as an SVG/Canvas-backed container for animated pulses and shapes.
by system
Create src/components/visuals/StepPulses.tsx that animates a pulse per active step when the playhead hits.
by system
Create src/lib/visualMapping.ts mapping each instrument to a color, shape, and animation style.
by system
Create src/components/PerformanceControls.tsx with larger shadcn sliders/toggles for tempo, swing, and loop length.
by system
Create src/components/PerformanceBar.tsx showing the current bar with big step indicators and playhead.
by system
Create src/pages/PerformancePage.tsx combining PerformanceControls, PerformanceBar, and VisualStage.
by system
Create src/components/SavePatternDialog.tsx to name/save current pattern into the local library.
by system
Create src/components/LibraryList.tsx rendering saved patterns with select, duplicate, and delete actions.
by system
Create src/pages/LibraryPage.tsx showing LibraryList and a preview/quick-load panel.
by system
Create src/components/ImportExportDialog.tsx to export selected/current pattern JSON and import from pasted JSON.
by system
Add a duplicatePattern action in store.tsx that clones with a new id/name and saves to library.
by system
Wire store.tsx to automatically persist library and last-opened pattern/transport to localStorage.
by system