Kawaii Greenhouse | Earth Day Edition 🏞️🌞🌸🌵

This is a submission for Weekend Challenge: Earth Day Edition

What I Built:

I built the Kawaii Greenhouse! 🌸🌵

It is an interactive, cozy, and highly educational virtual garden built to celebrate Earth Day and bridge the gap between cute digital art and real-world botany.
My goal was to create a relaxing environment where users can nurture a diverse collection of 12 beautiful plants—ranging from familiar favorites like Sunflowers and Pumpkins to exotic additions like Dragon Fruit and Lychee Trees.

Key Features:
Interactive Growth;
Clicking or touching any plant summons a watering can and a gentle rain effect. With each water, the plant physically grows right before your eyes!

Dopamine-Filled Milestones: When a plant is fully nurtured and reaches its maximum size, a joyful confetti explosion bursts across the screen to celebrate its final growth! 🎉

Botanical Education: An interactive card is revealed upon initial interaction, displaying the plant’s true scientific name and a helpful real-world care tip. (💡)

Real-World Connection: We bridge the cute SVG world with reality! Users can click the camera button (📷) to view a stunning, high-definition real-life photograph of the exact plant species fetched from Wikipedia.

Demo~
You can play with the deployed Kawaii Greenhouse right here:
Play the live version: Kawaii Greenhouse App;

ais-pre-enxj3vooe32ns2zr5ihmc6-142058924679.asia-southeast1.run.app

(Turn up your volume to hear the custom synth watering and reveal sounds!)

Code:
The project was built utilizing a modern frontend stack: standard React, Vite, Tailwind CSS, Framer Motion, and TypeScript.

How I Built It:
I approached this project by focusing heavily on micro-interactions and sensory feedback to make the gardening experience feel alive.
Animations & Physics: I used motion/react (Framer motion) heavily. The growth animations required careful calculation of SVG transform-origin points (anchored at the base of the pots) so the plants organically grow upwards and outwards rather than scaling from the center.
Custom SVG Art: Every single one of the 12 plants is a completely custom, pure-code SVG React component.
Audio Engineering in Code: Instead of loading heavy MP3 files, I built a custom SoundGenerator class utilizing the browser's native Web Audio API. It uses sine and triangle wave oscillators to synthesize adorable, retro-inspired "water drop," "sparkle," and "camera shutter" noises entirely mathematically in the browser!
Visual Effects: I integrated the lightweight canvas-confetti library to trigger the celebratory particle bursts solely when the React state detects a plant transitioning from stage 1 to its maximum stage 4.
Data Sourcing: I collected authoritative header images from Wikipedia to serve as the real-world botanical counterparts to the Kawaii SVGs.

Prize Categories~~~
Best Use of Google Gemini!

I am submitting this project for the Best Use of Google Gemini.

SVG Generation: Mathematically generating the intricate, custom Kawaii SVG paths for all 12 plants (especially complex ones like the twisting Saguaro, the leafy Lychee tree, and the ribbed Pumpkin) purely through natural language prompting.
Animation Math: Helping structure the complex Framer Motion scaling states and coordinating the timed setTimeout sequences syncing the watering can animation, rain effects, and confetti triggers.
Vanilla Audio Synthesis: Writing the highly specific Web Audio API code required to produce exactly the right "kawaii" pitch sweeps and glissandos for the synthesized sound effects without the use of external assets.
Gemini allowed me to iterate on complex UI/UX micro-interactions at incredible speed, turning a simple grid of SVGs into a fully interactive Earth Day experience!

Thank you,

Megan Lawther

18.04.2026