Soundless Beatcards
A playful rhythm-builder where users create "silent" beat loops by arranging cards (kick, snare, hat, clap, rest) onto a 16-step grid, then press Play to see an animated cursor and on-beat visual pulses—no audio required. Include quick templates, tempo control, swing toggle, and a shareable encoded URL plus localStorage saving for personal beat libraries. The app is split into clear components: Beat Grid editor, Playback/Transport bar, Pattern Library panel, Template picker, and a Visualizer that renders satisfying animations on each step.
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 slider switch tabs dialog input textarea separator scroll-area sheet dropdown-menu tooltip
by system
Configure tailwind.config and src/index.css with Tailwind directives and shadcn base styles.
by system
Create the main layout in App.tsx with header, left library panel, center editor, and bottom transport bar.
by system
Create src/lib/types.ts defining instruments, steps, patterns, templates, and transport settings types.
by system
Add src/lib/encode.ts to serialize/deserialize patterns to a compact URL-safe string.
by system
Implement src/hooks/useUrlPattern.ts to read pattern from URL on load and write updates with history.replaceState.
by system
Implement src/hooks/useLocalStorage.ts for typed get/set with versioning and safe JSON parsing.
by system
Create src/hooks/useTransport.ts to manage playing state, BPM, swing, current step, and scheduling via requestAnimationFrame.
by system
Create src/hooks/usePatternState.ts to manage active pattern, editing actions, and dirty state.
by system
Build src/components/InstrumentPalette.tsx showing selectable cards for kick/snare/hat/clap/rest.
by system
Create src/components/StepCell.tsx rendering a single grid cell with active instrument styling and click handling.
by system
Build src/components/BeatGrid.tsx rendering the 16-step grid by track with cursor highlight support.
by system
Add click/drag paint and right-click erase behavior to BeatGrid without touching transport logic.
by system
Create src/lib/templates.ts exporting a small set of built-in patterns for quick starting points.
by system
Build src/components/TemplatePicker.tsx as a dialog/list that applies a selected built-in template.
by system
Create src/components/TransportBar.tsx with Play/Pause, BPM slider, swing toggle, and step counter.
by system
Wire BPM changes from TransportBar into useTransport and ensure timing updates immediately.
by system
Implement swing offset behavior in useTransport so even steps are delayed by a swing percentage.
by system
Create src/components/Visualizer.tsx that renders the playhead cursor and per-step pulse animations.
by system
Map instrument hits on the current step to distinct visual pulses in Visualizer.
by system
Connect useTransport currentStep to BeatGrid and Visualizer for synchronized highlighting.
by system
Create src/lib/libraryStore.ts to load/save a list of user patterns from localStorage.
by system
Build src/components/PatternLibraryPanel.tsx listing saved patterns with load/delete actions.
by system
Create src/components/SavePatternDialog.tsx to name and persist the current pattern into the library.
by system
Add duplicate/rename actions in PatternLibraryPanel using a small shadcn dialog per action.
by system
Create src/components/ShareButton.tsx that copies the encoded URL to clipboard with toast feedback.
by system
Add a small src/components/UrlImportBanner.tsx that appears when a URL pattern is detected and lets users keep or discard it.
by system
Implement src/hooks/useShortcuts.ts for space play/pause, arrows step nudge, and number keys instrument select.
by system
Add helpful empty states and inline tips for first-time users in the library panel and grid.
by system
Adjust App.tsx and key components for mobile (collapsible library panel and sticky transport).
by system