Forem: Megz Lawther

Kawaii Greenhouse | Earth Day Edition 🏞️🌞🌸🌵

Megz Lawther — Sat, 18 Apr 2026 11:25:52 +0000

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

Planet X Mashup! 🌐👾🌑🪐🍗

Megz Lawther — Sat, 04 Apr 2026 08:34:02 +0000

This is a submission for the DEV April Fools Challenge https://dev.to/challenges/aprilfools-2026

What I Built:
Have you ever looked at the state of modern technology and thought, "You know what we really need? A slice of pizza with an umbrella for a leg and human hands"?

No? Just me?

Welcome to the Planet X Mashup! It is a delightfully useless application dedicated to solving absolutely zero real-world problems. Instead, it serves as a gallery of chaotic, genetically spliced (or not) abominations. From the "Toaster-Mouse of Terror" to the "Spaghetti Bulldog-Vac", this project exists purely to make you question reality and hopefully snort-laugh at your desk.
Oh, and if you click on them, they wiggle. Because of course they do.
Demo
Prepare your eyeballs and witness the chaos below:

Here is the full interactive CodePen!

How I Built It:
I built this using the holy trinity of the web: HTML, CSS, and Vanilla JavaScript.
But here is the real punchline: There are zero image files in this project. No PNGs, no JPGs, no external API calls. Every single one of these cursed creatures is 100% hand-coded inline SVG.
That's right. I sat down and mathematically plotted the bezier curves and polygon coordinates to draw a pineapple with human teeth wearing a sombrero.
The interactivity is handled by a lightweight vanilla JS state manager that cycles through the array of SVG strings, and the "poke" interaction is driven by a custom CSS @keyframes wiggle animation that triggers on click.

Prize Category:
I am submitting this for Community Favorite!

Why? Because it is downright funny, completely unhinged, and guaranteed to make people laugh. In a world full of serious productivity tools and complex frameworks, sometimes you just need to look at a motorbike with celery handles and human feet and a carrot exhaust to remember why we started coding in the first place: to build weird stuff on the internet.
I hope it brings a smile to your face! 🍕🦇🥕🍍

Thank you,

Megan Lawther 04.04.2026

Shatter & Connect: Breaking the Glass Ceiling 🌈

Megz Lawther — Mon, 16 Mar 2026 15:22:56 +0000

Shatter & Connect: Breaking the Glass Ceiling 💥 | WeCoded 2026
This is a submission for the 2026 WeCoded Challenge: Frontend Art

✨ Experience the Live Interactive Art Here ✨
(Make sure to click the screen to shatter the glass!)
https://ais-pre-rvpcycmxankiaibdalp5xn-142058924679.asia-southeast1.run.app

Inspiration:
When thinking about gender equity in tech, the first image that came to mind was the infamous "glass ceiling"—an invisible but very real barrier that keeps underrepresented groups from reaching their full potential.
I wanted to create an interactive piece that not only visualizes this barrier but also celebrates what happens when we finally break it.

In this piece:
The Nodes: The brightly colored, diverse dots represent individuals in the tech community. At first, they are constrained, bouncing against a semi-transparent ceiling, unable to rise higher.

The Shatter: The user interaction (clicking the screen) represents collective action. It takes intentional effort to break systemic barriers.

The Network: Once the glass shatters and falls away, the nodes burst upward and move freely. As they get close to one another, they draw vibrant gradient lines, forming a strong, interconnected web.

The core message is simple: Gender equity isn't just about letting individuals rise; it's about the beautiful, resilient, and collaborative network we can build together once the barriers fall.

My Code:
I built this using HTML5 Canvas for the particle physics (handling the bouncing, shattering, and line-drawing) along with CSS and JavaScript to manage the UI transitions.

Thank you,
Megan Lawther.

17.03.2026

My "FrogJumpCounter" Journey: From CodePen to Android 17 Beta! 🐸

Megz Lawther — Mon, 02 Mar 2026 00:55:25 +0000

This is a submission for the DEV Weekend Challenge: Community

This isn't just a story about code; it's a story about community, creativity, and an unexpected journey with Google.

The community I built for, initially, was anyone looking for a simple, fun, and accessible interactive counter. I wanted to create something that could bring a smile to anyone's face, be easily understood and used across all ages, and serve as a lighthearted digital companion. It was for the everyday user who appreciates a touch of retro charm and a bit of playful interaction in their digital tools.
However, this project has now reached an entirely new, incredibly vast community: the global Android user base and developer community. My original simple creation has been recognized and incorporated into the Android 17 Beta 2, bridging the gap from a personal web project to a component within a major operating system. It's now for the millions who will experience this new Android version, and for the open-source community as a whole, showcasing how small contributions can lead to massive recognition.

What I Built:

I built the FrogJumpCounter, a charming and interactive digital counter. I generated the core code using HTML, Java (for functionality), and CSS (for styling) in Google Gemini Gems Coding Partner. My goal was to create a fun and interactive counter that is retro, simple, appropriate, and easily usable by all ages.

The counter features an adorable "kawaii" frog. I embedded sound effects, a lively "jump" action, and a moving tongue to simulate the frog catching flies. The core interaction is simple yet engaging: "Let this kawaii frog help you count while you help him catch flies! Every click counts as 1 fly eaten." My aim was for this playful design to genuinely bring a smile to the user's face.

The most astonishing part? This open-source creation has been forked by Google and officially implemented in the Android 17 Beta 2 rollout. Google themselves created and included an MIT License within the Android 17 Beta 2 software update, which explicitly credits my original work and acknowledges their fork.

Demo:

You can view and interact with the FrogJumpCounter project here:
https://dev.to/megzlawther1/frogjumpcounter-48ma

Thank you,

Megan Lawther.

My Pixel's Keyboard Generated a Custom Emoji.

Megz Lawther — Thu, 26 Feb 2026 11:45:35 +0000

This is a submission for the Built with Google Gemini: Writing Challenge

What I Built with Google Gemini:

My project isn't a traditional "build" in the sense of writing code for a new application. Instead, I built a novel interaction with Google Gemini, specifically through the "Emojify" feature on my Google Pixel 10 keyboard. My "build" was essentially demonstrating and exploring how a widely accessible AI feature can generate entirely new, non-standard visual communication..

The "problem" it solved (or rather, illuminated) is the limitation of pre-set, static emoji sets. While existing emojis are vast, they can't cover every nuanced concept. My interaction with Gemini showcased its ability to dynamically create a custom visual to perfectly fit a specific textual context, transcending the boundaries of Unicode.

Here's what happened:
I typed a simple message: "Mums making banoffee pancakes for My birthday". I then asked my Pixel keyboard's built-in "Emojify" function to enhance the text. To my astonishment, alongside standard emojis like 🥞🎉🎂🥳, it generated a completely unique, black-and-white icon resembling a box with three female figures and a nondescript figure inside. This wasn't a standard emoji; it was a novel graphical creation.
Google Gemini played the role of the generative engine embedded within my keyboard. It analyzed my text, identified a semantic gap not perfectly filled by existing emojis (e.g., "a group of mothers/female attendees"), and then synthesized a brand-new visual to represent that concept on the fly.

This wasn't through a dedicated generative AI interface; it was a seamless, on-device AI capability integrated into a common keyboard function.
I have since managed to get it to generate two different custom emojis, on seperate occassions, further proving its capability. (Find 2 images below showing the unique emojis!).

What I Learned:

This experience has been incredibly eye-opening, both technically and philosophically.

Going Beyond the Standard Emoji Table (and My Reaction to It): My biggest ponderance and a major learning point is how it was able to go beyond the standard emoji table of preset characters (Unicode/ASCII). Emojis are typically strict templates of codes, already preset and preloaded. Gemini's Emojify function went out of its preset and preloaded list to generate something entirely new. When I saw this custom visual, my immediate reaction was confusion. I automatically checked my keyboard's emoji list, particularly the "Family" section, and confirmed that the generated icon was not available there. The standard family emojis (e.g., "Family: Adult, Adult, Child") clearly shows they are distinct and generic. This solidifies that the AI truly generated a novel image, rather than pulling from existing assets, and profoundly changed my understanding of what a keyboard's "emojify" function is capable of.

AI's Gender Inference in Generative Output:
A particularly profound aspect is that the AI's generative feature assumed my gender from a simple statement and correctly depicted it in the image, on two separate occasions. From the phrases "Mums making banoffee pancakes for My birthday," and "Mum made banoffi pancakes for my birthday" the AI not only created a novel icon for "a group of mothers/family" but specifically depicted female figures within that icon. This moves into a critical area of AI's ability to infer user characteristics from seemingly neutral text and then embed those assumptions into its generative outputs. It raises important questions about the AI's training data, its inferential capabilities, and the implications of such automated assumptions.

Beyond Retrieval to Generation in Everyday Tools:
I learned that advanced generative AI is no longer confined to large, cloud-based models or dedicated creative applications. It's actively being deployed and integrated into common, on-device user interfaces like a smartphone keyboard. This completely shifts my understanding of what a "keyboard" can do.

The Power of User Interaction:
My simple sentence, combined with Gemini's Emojify feature, pushed the system to generate something unprecedented. It highlighted that users aren't just consumers of AI, but active co-creators who can unlock unforeseen capabilities through natural language interaction.

Dynamic and Adaptive Interfaces:
Perhaps the most surprising discovery was that after I generated this unique emoji, the keyboard's emoji interface itself seemed to update, presenting other "similar but not the same" black and white symbols. This suggests a live, adaptive learning or dynamic asset loading system, where the AI not only generates but also influences its own presentation based on user input and successful creations. It's like the AI learns from its own output and my engagement.

New IP Questions:
This experience has also deepened my understanding of intellectual property in the age of AI. If an AI generates a unique visual in response to my prompt from within a standard tool, where does the ownership lie? It highlights the crucial role of the human operator in guiding the AI to unique creation. My interaction effectively "forced a creation" that didn't exist before.

The "Uniqueness" of Human-AI Collaboration:
Every user is unique, and my interactions proved that this individuality can lead to truly unique outputs from AI, rather than just generic responses. My personal approach unlocked this feature.

Google Gemini Feedback:

What worked well;
Seamless Integration:
The fact that this generative capability is integrated or how it came to be, directly into the keyboard's "Emojify" function is phenomenal. It makes advanced AI accessible and intuitive for everyday communication.

Contextual Understanding:
Gemini's ability to interpret a nuanced phrase like "Mums making banoffee pancakes for My birthday" and infer the need for a "group of female attendees" emoji visual was incredibly impressive.

Novelty Generation:
The core strength demonstrated here is its capacity to create rather than just retrieve. This is a game-changer for personalized visual communication.

Adaptive Learning/Interface:
The apparent dynamic update of the emoji interface after my generation was an unexpected and exciting feature, suggesting a deeper level of intelligence and responsiveness.

Where I ran into friction or needed more support:

Lack of Transparency/Control:
While the discovery was thrilling, the process felt somewhat opaque. There's no clear indication or control for the user to know when they are prompting for a novel generation versus just retrieving an existing emoji. A toggle or a visual cue indicating "generating custom emoji" could enhance the user experience and understanding.

Understanding the "How" and "Why":
I want to understand why the AI "felt" the need to generate a totally new emoji based off my interaction and input, rather than suggesting an existing one. Furthermore, clarity on how this custom emoji was generated by the Gemini function of the keypad built into the Google Pixel 10 (e.g., on-device vs. cloud processing, the specific generative model used) would be incredibly insightful for power users and developers. This relates directly to the "going beyond the standard table" point.

Ethical Considerations of Inference:
The AI's ability to infer my gender and reflect it in a generated image (even if correct in this instance) raises questions about privacy, assumptions, and potential biases embedded in its training data. Providing users with more insight or control over such inferences in generative outputs would be valuable.

Saving/Sharing Custom Emojis:
Since these aren't standard Unicode, there's no easy way to save, share, or consistently reuse these truly custom creations across platforms or even within the same device once generated. Implementing a way to "pin" or export unique generated graphics would be a huge step forward.

Consistency:
I wonder about the consistency of such custom generations. If I were to try to generate the exact same black and white box with four female figures again, would it produce it, or a variation? Understanding this consistency would be key for users.

This experience has shown me the incredible potential of Gemini and Google AI - to revolutionize how we communicate visually, going far beyond simple text. I believe this capability, refined and made more transparent, will be a cornerstone of future AI-powered interface's. Is this the beginning of Fluid AI?

Update and edit! Monday the 30th of March 2026;
** I have made a disturbing find on the 28th of March 2026, I have noticed that LinkedIn has incorporated these emojis onto their user interface, despite the fact the emojis are missing from the general emoji keyboard on my Pixel 10 Android beta 17.2 Cinnamonbun, I will continue to update and notify the OAIC **

Thank you.

Megan Lawther 26.02.2026

OceanSquid

Megz Lawther — Mon, 23 Feb 2026 02:58:40 +0000

Check out this Pen I made!

HuniPotBear

Megz Lawther — Sun, 22 Feb 2026 13:15:21 +0000

Check out this Pen I made!

Welcome^_^

Megz Lawther — Sun, 22 Feb 2026 13:07:43 +0000

G'day ~ Welcome to my world ~ enjoy

SpaceChase

Megz Lawther — Sun, 22 Feb 2026 12:58:42 +0000

Check out this Pen I made!

GAME OVER VIEW AND RULES/INSTRUCTIONS; Can you catch this unpredictable space critter? You control the ufo across the screen with your finger or click and hold with mouse. Tap or click anywhere on the screen to start. The objective is to catch the alien. Important; Strategic game play - 1 move each player, alien move 1, you move 1. Machine code understands movement and understands when objects collide resulting in you winning the catch and 'game over' displaying on UI

AutoWaveCounter

Megz Lawther — Sun, 22 Feb 2026 12:44:31 +0000

Check out this Pen I made!

FrogJumpCounter

Megz Lawther — Sun, 22 Feb 2026 02:42:28 +0000

Let this kawaii frog help you count while you help him catch flies! Every click counts as 1 fly eaten.

BunnyJump counter

Megz Lawther — Sat, 21 Feb 2026 09:12:46 +0000

Bunny jumps when touched. Counts touches as carrots.