Soundless Orchestra
A playful “silent music” composer where users build short looping songs by arranging instrument cards on a timeline grid—each step triggers animations and haptic-like visual pulses instead of audio. Provide a library of patterns (drums, bass, melody, ambience) with adjustable tempo, swing, and per-track intensity, plus a live preview stage showing the ensemble reacting in sync. Users can save/load compositions to localStorage, export a shareable JSON string, and use a randomizer to generate fresh loops for remixing.
Run: npm create vite@latest . -- --template react-ts && 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 CSS variables in src/index.css.
by system
Create src/App.tsx with a responsive layout (header/main/footer) and placeholder panels.
by system
Install shadcn/ui components (Button, Card, Slider, Tabs, Dialog, Tooltip, Toast) into src/components/ui.
by system
Create src/lib/types.ts defining Track, Pattern, Step, Composition, and ExportPayload interfaces.
by system
Create src/lib/constants.ts for step counts, default tempo/swing, track defaults, and palette tokens.
by system
Create src/lib/patternLibrary.ts exporting grouped seed patterns (drums/bass/melody/ambience) as pure data.
by system
Create src/lib/composition.ts with functions to create defaults, clone, and normalize compositions.
by system
Create src/lib/serialize.ts to encode/decode compositions to JSON string with versioning and validation.
by system
Create src/lib/storage.ts with save/load/list/delete helpers scoped to a single storage key namespace.
by system
Create src/lib/randomize.ts to generate randomized compositions from pattern library with seeded RNG.
by system
Create src/lib/transport.ts implementing a requestAnimationFrame step scheduler supporting tempo and swing.
by system
Create src/hooks/useComposerState.ts managing composition, selection, playback state, and undo-safe updates.
by system
Add src/components/ToasterHost.tsx and mount it in App for shadcn toast notifications.
by system
Create src/components/HeaderBar.tsx with Play/Pause, tempo slider, swing slider, and step counter display.
by system
Create src/components/TrackList.tsx rendering tracks with color badges and per-track intensity slider.
by system
Create src/components/InstrumentCard.tsx to display a pattern card with name, category, and preview steps.
by system
Create src/components/PatternLibraryPanel.tsx listing pattern cards with category tabs and apply button.
by system
Create src/components/TimelineGrid.tsx rendering a clickable step matrix for all tracks and steps.
by system
Implement step on/off toggling behavior in TimelineGrid using callbacks from useComposerState.
by system
Create src/components/TrackControls.tsx with mute/solo toggles that affect visual playback.
by system
Create src/components/LiveStage.tsx showing animated performers for each track with intensity-based styling.
by system
Add src/components/PulseOverlay.tsx to render haptic-like pulses on active steps synchronized to transport.
by system
Connect transport step events to state so TimelineGrid, LiveStage, and PulseOverlay react in lockstep.
by system
Implement applying a selected library pattern to a target track (replace steps) via useComposerState.
by system
Create src/components/SaveLoadDialog.tsx to name saves, list saved compositions, and load/delete them.
by system
Create src/components/ExportImportDialog.tsx to copy an export JSON string and import from pasted text.
by system
Create src/components/RandomizeButton.tsx that generates a new loop and preserves global tempo/swing.
by system
Add src/hooks/useHotkeys.ts to support space play/pause, R randomize, and arrow step navigation.
by system
Add loading/empty states, tooltips, and small UX refinements in existing components without new features.
by system