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.…