Pattern Potion
A tiny generative pattern maker where users mix “ingredients” (colors, symmetry, grid size, noise, and shape types) to instantly create tiled wallpapers on a canvas. Users can save favorite potions as presets in localStorage, randomize recipes with a single button, and export the current pattern as a PNG. The UI is split into clear panels—Canvas Preview, Ingredient Controls, Preset Library, and Export/Share—making it easy for multiple agents to build components independently.
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 -d
by system
Configure Tailwind content + add @tailwind directives and CSS variables in src/index.css.
by system
Add src/lib/utils.ts with cn() helper (clsx + tailwind-merge).
by system
Implement the top-level 4-panel responsive layout in src/App.tsx.
by system
Create src/types/pattern.ts with Recipe, Preset, and enums for shapes/symmetry.
by system
Add src/pattern/defaultRecipe.ts exporting the initial recipe object.
by system
Create src/pattern/rng.ts with a deterministic PRNG from a numeric seed.
by system
Add src/pattern/palette.ts to generate/validate recipe color arrays.
by system
Create src/pattern/noise.ts with a lightweight 2D noise function using seed.
by system
Add src/pattern/symmetry.ts to map a cell coordinate through selected symmetry.
by system
Create src/pattern/drawShapes.ts with functions to draw circle/triangle/square/diamond on a 2D canvas.
by system
Implement src/pattern/renderPattern.ts that draws a tiled pattern from a Recipe onto a canvas context.
by system
Create src/components/CanvasPreview.tsx rendering a <canvas> and calling renderPattern on recipe changes.
by system
Add src/hooks/useResizeObserver.ts to measure panel size and resize the canvas.
by system
Create src/state/useRecipeStore.ts using React state to hold and update the current Recipe.
by system
Create src/components/IngredientControls.tsx with sections and placeholders wired to recipe state.
by system
Add src/components/controls/GridSizeControl.tsx using a shadcn Slider to update recipe.gridSize.
by system
Add src/components/controls/SymmetryControl.tsx using a shadcn Select to update recipe.symmetry.
by system
Add src/components/controls/ShapeTypeControl.tsx using ToggleGroup/Checkboxes to update recipe.shapes.
by system
Add src/components/controls/NoiseControl.tsx with a Slider to update recipe.noiseAmount.
by system
Add src/components/controls/ColorControls.tsx with multiple color inputs to edit recipe.colors.
by system
Create src/components/RandomizeButton.tsx to generate a new randomized Recipe and set it in state.
by system
Add src/presets/presetStorage.ts to load/save/delete presets in localStorage.
by system
Create src/components/PresetLibrary.tsx listing presets and allowing apply/delete actions.
by system
Add src/components/SavePresetForm.tsx to name and save the current recipe as a preset.
by system
Create src/components/PresetCard.tsx showing preset name and small actions (apply/delete).
by system
Create src/export/exportPng.ts to export the current canvas to a downloadable PNG.
by system
Create src/components/ExportPanel.tsx with an Export PNG button and optional filename input.
by system
Wire shadcn Toaster and show toasts for save/delete/export actions in relevant components.
by system
Add src/share/urlHash.ts to encode/decode Recipe to location.hash and load on app start.
by system