Soundless Synth Garden
A playful generative “garden” where users place plant tiles on a grid and each plant emits a looping visual pulse pattern (no audio) based on simple parameters like tempo, wave shape, and color. The app includes a palette/parameter panel, a timeline preview of each plant’s loop, and a combined animation canvas that syncs all placed plants. Users can save/load gardens to localStorage, export a PNG of the current scene, and share a compact seed string that recreates the layout and settings.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i lucide-react && npx shadcn@latest init -d
by system
Configure Tailwind in src/index.css with base/components/utilities and apply a minimal app background.
by system
Create src/App.tsx with a responsive two-column layout (left canvas/grid, right panel) using Tailwind.
by system
Add src/lib/types.ts defining PlantParams, PlantInstance, GardenState, and WaveShape enums.
by system
Create src/lib/utils/garden.ts with grid coordinate helpers, ID generator, and clamping.
by system
Create src/lib/seed.ts to serialize/deserialize GardenState into a compact URL-safe seed string.
by system
Create src/lib/storage.ts with saveGarden/loadGarden/listSlots helpers using localStorage.
by system
Create src/hooks/useGardenState.ts to manage GardenState and expose actions (place, remove, update, select, clear).
by system
Create src/components/Toolbar.tsx with New, Save, Load, Export PNG, and Share Seed buttons.
by system
Create src/components/dialogs/SaveDialog.tsx using shadcn Dialog to save current garden into a named slot.
by system
Create src/components/dialogs/LoadDialog.tsx using shadcn Dialog to pick and load a saved slot.
by system
Create src/components/dialogs/ShareSeedDialog.tsx to show/copy a seed string and optionally apply an entered seed.
by system
Create src/components/GridBoard.tsx rendering an interactive tile grid and handling click-to-place/remove.
by system
Create src/components/GridTile.tsx to render a single cell with plant preview, selection ring, and hover affordance.
by system
Create src/components/PlantPalette.tsx showing selectable plant presets (name, base color, icon).
by system
Create src/components/ParameterPanel.tsx to edit selected plant parameters (tempo, wave shape, color, intensity).
by system
Create src/components/controls/TempoSlider.tsx as a shadcn Slider wrapper with BPM display.
by system
Create src/components/controls/WaveShapeSelect.tsx as a shadcn Select for wave shapes.
by system
Create src/components/controls/ColorPicker.tsx using an input[type=color] with shadcn styling.
by system
Create src/components/controls/IntensitySlider.tsx as a shadcn Slider wrapper for pulse strength.
by system
Create src/lib/pulse.ts implementing normalized wave functions (sine, triangle, square, saw) driven by tempo.
by system
Create src/components/PlantTimeline.tsx to render a small canvas preview of the selected plant’s looping pulse.
by system
Create src/components/GardenCanvas.tsx drawing synced pulses for all placed plants on a single HTML canvas.
by system
Create src/hooks/useRafTime.ts to provide a requestAnimationFrame-driven time value with pause/resume support.
by system
Create src/lib/canvas/draw.ts with DPI scaling, clear, and shape drawing helpers for pulses.
by system
Wire selection interactions between GridBoard, PlantPalette, and ParameterPanel in src/App.tsx.
by system
Create src/lib/exportPng.ts to export GardenCanvas to a downloadable PNG via toDataURL.
by system
Connect Toolbar’s Export PNG button to exportPng using the GardenCanvas ref.
by system
Add src/hooks/useSeedFromUrl.ts to read a seed from location hash/query and initialize GardenState.
by system
Add src/components/EmptyHint.tsx to show brief instructions when the grid has no plants placed.
by system