Weather Sprite Lab
Build a playful “forecast-to-art” studio that turns today’s local weather (using the browser’s Geolocation + a public weather API fetch) into a tiny animated pixel sprite scene—sunny, rainy, windy, snowy—rendered on a grid canvas. Users can tweak parameters (palette, animation speed, scene elements like clouds/trees/umbrellas), save favorite generated sprites as “cards” to localStorage, and export the current scene as a PNG. The app is split into clear modules: weather fetch + parsing, sprite generator, canvas renderer/animator, controls panel, saved gallery, and export/share modal.
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-slider @radix-ui/react-tabs class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init.
by system
Configure tailwind.config + src/index.css with Tailwind directives and a minimal app background.
by system
Generate core shadcn/ui components (button, card, dialog, slider, tabs, switch, select, toast) via CLI.
by system
Create src/types.ts with WeatherData, SceneParams, SpriteFrame, SavedCard, and Palette types.
by system
Create src/lib/weatherApi.ts to fetch forecast data from Open-Meteo and normalize into WeatherData.
by system
Create src/hooks/useGeolocation.ts to request location and expose coords/loading/error.
by system
Create src/hooks/useWeather.ts that consumes coords, fetches WeatherData, and exposes status + refresh.
by system
Create src/lib/weatherToScene.ts to map WeatherData into a base SceneParams preset (sun/rain/wind/snow).
by system
Create src/lib/palettes.ts exporting a few pixel-art palette presets and defaults.
by system
Create src/lib/rng.ts for deterministic sprite generation using a numeric seed.
by system
Create src/lib/spriteGenerator.ts that turns SceneParams + seed into a SpriteFrame[] pixel grid.
by system
Create src/lib/elements.ts with pixel templates for sun, cloud, raindrop, snowflake, tree, umbrella.
by system
Create src/lib/animate.ts to derive multi-frame animations (cloud drift, rain fall, snow drift) from a base frame.
by system
Create src/lib/canvasRenderer.ts to draw a SpriteFrame onto an HTMLCanvasElement with scaling.
by system
Create src/hooks/useCanvasAnimator.ts to run requestAnimationFrame over frames with adjustable speed.
by system
Create src/lib/exportPng.ts to export the current canvas to a downloadable PNG blob.
by system
Create src/lib/storage.ts to save/load/delete SavedCard items from localStorage with versioning.
by system
Create src/hooks/useSavedCards.ts to manage SavedCard state backed by storage.ts.
by system
Implement src/App.tsx with header, main two-column layout, and footer placeholders.
by system
Create src/components/SpriteCanvas.tsx to host the canvas and invoke renderer + animator.
by system
Create src/components/ControlsPanel.tsx with sections for palette, speed, and scene toggles.
by system
Create src/components/PaletteSelect.tsx using shadcn Select to choose among palette presets.
by system
Create src/components/SpeedSlider.tsx using shadcn Slider to control animation speed.
by system
Create src/components/SceneToggles.tsx with Switches for clouds/trees/umbrella intensity options.
by system
Create src/components/WeatherStatus.tsx to show location permission, fetch state, and current condition label.
by system
Create src/components/RegenerateButton.tsx to bump the seed and trigger sprite regeneration.
by system
Create src/components/SaveCardButton.tsx to snapshot current params/seed and add a SavedCard.
by system
Create src/components/SavedGallery.tsx to render SavedCard thumbnails and basic metadata.
by system
Create src/components/SavedCardItem.tsx with preview canvas thumbnail and delete/load actions.
by system
Create src/components/ExportModal.tsx (Dialog) to preview and download PNG from the current canvas.
by system