I love front-end work, but life took me elsewhere: years of coding whatever came along, and I never got deep into it. Now, with AI, I can finally learn while I build.
A while ago I saw a mascot with three light switches around it. Click one and its lamp turns on or off, and the light falls on the character. I loved it, so I asked AI to research it and make one like it.
It was done fast, and then I realised I had no idea how it worked. So I sat down and took it apart. I expected three.js or something complicated. It turned out all it takes is:
- 4 images: one with every lamp off, and three with one lamp on each. Stack them and let CSS blend them; with 2 or 3 lamps on at once, the colours still mix well.
- The main CSS property doing the blending is
mix-blend-mode. - The images themselves: ask Gemini or ChatGPT to draw them.
- For the click when a lamp switches, AI wrote a few lines of JS so the browser makes the sound itself. No mp3 file at all.
I put the whole process into a talk. Here's a short video that pulls out the principles underneath:
If you want to dig deeper, open the slides and turn on autopilot, and they present themselves: https://vibe-coding-a-light-switch-mascot.codeleadgrow.workers.dev/?src=devto
Slide 9 keeps exactly how I prompted, and re-prompted, until it came out right. Honestly, that part was painful. I'm still looking for a better way. Ha ha.
Want more, or the next parts as they come out? Follow me on Facebook: https://www.facebook.com/codeleadgrow
Building in public 2026 · part 1: Vibe-Coding a Light-switch Mascot
I wrote this post in Vietnamese; AI helped me translate it.
Top comments (0)