Soundless Orchestra
A playful “silent music” composer where users build looping songs by arranging animated instrument cards on a grid—each card represents a rhythm pattern and plays a synthesized tone using the Web Audio API. The app includes a step sequencer view, a live visualizer (waves/bars/particles) that reacts to the mix, and preset “styles” (lo-fi, chiptune, ambient) that swap instruments and scales. Users can save multiple compositions to localStorage, export/import as JSON, and share a compact link-friendly code that recreates the arrangement.
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 shadcn@latest && npx shadcn@latest init.
by system
Configure Tailwind in src/index.css and tailwind.config.ts with shadcn/ui defaults.
by system
Create src/App.tsx with a basic layout (header/main/footer) using Tailwind.
by system
Install and wire basic shadcn/ui components (Button, Card, Dialog, Tabs, Tooltip) for reuse.
by system
Create src/types/music.ts with types for Instrument, Pattern, Cell, GridState, Composition, StylePreset.
by system
Create src/data/styles.ts exporting lo-fi/chiptune/ambient preset definitions (instruments, scales, defaults).
by system
Create src/lib/grid.ts with grid dimensions, coordinate helpers, and immutable update utilities.
by system
Create src/lib/serialize.ts to encode/decode compositions and generate a compact share code string.
by system
Create src/lib/storage.ts for saving/loading/listing compositions in localStorage with versioning.
by system
Create src/audio/engine.ts implementing Web Audio context setup, master gain, and safe start/stop.
by system
Create src/audio/voices.ts with simple synth voices (sine/triangle/square/noise) and envelope helpers.
by system
Create src/audio/scheduler.ts to run a clocked step sequencer and trigger voices per grid pattern.
by system
Create src/audio/analyser.ts to expose AnalyserNode data (time/frequency) for visualizers.
by system
Create src/hooks/useAudioEngine.ts to manage play/pause, tempo, style selection, and analyser access.
by system
Create src/hooks/useComposition.ts to manage grid state, selected instrument, and undo-friendly updates.
by system
Create src/components/InstrumentCard.tsx rendering an animated instrument card with pattern preview.
by system
Create src/components/InstrumentPalette.tsx to list available instruments and allow selection.
by system
Create src/components/GridCell.tsx to render a single grid slot with hover/active visuals.
by system
Create src/components/ArrangementGrid.tsx to render the full grid and handle click-to-place/remove cards.
by system
Enhance ArrangementGrid.tsx with pointer-based drag/reorder between cells without extra libraries.
by system
Create src/components/TransportBar.tsx with play/pause, tempo slider, and current step indicator.
by system
Create src/components/StepSequencer.tsx showing per-step activity and allowing pattern edits for a cell.
by system
Create src/components/PatternEditorDialog.tsx to edit rhythm steps (toggle grid) for an instrument card.
by system
Create src/components/StyleSwitcher.tsx to swap styles and update instruments/scale safely.
by system
Create src/components/visualizer/VisualizerCanvas.tsx to manage a resize-aware canvas render loop.
by system
Create src/components/visualizer/Waveform.tsx drawing time-domain wave data from the analyser.
by system
Create src/components/visualizer/Bars.tsx drawing frequency bars reacting to the mix.
by system
Create src/components/visualizer/Particles.tsx drawing simple particles driven by analyser amplitude.
by system
Create src/components/VisualizerPanel.tsx to switch between wave/bars/particles with shadcn Tabs.
by system
Create src/components/LibraryDialog.tsx to list, save, rename, load, and delete compositions.
by system
Create src/components/ImportExportDialog.tsx to export current composition and import from pasted JSON.
by system
Create src/components/ShareDialog.tsx to generate/copy a compact code and load from code input.
by system