Constellation Composer
Build a playful generative “night sky” maker where users place stars on a canvas, connect them into constellations, and assign each constellation a name, short meaning, and color. The app includes a seedable random sky generator, snap-to-grid and alignment helpers, and an export feature to download the sky as PNG/SVG. All skies and constellation libraries are saved in localStorage, with a simple gallery view to duplicate, remix, and share a sky via a URL-encoded preset.
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 tabs toast tooltip separator slider switch
by system
Configure Tailwind + shadcn/ui styles in tailwind.config.ts and src/index.css.
by system
Create a minimal hash-based router (Gallery/Sky Editor) in src/App.tsx.
by system
Create src/types.ts with Sky, Star, Constellation, Segment, and Preset types.
by system
Create src/lib/rng.ts implementing deterministic seeded random helpers.
by system
Create src/lib/generateSky.ts to generate a starfield from a seed and density settings.
by system
Create src/lib/geom.ts for distance, snapping, and hit-testing functions.
by system
Create src/lib/storage.ts to load/save skies and constellation library to localStorage with versioning.
by system
Create src/lib/preset.ts to URL-encode and decode a sky preset safely.
by system
Create src/components/AppShell.tsx with top bar and responsive two-pane layout.
by system
Add shadcn toaster wiring in src/main.tsx and a small helper in src/lib/toast.ts.
by system
Create src/components/SkyCanvas.tsx rendering stars/segments on an HTML canvas with a draw loop.
by system
Create src/lib/canvasInteraction.ts to map pointer events to world coords and selection actions.
by system
Implement click-to-add star behavior in SkyCanvas with optional snap-to-grid.
by system
Implement selecting and dragging stars with hover/active visuals in SkyCanvas.
by system
Implement a mode that connects selected stars into line segments for an active constellation.
by system
Add keyboard shortcuts in the editor to delete selected stars/segments safely.
by system
Add an optional grid overlay and snap size control in SkyCanvas.
by system
Implement simple alignment helpers (x/y snap lines to nearby stars) during drag.
by system
Create src/hooks/useSkyEditor.ts to manage tool mode, selection, and undoable edits.
by system
Add undo/redo support inside useSkyEditor with keyboard shortcuts.
by system
Create src/components/ConstellationForm.tsx for name, meaning, and color editing.
by system
Create src/components/ConstellationList.tsx to select, add, duplicate, and delete constellations.
by system
Create src/components/SkySettings.tsx for seed, density, background, and regenerate actions.
by system
Create src/pages/EditorPage.tsx composing canvas + panels and persisting changes.
by system
Create src/lib/exportPng.ts to export the current sky canvas to a downloadable PNG.
by system
Create src/lib/exportSvg.ts to generate and download an SVG representation of the sky.
by system
Create src/pages/GalleryPage.tsx listing saved skies with thumbnail, rename, delete, and duplicate.
by system
Create src/components/ShareDialog.tsx to copy a URL-encoded preset link and import from URL.
by system
Add logic in App.tsx to detect preset params on load and offer to save/open the imported sky.
by system