Soundless Synth
A playful “silent music” sequencer where users compose looping tracks using animated shapes instead of audio: each grid cell triggers a visual pulse with configurable color, size, and motion style. Provide templates (lo-fi, techno, ambient), per-row instrument themes (e.g., bounce, ripple, spin), and a timeline playhead with tempo control, randomize, and undo/redo. Tracks can be saved to localStorage and exported/imported as a shareable JSON string, with the UI split into clear components (PatternGrid, PlayControls, InstrumentPanel, PresetLibrary, ExportModal).
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 in tailwind.config.ts and add @tailwind directives + CSS variables in src/index.css.
by system
Add src/lib/utils.ts with cn() helper and ensure shadcn path aliases exist in tsconfig.json/vite config.
by system
Create src/types.ts for Pattern, Cell, InstrumentTheme, MotionStyle, and Preset definitions.
by system
Implement src/state/reducer.ts with actions for toggle cell, edit cell, tempo, play/stop, undo/redo, randomize, load preset.
by system
Create src/state/history.ts to manage past/present/future stacks for undo/redo.
by system
Add src/state/useAppStore.ts using useReducer + history wrapper and expose dispatch/selectors.
by system
Create src/presets/templates.ts exporting lo-fi, techno, and ambient preset objects.
by system
Create src/motion/motionStyles.ts mapping motion style keys to Tailwind/inline animation configs.
by system
Add keyframes and utility classes for pulse/bounce/ripple/spin styles in src/index.css.
by system
Create src/components/PatternGrid.tsx rendering a fixed grid layout with rows/steps from state.
by system
Create src/components/GridCell.tsx to render a single cell with active state visuals and click handling.
by system
Create src/components/CellPulse.tsx to display the animated shape pulse driven by playhead hits.
by system
Connect PatternGrid to dispatch toggle/edit actions on cell click/drag (basic pointer drag to paint).
by system
Create src/components/PlayControls.tsx with play/pause, tempo slider/input, step counter, and randomize/undo/redo buttons.
by system
Create src/sequencer/useSequencer.ts that advances playhead by tempo and emits step ticks while playing.
by system
Add a visual playhead indicator in PatternGrid that highlights the current column.
by system
On each sequencer tick, trigger CellPulse animations for active cells in the current step.
by system
Create src/components/InstrumentPanel.tsx listing rows with controls for theme/motion, default color, and default size.
by system
Apply row theme settings (motion style defaults and visual styling) to pulses and/or row header.
by system
Create src/components/CellInspector.tsx to edit selected cell color/size/motion style.
by system
Update state to track selected cell and open CellInspector when a cell is selected.
by system
Create src/components/PresetLibrary.tsx to display template cards and load them into state.
by system
Create src/storage/local.ts to save/load the current pattern and settings to localStorage with versioning.
by system
Load persisted state on app start and keep it updated via debounced save on state changes.
by system
Create src/components/ExportModal.tsx using shadcn Dialog with textarea for JSON export/import.
by system
Add src/storage/share.ts to serialize/deserialize validated track JSON strings and dispatch load actions.
by system
Update src/App.tsx to arrange PatternGrid, PlayControls, InstrumentPanel, PresetLibrary, and ExportModal into a clean responsive layout.
by system
Install and use needed shadcn/ui components (Button, Slider, Dialog, Tabs, Select, Tooltip) in their respective component files.
by system