Glitch Garden
Create a tiny generative art sandbox where users “grow” a garden of animated geometric plants by tweaking sliders (seed, symmetry, color rules, wind, and glitch intensity) and clicking to plant new shapes on a canvas. Each plant is a reusable component with its own parameters, can be rearranged via drag-and-drop, and the whole garden can be saved/loaded from localStorage as named scenes. Include an export panel to download the current garden as PNG/SVG and a randomize button that generates a cohesive new theme while keeping the scope limited to a single-page React app.
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 class-variance-authority clsx tailwind-merge && npx shadcn@latest init
by system
Configure Tailwind content paths and add Tailwind directives to src/index.css.
by system
Add src/lib/utils.ts with cn() helper and ensure shadcn/ui path aliases work.
by system
Implement src/App.tsx as a single-page layout with header, left controls, and main canvas area.
by system
Generate shadcn/ui components needed (Button, Slider, Input, Label, Select, Separator, Dialog, Tabs).
by system
Create src/types/garden.ts defining Plant, PlantParams, Theme, and Scene types.
by system
Add src/lib/rng.ts implementing a deterministic seeded RNG used by theme and plant generation.
by system
Add src/lib/colorRules.ts to produce cohesive palettes and per-plant color assignments from a Theme.
by system
Add src/lib/theme.ts to generate a cohesive Theme from a seed and randomize within bounded ranges.
by system
Create src/state/useGardenStore.ts using React context + reducer to manage plants, theme, and selection.
by system
Create src/components/ControlsPanel.tsx with slider controls for seed, symmetry, wind, glitch, and color rule.
by system
Connect ControlsPanel to useGardenStore to update global parameters and regenerate theme when seed changes.
by system
Add src/components/RandomizeButton.tsx to randomize theme while preserving current plant positions.
by system
Create src/components/GardenCanvas.tsx rendering an SVG stage with background and a plants layer.
by system
Implement click handling in GardenCanvas to add a new plant at pointer coordinates using current parameters.
by system
Add src/lib/plantFactory.ts to create Plant instances with stable IDs and per-plant params derived from theme.
by system
Create src/components/plants/PlantRenderer.tsx that dispatches to specific plant geometry components by type.
by system
Implement src/components/plants/SproutPlant.tsx as an animated geometric sprout honoring symmetry and palette.
by system
Implement src/components/plants/BloomPlant.tsx as a radial bloom with oscillation driven by wind.
by system
Implement src/components/plants/ShardPlant.tsx as angular shards with glitch jitter controlled by intensity.
by system
Add src/hooks/useWind.ts producing a time-based wind value for subtle sway animations.
by system
Add src/hooks/useGlitch.ts to generate deterministic jitter offsets per plant based on seed and intensity.
by system
Create src/components/PlantItem.tsx that wraps a plant with selection ring and pointer interactions.
by system
Implement simple pointer-based dragging in PlantItem to update plant position in store without external libs.
by system
Add store action to raise selected plant to top and wire it to a small toolbar button.
by system
Add src/lib/sceneStorage.ts to save/load named scenes to localStorage with versioning and validation.
by system
Create src/components/ScenesPanel.tsx to list scenes, load, save-as, rename, and delete.
by system
Create src/components/ExportPanel.tsx with buttons for Export PNG and Export SVG plus size/background options.
by system
Add src/lib/exporters.ts to serialize the SVG and to rasterize to PNG via canvas without external services.
by system
Add src/components/Hotkeys.tsx for shortcuts (R randomize, S save, Del delete) and tighten styling.
by system