Soundless Conductor
A playful “silent music” sequencer where users compose rhythms using visual gestures instead of audio: place notes on a grid, assign each lane a shape/color animation, and watch the composition perform in sync with a metronome. The app includes preset patterns, a simple timeline play/pause/tempo control, and an export feature that saves compositions as JSON (and optionally a GIF-like frame capture) to localStorage. Components are cleanly separable: sequencer grid editor, pattern library, playback/transport bar, animation preview stage, and settings panel for tempo, loop length, and visual themes.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @tailwindcss/vite && npm i -D shadcn@latest && npx shadcn@latest init
by system
Configure Tailwind + @tailwindcss/vite and add Tailwind directives in src/index.css.
by system
Install shadcn/ui components used by the app (button, slider, select, tabs, dialog, dropdown-menu, toast) into src/components/ui.
by system
Create src/types.ts defining SequencerState, Lane, Step, PatternPreset, Theme, and ExportPayload types.
by system
Add src/state/useSequencerStore.ts implementing a small React state store (useReducer) for grid, lanes, transport, and settings.
by system
Create src/data/presets.ts with a few starter patterns and default lanes/themes.
by system
Create src/hooks/useMetronome.ts to tick at BPM, advance step index, and support start/stop.
by system
Create src/hooks/useLocalStorageState.ts for saving/loading JSON app state safely.
by system
Create src/App.tsx composing TransportBar, SequencerGrid, PreviewStage, PatternLibrary, and SettingsPanel in a responsive layout.
by system
Create src/styles/theme.css for CSS variables used by visual themes and lane colors.
by system
Create src/components/TransportBar.tsx with play/pause, BPM slider/input, and current step indicator.
by system
Wire TransportBar.tsx to the store and useMetronome to control playback and tempo updates.
by system
Create src/components/SequencerGrid.tsx rendering lanes x steps grid with headers using Tailwind.
by system
Create src/components/GridCell.tsx for a single step cell with active state styling and click target.
by system
Add click/drag toggle behavior in SequencerGrid.tsx to activate/deactivate steps without affecting other files.
by system
Create src/components/LoopLengthControl.tsx and connect it to store to change step count (e.g., 8/16/32).
by system
Create src/components/LaneHeader.tsx showing lane name, color dot, and shape icon per lane.
by system
Create src/components/LaneEditor.tsx allowing lane rename, color select, and animation shape selection.
by system
Create src/components/SettingsPanel.tsx as a card with controls for theme, loop length, and lane editing.
by system
Create src/components/ThemeSelect.tsx to switch CSS variable themes and persist selection.
by system
Create src/components/PreviewStage.tsx rendering an animation stage (div/canvas) that displays active lane animations.
by system
Create src/lib/shapeRenderers.ts with pure functions to render circle/square/triangle/pulse effects based on lane + step.
by system
Connect PreviewStage.tsx to current step and active lanes so animations update on each metronome tick.
by system
Create src/components/PatternLibrary.tsx listing preset patterns with preview chips and an apply button.
by system
Implement applying a PatternPreset to the store grid/lanes while preserving current tempo/theme.
by system
Create src/components/ExportDialog.tsx with JSON preview, copy button, and save-to-localStorage action.
by system
Implement serialization in src/lib/export.ts to save/load compositions (including metadata) via localStorage.
by system
Create src/lib/frameCapture.ts to capture preview frames to data URLs (best-effort) for a GIF-like strip export.
by system
Add optional frame capture controls to ExportDialog.tsx to generate and store a frames array in ExportPayload.
by system