Espresso Machine CSS Art

#webdev #css #animation

I've always enjoyed CSS art, seeing it as a way to draw on the web, something I've wanted to try.

Starting was the hardest part for me, especially organizing the divs and choosing the initial styles.

But now, with tools like ChatGPT and Copilot, the entry barrier is much lower. These tools help set up the basic boilerplate, and then we can iterate on it together.

They're great for the overall layout, but struggle with animations and positioning, which is when I have to do some manual work.

I'm really happy with the result.

Check out what happens when you click the coffee button! That last part was built with React, but Vanilla JS would do the trick as well.

Here's the Code Sandbox with the implementation. I used Tailwind for styling, and React to add some quick interactivity. I could probably have made it with just Vanilla JS but I find React too comfy. 😅

I also published this on my personal website. It has a live editor that you can see it!