Soundless Synth
A playful “silent music” sequencer that lets users compose looped tracks using only visual beats: drag-and-drop shapes onto a grid timeline, assign each shape a color, intensity, and motion style, and watch the composition animate in sync as it plays. Include simple controls (play/pause, tempo, loop length, per-track mute/solo) plus a shareable preset system that saves projects to localStorage and exports/imports JSON. The app focuses on clean component boundaries: a sequencer grid editor, a transport/tempo bar, a track list, and an animation preview stage with a few built-in visual instrument presets.
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.config + src/index.css with Tailwind directives and basic app theme tokens.
by system
Install shadcn/ui primitives needed (button, slider, toggle, tabs, dialog, dropdown-menu, input, textarea, tooltip, separator).
by system
Create src/types/sequencer.ts defining Project, Track, Clip, ShapeInstrument, MotionStyle, and serialization types.
by system
Add src/data/presets.ts exporting a few built-in visual instrument presets and a starter project.
by system
Create src/lib/storage.ts to load/save projects and named presets from localStorage with versioning.
by system
Create src/lib/presetIO.ts to export project JSON and validate/import JSON safely.
by system
Create src/hooks/useTransport.ts handling play/pause, tempo, loop length, current step, and tick scheduling.
by system
Create src/state/useProject.ts as a lightweight React state hook for project, tracks, clips, and selection.
by system
Implement mute/solo resolution helpers in src/lib/trackMix.ts for determining audible/visible tracks.
by system
Build src/App.tsx layout with header transport bar, left track list, center grid editor, and right preview stage.
by system
Create src/components/TransportBar.tsx with play/pause, tempo slider, loop length control, and step readout.
by system
Create src/components/TrackList.tsx rendering tracks with name, color, mute, solo, and add/remove buttons.
by system
Create src/components/TrackRow.tsx for a single track row with controls wired to project state.
by system
Create src/components/AddTrackDialog.tsx to add a new track with name and preset instrument selection.
by system
Create src/components/SequencerGrid.tsx rendering the timeline grid for tracks x steps with basic styling.
by system
Create src/components/GridCell.tsx handling hover/selection visuals and click-to-toggle clip placement.
by system
Add src/lib/clipOps.ts for add/remove/move/duplicate clips and quantize to step boundaries.
by system
Create src/components/ShapePalette.tsx showing draggable shape tokens for circle/square/triangle presets.
by system
Add HTML5 drag/drop to SequencerGrid to place a shape clip onto a target cell with default properties.
by system
Implement selection (selected track/step/clip id) in src/state/useProject.ts and wire clicks from grid.
by system
Create src/components/ClipInspector.tsx to edit selected clip color, intensity, shape, and motion style.
by system
Create src/components/ColorField.tsx as a simple hex input + swatches for clip/track color selection.
by system
Create src/data/motionStyles.ts defining a few named motion styles and their parameters.
by system
Create src/components/PreviewStage.tsx using a single <canvas> to render animated shapes for the current step.
by system
Implement src/lib/renderEngine.ts to draw shapes with intensity and motion styles based on transport time.
by system
Wire PreviewStage to useTransport so it animates in sync with playhead and respects mute/solo.
by system
Create src/components/PresetManager.tsx to save/load/delete named presets in localStorage.
by system
Create src/components/ImportExportDialog.tsx to copy/download JSON and paste/import JSON with validation.
by system