Glyph Garden
A tiny generative art toy where users “plant” ASCII glyph seeds (like *, @, #) onto a grid and grow them into animated patterns using simple rules (mirror, drift, bloom, scatter). Each plant is a configurable card (glyph, color palette, growth speed, rule set) that can be toggled, reordered, and layered to compose a final canvas, with one-click export to PNG and shareable presets saved to localStorage.
Run: npm create vite@latest . -- --template react-ts && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @tailwindcss/vite && npm i lucide-react && npx shadcn@latest init
by system
Configure Tailwind content paths and add base Tailwind directives to src/index.css.
by system
Add shadcn/ui primitives needed (button, card, input, slider, select, switch, tabs, tooltip, dropdown-menu, dialog).
by system
Build the main layout in App.tsx with header, left sidebar, and canvas area.
by system
Create src/types.ts defining Plant, RuleSet, Palette, and Preset types.
by system
Create src/palettes.ts exporting a small set of named color palettes.
by system
Create src/rules.ts defining mirror, drift, bloom, and scatter rule configs.
by system
Create src/plantDefaults.ts to generate a new Plant with sensible defaults.
by system
Implement src/hooks/useLocalStorage.ts for typed get/set and versioned keys.
by system
Create src/presets/storage.ts to save/load presets and last session state from localStorage.
by system
Implement src/state/usePlants.ts to manage add/remove/update/toggle/reorder/layer plants.
by system
Create src/utils/reorder.ts with a pure function to move array items by index.
by system
Create src/engine/gridTypes.ts defining Cell, Grid, and renderable cell output types.
by system
Create src/engine/grid.ts with functions to create/clear grids and set/get cells.
by system
Implement src/engine/applyRules.ts to apply a plant’s rules to its active cells per tick.
by system
Create src/engine/composite.ts to combine multiple plant layers into a final grid.
by system
Implement src/hooks/useTicker.ts using requestAnimationFrame with a controllable tick rate.
by system
Create src/components/GlyphCanvas.tsx to render the final grid as monospaced glyphs with colors.
by system
Create src/components/GridControls.tsx to adjust rows/cols and cell size settings.
by system
Create src/components/PlantList.tsx to display plants as a vertical list of cards.
by system
Create src/components/PlantCard.tsx to show plant summary with toggle, delete, and drag handle visuals.
by system
Create src/components/controls/GlyphPicker.tsx for selecting a single ASCII glyph.
by system
Create src/components/controls/PaletteSelect.tsx for choosing a named palette for a plant.
by system
Create src/components/controls/SpeedSlider.tsx to edit a plant’s growth speed.
by system
Create src/components/RuleEditor.tsx to enable/disable rules and tweak rule parameters per plant.
by system
Add up/down buttons in PlantCard.tsx to reorder plants without drag-and-drop.
by system
Implement click-to-plant in GlyphCanvas.tsx to place a seed for the selected plant on the grid.
by system
Create src/components/PlaybackControls.tsx for play/pause, step, and clear actions.
by system
Create src/utils/exportPng.ts to rasterize the rendered grid to an offscreen canvas and download as PNG.
by system
Create src/components/SharePresetDialog.tsx to save/load presets and generate a shareable URL hash.
by system