Glyph Garden
A playful generative pattern maker where you “plant” tiles (glyphs like circles, lines, stars, letters) onto a grid and define simple growth rules (e.g., every 3 seconds, expand to neighbors matching a color or shape). The app animates the garden’s evolution, lets you pause/step/reset, and provides a rule editor with a few presets plus randomize. Users can save multiple gardens to localStorage, export a PNG snapshot, and share/import designs via a compact JSON string.
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 && npx shadcn@latest add button card dialog dropdown-menu input label slider select separator switch tabs textarea toast tooltip
by system
Configure Tailwind content paths and add @tailwind directives in src/index.css.
by system
Create src/App.tsx with a header, main workspace, and right-side panel layout.
by system
Add src/lib/types.ts defining Glyph, Tile, Grid, Rule, GardenState, and Preset types.
by system
Add src/lib/grid.ts for creating, cloning, and iterating a 2D grid with bounds helpers.
by system
Add src/lib/rules.ts implementing a pure function that applies growth rules for one tick.
by system
Add src/lib/presets.ts exporting a few curated rule+palette presets.
by system
Add src/lib/randomize.ts to generate random glyph palettes and randomized rule sets.
by system
Add src/lib/share.ts to serialize/deserialize garden designs to a compact JSON string.
by system
Add src/lib/storage.ts for saving/loading/deleting named gardens in localStorage.
by system
Add src/hooks/useInterval.ts providing a paused-aware interval hook for ticks.
by system
Add src/hooks/useGarden.ts managing grid, rules, running/paused, step, reset, and tick speed.
by system
Create src/components/GlyphIcon.tsx to render a glyph (shape/letter) in a tile via SVG.
by system
Create src/components/GardenGrid.tsx to render the grid and handle click/drag painting.
by system
Create src/components/BrushBar.tsx to choose glyph, color, and paint/erase modes.
by system
Create src/components/PlaybackControls.tsx with play/pause, step, reset, and speed slider.
by system
Create src/components/RuleEditor.tsx to edit rule conditions, neighbor matching, and interval.
by system
Create src/components/PresetPicker.tsx to apply presets and show brief preset descriptions.
by system
Create src/components/RandomizeButton.tsx that generates and applies a randomized garden setup.
by system
Create src/components/SaveGardenDialog.tsx to name and save current garden to localStorage.
by system
Create src/components/SavedGardens.tsx to load/rename/delete saved gardens.
by system
Create src/components/ShareDialog.tsx to copy the compact JSON string to clipboard.
by system
Create src/components/ImportDialog.tsx to paste a string and load it with validation.
by system
Add src/lib/exportPng.ts to export the grid as a PNG using an offscreen canvas.
by system
Create src/components/ExportPngButton.tsx to trigger snapshot export with current settings.
by system
Add src/components/AppToaster.tsx and standardize user feedback for save/import/export actions.
by system
Add src/hooks/useHotkeys.ts to bind space (play/pause), N (step), R (reset), E (erase).
by system
Add src/lib/validate.ts to validate rule inputs and return user-friendly error messages.
by system
Update src/App.tsx to compose grid, controls, rule editor, presets, save/share/export sections.
by system
Adjust styling, sensible defaults (grid size, tick rate), and empty-state messaging across UI.
by system