Soundless Synth
A playful “music maker” that generates short visual looping patterns instead of audio: users pick a scale, tempo, and a few instrument lanes, then toggle steps on a grid to create animated, color-coded loops. The app offers preset patterns, randomize/mutate controls, and exports a loop as a GIF/PNG sprite sheet, with projects saved to localStorage for quick remixing.
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 template paths and add global Tailwind directives in src/index.css.
by system
Generate core UI components (Button, Card, Dialog, DropdownMenu, Select, Slider, Tabs, Tooltip, Toast) via shadcn.
by system
Create src/types.ts with Scale, Lane, Pattern, StepGrid, Preset, and Project model types.
by system
Add src/lib/constants.ts for default tempo, steps count, lane colors, and available scales.
by system
Create src/lib/utils/synth.ts for grid creation, toggle step, and deep-clone helpers.
by system
Create src/lib/presets.ts exporting a small set of starter patterns matching the data model.
by system
Add src/lib/utils/randomize.ts to randomize a grid with density and per-lane variation.
by system
Add src/lib/utils/mutate.ts to apply small probability-based edits to an existing pattern.
by system
Create src/lib/storage.ts to save/load/list/delete projects in localStorage with versioning.
by system
Implement src/hooks/useProjectReducer.ts to manage app state (tempo, scale, lanes, grid, selection).
by system
Create src/hooks/useTransport.ts for play/pause, current step, and tempo-driven tick scheduling.
by system
Build src/components/AppShell.tsx with header, main layout, and footer area.
by system
Create src/components/TopBar.tsx with play/pause, tempo control, scale select, and preset menu placeholders.
by system
Create src/components/LaneList.tsx to render lane names, colors, and enable/disable toggles.
by system
Create src/components/StepGrid.tsx to render a clickable grid of steps per lane with current-step highlight.
by system
Wire StepGrid step toggling and pointer dragging behavior in src/components/StepGrid.tsx.
by system
Create src/components/LoopCanvas.tsx that draws animated shapes for active steps on an HTML canvas.
by system
Add src/lib/utils/colors.ts to compute lane colors, alpha, and step glow based on playhead.
by system
Create src/components/PresetsDialog.tsx to browse and apply presets from src/lib/presets.ts.
by system
Create src/components/RandomizeControls.tsx with density slider and randomize/apply buttons.
by system
Create src/components/MutateControls.tsx with intensity slider and mutate/apply buttons.
by system
Create src/components/SaveProjectDialog.tsx to name and save the current project to localStorage.
by system
Create src/components/ProjectsDialog.tsx to list, load, duplicate, and delete saved projects.
by system
Create src/lib/export/sprite.ts to render frames from LoopCanvas and produce a PNG sprite sheet.
by system
Create src/lib/export/gif.ts to encode frames into a GIF using a pure-JS encoder.
by system
Create src/components/ExportDialog.tsx for selecting format (PNG/GIF), size, frames, and download.
by system
Implement src/pages/ComposerPage.tsx composing TopBar, StepGrid, LoopCanvas, and side panels.
by system
Update src/App.tsx to render ComposerPage and show toasts/dialog portals as needed.
by system
Add concise empty/loading states and keyboard shortcuts help in src/components/HelpDialog.tsx.
by system