{"slug": "my-garden-a-digital-garden-that-grows-with-your-day", "title": "My Garden — A Digital Garden That Grows With Your Day", "summary": "A developer built My Garden, a digital garden that grows based on daily check-ins. The single static HTML file uses Google AI (Gemini) to select flowers matching the user's mood and ElevenLabs for voice narration, with weather data from Open-Meteo affecting the scene.", "body_md": "*This is a submission for Weekend Challenge: Passion Edition*\n\nMy Garden is a digital garden that grows alongside your real life, not just your clicks. Every day, you check in with a line or two about how you're doing, and your garden plants a flower to match — chosen by AI, narrated by AI, and set in a scene that reflects the actual weather where you are.\n\nGardening is something I genuinely love, so instead of building a generic decorative garden toy, I wanted the growth to mean something: a small, low-effort daily ritual that turns into a visual record over time, the same way a real garden is a record of the days you showed up to tend it.\n\nThe whole thing is a single static HTML file — no backend, no build step — so it deploys anywhere as a plain static site.\n\n**The garden itself** is hand-built with CSS keyframes and inline SVG. Each flower type (daisy, tulip, sunflower, lavender, poppy) is a small SVG generator function, and planting one triggers a staged grow-in animation: stem scales up, leaves fade in, then the flower head blooms — all through class-toggled CSS transitions rather than a JS animation loop.\n\n**Google AI (Gemini)** is the heart of the daily check-in. When you write a short entry about your day, it's sent to gemini-3.5-flash with a prompt asking it to pick one of the five flower types that matches the entry's mood, and to write a one-line \"gardener's note\" reflecting on what you wrote — as if the garden itself is responding to your day. That note becomes the flower's hover label and gets logged in a running garden journal underneath.\n\n**ElevenLabs** gives that note a voice. On connecting an API key, the app pulls the actual voices already in your ElevenLabs account (GET /v1/voices) and lets you assign a different one to each flower type. Beyond just voice identity, each flower type also has its own delivery tuning — stability and style values passed to the text-to-speech call — so a lavender note is read calmly and steadily, while a sunflower note comes out more animated and expressive, even if two flowers happen to share the same underlying voice.\n\n**Weather** (via Open-Meteo, no key required) pulls real current conditions for your location and actually changes the scene: rain streaks and a dimmed sky on a rainy day, drifting snow in the cold, faster wind-sway on breezy days. It's a small touch, but it ties the garden to the real world outside your check-in text.\n\nBoth AI integrations have local fallbacks (simple keyword matching for the flower/mood pairing, and no audio) so the app never breaks for a visitor without their own API keys — though of course the fallback doesn't show off what Gemini or ElevenLabs are actually doing.", "url": "https://wpnews.pro/news/my-garden-a-digital-garden-that-grows-with-your-day", "canonical_source": "https://dev.to/catmac/my-garden-a-digital-garden-that-grows-with-your-day-5g64", "published_at": "2026-07-13 04:16:41+00:00", "updated_at": "2026-07-13 04:44:49.895468+00:00", "lang": "en", "topics": ["artificial-intelligence", "generative-ai", "ai-tools", "developer-tools"], "entities": ["Google AI", "Gemini", "ElevenLabs", "Open-Meteo"], "alternates": {"html": "https://wpnews.pro/news/my-garden-a-digital-garden-that-grows-with-your-day", "markdown": "https://wpnews.pro/news/my-garden-a-digital-garden-that-grows-with-your-day.md", "text": "https://wpnews.pro/news/my-garden-a-digital-garden-that-grows-with-your-day.txt", "jsonld": "https://wpnews.pro/news/my-garden-a-digital-garden-that-grows-with-your-day.jsonld"}}