Soundless Sequencer
A playful, silent step-sequencer that lets users build looping "rhythm" patterns visually using animated shapes instead of audio. Users create multiple tracks (e.g., dots, lines, squares), set tempo/loop length, toggle steps on a grid, and watch the composition animate in real time with shadcn/ui controls. Patterns can be saved, renamed, duplicated, exported/imported as JSON, and stored in 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 src/index.css with Tailwind directives and a minimal base theme.
by system
Create src/lib/utils.ts with cn() helper (clsx + tailwind-merge).
by system
Create src/types/sequencer.ts with Track, Pattern, StepGrid, and AppState types.
by system
Create src/lib/storage.ts for localStorage load/save with versioned schema.
by system
Create src/lib/serialize.ts to export/import Pattern JSON with validation.
by system
Create src/lib/id.ts with a tiny client-side unique id function.
by system
Create src/lib/timing.ts to convert BPM to step interval ms for N-step loops.
by system
Create src/state/reducer.ts implementing actions for tracks, steps, tempo, and patterns.
by system
Create src/state/store.tsx providing AppState via React context + useReducer.
by system
Create src/components/AppLayout.tsx with header, sidebar, and main content regions.
by system
Create src/components/HeaderBar.tsx with title and primary pattern actions.
by system
Create src/components/TransportBar.tsx with Play/Pause, BPM slider, and loop length control.
by system
Create src/components/StepGrid.tsx rendering a clickable grid of steps for the active track.
by system
Wire StepGrid interactions to reducer actions without touching other components.
by system
Create src/components/TrackList.tsx showing tracks, active selection, and per-track controls.
by system
Create src/components/NewTrackDialog.tsx to add a track with shape type and color.
by system
Create src/components/RenameTrackDialog.tsx to rename a selected track.
by system
Implement duplicate-track reducer action and a button in TrackList.
by system
Implement delete-track reducer action and a confirmation dialog.
by system
Create src/hooks/usePlayhead.ts to advance current step on an interval when playing.
by system
Update StepGrid to visually indicate current playhead step and active toggles.
by system
Create src/components/VisualStage.tsx rendering animated shapes driven by active steps.
by system
Create src/components/shapes/shapeRenderers.tsx for dot/line/square visuals with Tailwind classes.
by system
Implement per-track pulse/bounce animation when the playhead hits an enabled step.
by system
Create src/components/PatternList.tsx to list saved patterns with select behavior.
by system
Create src/components/SavePatternDialog.tsx to save/overwrite current pattern metadata.
by system
Implement rename and duplicate actions for saved patterns in PatternList.
by system
Create src/components/ImportExportDialog.tsx to export JSON to textarea and import JSON into state.
by system
Hydrate initial state from localStorage and persist on changes using storage helpers.
by system