Soundless Foley Studio
A playful browser-based “foley lab” where users build short silent scenes (e.g., footsteps, rain, door creaks) by arranging and layering simple sound blocks on a timeline, then export the mix as a downloadable WAV/MP3-like (WAV) file. The app includes a small built-in sound library (generated via Web Audio + a few embedded samples), per-track controls (volume, pan, trim, fade), and a preview player with a moving playhead. Projects auto-save to localStorage, and the UI is split into clear components: sound library, timeline/track editor, transport controls, and export/share panel.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @tailwindcss/vite && npm i lucide-react && npx shadcn@latest init -d
by system
Configure tailwind.config + src/index.css with Tailwind directives and wire @tailwindcss/vite in vite.config.ts.
by system
Create src/App.tsx with a 3-panel layout (Library | Timeline | Export) and a top transport bar.
by system
Create src/types/foley.ts with types for SoundAsset, Clip, Track, Project, and TransportState.
by system
Create src/audio/audioUtils.ts with helpers for AudioContext, decoding, gain/pan nodes, and buffer slicing.
by system
Create src/audio/library.ts exporting a small list of built-in sounds (some generated via WebAudio + a couple embedded base64 WAVs).
by system
Create src/audio/useAudioEngine.ts to schedule clips on a timeline, manage play/stop/seek, and expose currentTime.
by system
Create src/state/useProjectStore.ts using React context + reducer to manage tracks, clips, selection, and edits.
by system
Create src/state/useProjectPersistence.ts to autosave/load Project to localStorage with versioning.
by system
Create src/state/defaultProject.ts to generate an initial Project with a couple empty tracks.
by system
Create src/components/TransportBar.tsx with Play/Pause, Stop, Loop toggle, and time readout.
by system
Create src/components/Playhead.tsx to render a moving playhead based on engine currentTime.
by system
Create src/components/TimelineGrid.tsx to render time ruler + beat/second markers with a fixed row header.
by system
Create src/components/TrackList.tsx to render tracks, track names, mute/solo buttons, and add-track button.
by system
Create src/components/TrackControls.tsx for per-track volume and pan sliders wired to project state.
by system
Create src/components/ClipBlock.tsx to render a clip on the timeline with label, trim handles, and fade handles.
by system
Create src/components/TimelineEditor.tsx to compose grid + tracks + clips and handle scrolling/zoom.
by system
Create src/state/useTimelineView.ts to manage zoom level, pixels-per-second, and scroll syncing.
by system
Create src/components/SoundLibraryPanel.tsx listing built-in sounds with audition play buttons.
by system
Implement HTML5 drag/drop in SoundLibraryPanel.tsx to create a new clip on drop position.
by system
Add selection logic to ClipBlock.tsx (click select, shift multi-select, escape clear) via store actions.
by system
Add pointer-drag logic to ClipBlock.tsx to move clips along time and between tracks with snapping.
by system
Add left/right trim handle logic in ClipBlock.tsx updating clip startOffset/duration.
by system
Add fade-in/fade-out handle logic in ClipBlock.tsx updating clip fadeIn/fadeOut seconds.
by system
Create src/components/InspectorPanel.tsx showing selected clip/track properties (volume, pan, fades, name).
by system
Wire TransportBar.tsx to useAudioEngine.ts for play/pause/stop/seek and update store transport state.
by system
Create src/audio/renderToWav.ts to offline-render the project using OfflineAudioContext and return a WAV Blob.
by system
Create src/components/ExportPanel.tsx with render button, progress indicator, and download link for WAV.
by system
Create src/components/SharePanel.tsx to export/import project JSON via textarea and file upload.
by system