Glitch Garden
A tiny generative “garden” builder where users plant tiles (seeds, stems, blooms) on a grid and apply playful glitch filters (pixel-shift, scanlines, color-swap) to create animated patterns. It includes a palette picker, layer toggles (soil/plant/effects), and a one-click export to PNG plus shareable presets saved in localStorage. The app is split into clear components: grid editor, tile palette, effect controls, animation preview, and preset/gallery manager.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @radix-ui/react-dialog @radix-ui/react-tabs @radix-ui/react-switch @radix-ui/react-slider @radix-ui/react-dropdown-menu lucide-react clsx tailwind-merge class-variance-authority && npx shadcn@latest init.
by system
Configure tailwind.config.ts and src/index.css with content paths and base Tailwind directives.
by system
Create src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Create src/types/garden.ts for tile kinds, layers, effects, presets, and grid state types.
by system
Implement src/App.tsx with a header, left sidebar, main canvas area, and right sidebar.
by system
Create src/components/AppShell.tsx to encapsulate responsive layout and panel styling.
by system
Create src/state/useGardenStore.ts using React hooks to hold grid, selection, layers, effects, and presets.
by system
Create src/lib/grid.ts with default grid size, coordinate helpers, and immutable update utilities.
by system
Create src/components/GridTile.tsx to render a single cell based on soil/plant/effects layer data.
by system
Create src/components/GridEditor.tsx to render the grid and handle pointer painting interactions.
by system
Add drag-to-paint, erase modifier, and hover cursor logic inside GridEditor.tsx.
by system
Create src/components/TilePalette.tsx with selectable tiles (seed/stem/bloom) and a clear tool.
by system
Create src/components/PalettePicker.tsx for choosing plant color variants and storing selection.
by system
Create src/components/LayerToggles.tsx with switches for soil/plant/effects visibility.
by system
Create src/components/EffectControls.tsx with sliders/toggles for pixel-shift, scanlines, and color-swap.
by system
Create src/effects/pixelShift.ts to apply a deterministic pixel offset transform to rendered output.
by system
Create src/effects/scanlines.ts to generate a scanline overlay/alpha pattern for the preview.
by system
Create src/effects/colorSwap.ts to remap palette colors based on a seed and intensity.
by system
Create src/effects/applyEffects.ts to compose enabled effects in a single function.
by system
Create src/components/AnimationPreview.tsx that renders the grid to a canvas and animates via requestAnimationFrame.
by system
Add play/pause and speed controls to AnimationPreview.tsx using shadcn/ui components.
by system
Create src/lib/render.ts to draw the grid state onto a CanvasRenderingContext2D deterministically.
by system
Create src/components/ExportButton.tsx to export the current canvas as a PNG download.
by system
Create src/lib/presets.ts to serialize/deserialize presets and validate versions.
by system
Create src/state/useLocalStorage.ts hook and wire it to save/load presets in useGardenStore.ts.
by system
Create src/components/PresetManager.tsx to save, rename, delete, and apply presets.
by system
Create src/components/PresetGallery.tsx to show preset thumbnails and apply on click.
by system
Create src/components/PresetThumbnail.tsx to render a tiny canvas preview for a preset.
by system
Create src/lib/share.ts to encode/decode preset data into the URL hash and hydrate on load.
by system
Add a small About/help dialog component in src/components/AboutDialog.tsx describing controls and shortcuts.
by system