Soundless Beat Lab
A playful “silent drum machine” where users build rhythms on a 16-step grid that animates visually instead of playing audio—each instrument lane has a distinct shape, color, and motion pattern. Users can create, save, and remix beat patterns in localStorage, switch between preset visual “skins,” and export a loop as a GIF-like frame strip (PNG sequence) for sharing. The app is split into clear components: step-sequencer grid, transport controls (play/tempo), skin/palette manager, and a pattern library with save/load/duplicate.
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 plus base app styles in src/index.css.
by system
Implement the top-level layout and sections (transport, grid, skins, library, export) in src/App.tsx.
by system
Add sequencer-related TypeScript types (Pattern, Track, Step, Skin) in src/lib/types.ts.
by system
Create small pure helpers (clamp, uid, deepCopy, range) in src/lib/utils.ts.
by system
Add default tracks, empty pattern, and a few presets in src/lib/defaults.ts.
by system
Implement useSequencerState (pattern, tempo, isPlaying, currentStep) in src/hooks/useSequencerState.ts.
by system
Create useStepClock that advances currentStep based on tempo using requestAnimationFrame in src/hooks/useStepClock.ts.
by system
Build play/pause, stop, and step indicator controls in src/components/TransportControls.tsx.
by system
Add a tempo slider + numeric display component in src/components/TempoControl.tsx.
by system
Create the 16-step sequencer grid with clickable cells in src/components/StepSequencerGrid.tsx.
by system
Add per-track lane header (name + color chip) in src/components/TrackLaneHeader.tsx.
by system
Implement a single step cell button with active/hover states in src/components/StepCell.tsx.
by system
Add visual playhead highlighting for the current step across the grid in src/components/PlayheadOverlay.tsx.
by system
Define Skin presets (palette + motion rules) in src/skins/skins.ts.
by system
Implement SkinProvider + useSkin to switch active skin in src/skins/SkinContext.tsx.
by system
Create a skin selection dropdown/cards UI in src/components/SkinPicker.tsx.
by system
Render per-track shapes for active steps (no audio) in src/components/VisualLane.tsx.
by system
Implement deterministic motion parameters per skin/track/step in src/skins/motion.ts.
by system
Connect pattern state + playhead to visual animations in src/components/VisualizerStage.tsx.
by system
Add encode/decode utilities for patterns (versioned) in src/lib/patternCodec.ts.
by system
Implement load/save/list/remove for patterns in src/lib/storage.ts.
by system
Create the pattern library UI container in src/components/PatternLibrary.tsx.
by system
Add a shadcn Dialog to name and save the current pattern in src/components/SavePatternDialog.tsx.
by system
Render stored patterns list with load buttons in src/components/PatternList.tsx.
by system
Add a duplicate action that copies a stored pattern under a new id/name in src/components/DuplicatePatternButton.tsx.
by system
Add delete with confirmation UI for stored patterns in src/components/DeletePatternButton.tsx.
by system
Implement offscreen rendering of N frames of the visualizer into canvas bitmaps in src/export/renderFrames.ts.
by system
Add a client-side exporter that downloads frames as numbered PNG files in src/export/downloadPngSequence.ts.
by system
Create an export panel with frame count/size controls and an export button in src/components/ExportPanel.tsx.
by system