Soundless Synth
A playful browser-based "silent music" sequencer that lets users compose looping patterns using shapes and colors instead of audio, generating animated visual rhythms on a grid. Users can place, move, and toggle steps, assign each track a visual instrument (shape, color, motion style), control tempo/loop length, and export/share compositions as a compact JSON string or PNG snapshot. Everything runs client-side with localStorage saves, plus a small gallery of preset patterns to remix.
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
Create/replace src/index.css with Tailwind directives and basic CSS variables for shadcn/ui theme.
by system
Implement src/App.tsx with a header/main layout and placeholder panels for grid, controls, and presets.
by system
Create src/pages/SequencerPage.tsx and render it from App as the single SPA page.
by system
Create src/lib/types.ts defining Pattern, Track, Step, InstrumentStyle, and ExportPayload types.
by system
Create src/lib/presets.ts exporting a small array of preset Pattern objects.
by system
Create src/lib/storage.ts with load/save helpers (with versioning) for the current Pattern.
by system
Create src/lib/codec.ts to encode/decode patterns to a compact JSON string for share/export.
by system
Create src/state/patternReducer.ts with actions for toggleStep, moveStep, setTempo, setLoopLength, setTrackInstrument, and loadPattern.
by system
Create src/state/PatternProvider.tsx providing state/dispatch and persisting to localStorage on changes.
by system
Create src/hooks/usePlaybackClock.ts to tick the current step using requestAnimationFrame with BPM and loop length.
by system
Create src/components/TransportControls.tsx with play/pause, stop, and current-step display.
by system
Create src/components/TempoControl.tsx using shadcn Slider/Input to set BPM.
by system
Create src/components/LoopLengthControl.tsx with a select/slider to set steps per loop.
by system
Create src/components/TrackList.tsx rendering track rows with name and instrument preview.
by system
Create src/components/InstrumentPicker.tsx to choose shape, color, and motion style for a track.
by system
Create src/components/SequencerGrid.tsx to render a tracks x steps grid with clickable cells.
by system
Create src/components/GridCell.tsx handling visual active/inactive states and click-to-toggle.
by system
Create src/components/Playhead.tsx that highlights the current column based on playback step.
by system
Create src/components/InstrumentGlyph.tsx that draws shape/color variants (circle/square/triangle) for active steps.
by system
Create src/styles/motion.css defining Tailwind-friendly keyframes/classes for pulse, bounce, rotate, and shimmer.
by system
Update InstrumentGlyph to apply motion classes based on track motion style and playhead hits.
by system
Enhance SequencerGrid to support click-drag moving an active step within the same track.
by system
Create src/components/ResetPatternButton.tsx to confirm and reset to an empty pattern.
by system
Create src/components/PresetGallery.tsx listing presets with preview and one-click load.
by system
Create src/components/PresetThumbnail.tsx rendering a tiny read-only mini-grid preview.
by system
Create src/components/ExportDialog.tsx with tabs for JSON string and PNG snapshot actions.
by system
Implement src/lib/clipboard.ts to copy the encoded JSON string to clipboard with fallback.
by system
Create src/components/ImportDialog.tsx to paste a JSON string, decode it, validate, and load the pattern.
by system
Create src/lib/snapshot.ts to rasterize the grid DOM to a PNG using SVG foreignObject/canvas and trigger download.
by system