Echo Deck
A playful audio-free "sound" sequencer where users build short rhythm loops by arranging onomatopoeia cards (e.g., "tap", "whoosh", "ding") on a 16-step grid and playing them back as animated pulses instead of real audio. Users can create, name, and save multiple decks and patterns in localStorage, with a simple performance mode that auto-advances and highlights steps while showing per-card visual effects. The app includes a tiny pattern generator (randomize with constraints like "sparse", "busy", or "syncopated") and an export/import JSON feature for sharing patterns.
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 Tailwind content paths and add @tailwind directives + CSS variables in src/index.css.
by system
Create src/lib/utils.ts with cn() helper (clsx + tailwind-merge).
by system
Implement src/App.tsx with top header, main two-column layout, and footer placeholder.
by system
Define Deck/Pattern/Step/Card types in src/types.ts.
by system
Add src/lib/storage.ts for load/save, versioning, and safe JSON parsing.
by system
Implement src/hooks/useDecks.ts to manage decks/patterns CRUD and persist to localStorage.
by system
Add src/lib/defaultData.ts with starter deck, cards, and one pattern.
by system
Create src/components/Header.tsx with app title and small action buttons area.
by system
Create src/components/DeckSelector.tsx to choose active deck and add/rename/delete decks.
by system
Create src/components/PatternList.tsx to select, create, rename, and delete patterns.
by system
Create src/components/CardPalette.tsx showing available cards to place on the grid.
by system
Create src/components/CardChip.tsx for consistent card styling and color variants.
by system
Add src/lib/grid.ts for 16-step grid creation, cloning, and cell set/clear operations.
by system
Create src/components/StepGrid.tsx rendering a 16-column grid with rows per card.
by system
Add click/drag toggle behavior in src/components/StepGrid.tsx to place/remove cards per step.
by system
Create src/components/TransportControls.tsx with Play/Pause, Stop, and tempo slider.
by system
Implement src/hooks/useSequencer.ts for step clock (requestAnimationFrame/setInterval) and currentStep.
by system
Update src/components/StepGrid.tsx to highlight the active step column during playback.
by system
Create src/components/Pulse.tsx for animated step pulses using Tailwind keyframes.
by system
Add src/lib/effects.ts mapping card names to simple visual effect props (scale/shake/glow).
by system
Create src/components/PerformanceModeToggle.tsx to enable/disable performance mode UI.
by system
Create src/components/PerformancePanel.tsx to show large pulses and per-card effects per step.
by system
Add optional auto-advance logic in src/hooks/useSequencer.ts to cycle patterns when enabled.
by system
Create src/components/GeneratorControls.tsx with preset buttons: Sparse, Busy, Syncopated.
by system
Implement src/lib/generator.ts to generate a new grid with constraints for the selected preset.
by system
Wire GeneratorControls to update the active pattern grid via useDecks in src/App.tsx.
by system
Create src/components/ExportModal.tsx to export current deck(s) as JSON text for copy/download.
by system
Create src/components/ImportModal.tsx to paste JSON, validate, and merge/replace into localStorage.
by system
Add src/lib/validate.ts to validate imported schema and migrate older versions to current types.
by system